? ? ? ? 嗨，我是小路。今天主要和大家分享的主題是“vue+threeJS 大理石貼圖”。? ? ? ??

通過 Vue 3 和 Three.js 實現大理石紋理效果，并將這種技術應用于產品展示、虛擬展覽、甚至是互動游戲之中，其潛力無窮。今天主要介紹基礎的大理石貼圖。

vue+threeJS 大理石貼圖示例圖

1.下載大理石圖片

定義：可以到百度上隨意找一張大理石的圖片，并將其一部分截圖下來。

2.創建球體并貼圖

//創建球體
let sphare;
const  createSphare = ()=>{//加載貼圖const texture = new THREE.TextureLoader().load("./tietu1.png");const sphareGeometry = new THREE.SphereGeometry(10, 32,32);const sphareMaterial = new THREE.MeshBasicMaterial({ map:texture});sphare = new THREE.Mesh(sphareGeometry, sphareMaterial);//模型上移sphare.position.y = 10;scene.add(sphare);
}

3.設置動畫

//渲染
const render = () => {//重復渲染requestAnimationFrame(render);//請求再次執行渲染函數render，渲染下一幀sphare.rotation.x += 0.01 ;//x軸旋轉速度sphare.rotation.y += 0.01 ;//y軸旋轉速度renderer.render(scene, camera); //執行渲染操作
}

二、實例代碼

<template><div class="pageBox"><div class="leftBox" ref="leftRef"></div><div class="rightBox" ref="rightRef" :style="{ background: bgColor }"></div></div></template>
<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
// 引入軌道控制器擴展庫OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const bgColor = ref("")const leftRef = ref();
const rightRef = ref()
// 定義相機輸出畫布的尺寸(單位:像素px)
let width = window.innerWidth; //寬度
let height = window.innerHeight; //高度
// 創建3D場景對象Scene
const scene = new THREE.Scene();
//設置背景色
scene.background = new THREE.Color(0xffffff);const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(0, 20, 30);//創建一個平面
let plane;
const createPlan = () => {const planeGeometry = new THREE.PlaneGeometry(100, 100);const planMaterial = new THREE.MeshBasicMaterial({color: 0x999999, side: THREE.DoubleSide});plane = new THREE.Mesh(planeGeometry, planMaterial);plane.rotation.x = -Math.PI / 2scene.add(plane);
}
//創建球體
let sphare;
const  createSphare = ()=>{//加載貼圖const texture = new THREE.TextureLoader().load("./tietu1.png");const sphareGeometry = new THREE.SphereGeometry(10, 32,32);const sphareMaterial = new THREE.MeshBasicMaterial({ map:texture});sphare = new THREE.Mesh(sphareGeometry, sphareMaterial);//模型上移sphare.position.y = 10;scene.add(sphare);
}
// 創建渲染器對象
const renderer = new THREE.WebGLRenderer();onMounted(() => {initData()//添加相機空間const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改變了相機參數，重新調用渲染器渲染三維場景controls.addEventListener('change', function () {renderer.render(scene, camera); //執行渲染操作});//監聽鼠標、鍵盤事件renderer.setSize(width, height); //設置three.js渲染區域的尺寸(像素px)//將innerHTML置空，避免append重復添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);})
const initData = () => {createPlan();createSphare();render();
}//渲染
const render = () => {//重復渲染requestAnimationFrame(render);//請求再次執行渲染函數render，渲染下一幀sphare.rotation.x += 0.01 ;//x軸旋轉速度sphare.rotation.y += 0.01 ;//y軸旋轉速度renderer.render(scene, camera); //執行渲染操作
}</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;}
}
</style>

三、注意事項

? ? ? ?注意球體的設置，和貼圖的位置防止，其余的都可以查看參考的文章。

都看到這里了，記得【點贊】+【關注】喲。

參考文章：

vue3+three 搭建平面上滾動旋轉的幾何體-CSDN博客