threeJs+vue 轻松切换几何体贴图

        嗨，我是小路。今天主要和大家分享的主题是“threeJs+vue 轻松切换几何体贴图”。        

        想象一下，手头上正好有个在线3D家具商店，用户不仅可以看到产品的静态图片，还能实时更换沙发的颜色或材质，获得真实的购物体验。这就是我们今天分享的主题——通过简单的几行代码，您可以赋予任何3D几何体不同的外观，增强用户的参与感。

几何体贴图示例

一、示例介绍

设计一个几何体，并通过gui切换3d几何体上不同的图片。就像LOL切换皮肤，只是这个是最基础的。

1.加载图片

定义：通过纹理贴图加载器，将图片加载到几何体的材质里面。主要是放入.map属性里面。

//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();

2.图片偏移+动画

定义：将图片距离初始位置，平移一定的距离。

//纹理U方向偏移 将图片进行偏移
texture.offset.x += 0.5;
//渲染
const render = () => {
//贴图动画，每次渲染时，动画平移0.01texture?texture.offset.x += 0.01:null;renderer.render(scene, camera); //执行渲染操作meshObjx.bool ? mesh.rotateX(0.01) : null;//每次绕y轴旋转0.01弧度meshObjy.bool ? mesh.rotateY(0.01) : null;//每次绕y轴旋转0.01弧度meshObjz.bool ? mesh.rotateZ(0.01) : null;//每次绕y轴旋转0.01弧度//重复渲染requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

3.图片显示面

定义：一般几何体默认有两个面，一个是正面，一个是背面。当图片切换成矩形平面时，这种效果更为明显。具体的效果，可看详情图。

child.material.side = THREE.SingleSide

二、实例代码

1、封装代码

const imgArr = reactive({ img: "" })
let texture = reactive("");
//更换模型图片
const setImg = () => {//.load()方法加载图像，返回一个纹理对象Textureconst girlTexture = texLoader.load('./girl.png');const goalTexture = texLoader.load('./goal.png');//切换模型上图片gui.add(imgArr, 'img', { '可爱': 1, '目标': 2 }).name('模型图片').onChange((value) => {//遍历mesh下所有的对象mesh.traverse((child) => {if (child instanceof THREE.Mesh) {if ([1, 2].includes(value)) {switch (value) {case 1:texture = girlTexturebreak;case 2:texture = goalTexturebreak;default:break;}//给模型进行贴图// 设置阵列模式texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;// uv两个方向纹理重复数量 2*2 = 4个图片 自动将图片按照制定的数量平铺texture.repeat.set(2, 2);//注意选择合适的阵列数量//纹理U方向偏移 将图片进行偏移texture.offset.x += 0.5;child.material.map = texture;//THREE.SingleSide 单面，THREE.DoubleSide 双面  默认是双面贴图console.log(THREE.DoubleSide)child.material.side = THREE.SingleSide//开启透明child.material.transparent = false//更新模型child.material.needsUpdate = true;}}})})
}

2、整个示例代码

<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, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 设置相机控件轨道控制器OrbitControls// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
const bgColor = ref("")
// 实例化一个gui对象
const gui = new GUI();const leftRef = ref();
const rightRef = ref()
const meshObjx = reactive({ bool: false })
const meshObjy = reactive({ bool: false })
const meshObjz = reactive({ bool: false })
// 定义相机输出画布的尺寸(单位:像素px)
let width = 800; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(50, width / height, 2, 6000);//创建一个平面矩形对象Geometry
const geometry = new THREE.PlaneGeometry(150, 150, 150);//==============================================
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({color: 0xffffff,//0xff0000设置材质颜色为红色opacity: 0.5,
});
//将集合形体和材质融合
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();onMounted(() => {initData()render();//添加相机空间const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作});//监听鼠标、键盘事件//当窗口发生改变时，触发时间，重新渲染window.onresize = () => {height = window.innerHeight;width = window.innerWidth / 2;renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)initData()}
})
const initData = () => {//设置网格模型在三维空间中的位置坐标，默认是坐标原点mesh.position.set(0, 10, 0);scene.add(mesh);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(200, 200, 200);camera.lookAt(mesh.position);//指向mesh对应的位置// AxesHelper：辅助观察的坐标系const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);// 添加一个辅助网格地面// const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);// scene.add(gridHelper);setGui();renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)//将innerHTML置空，避免append重复添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);
}//设置gui
const setGui = () => {//改变交互界面style属性gui.domElement.style.right = '0px';gui.domElement.style.width = '300px';//将gui和 几何体的位置绑定//将对应的属性x重命名gui.add(mesh.position, 'x', 0, 100).name('几何体x轴').onChange((value) => {console.log('x', value)//改变x时，进行其它的操作mesh.position.y = 50})//设置交互界面每次改变属性值间隔是多少gui.add(mesh.position, 'y', 0, 100).step(0.1)//设置交互界面 生成交互界面是下拉菜单,设置为数组// gui.add(mesh.position,'z',[-100,0,100]).name("Z轴")gui.add(mesh.position, 'z', { 'left': -100, 'center': 0, 'right': 100 }).name("Z轴")//设置交互页面 单选框  当变量的类型为布尔类型时，才会生成单选框gui.add(meshObjx, 'bool').name("是否开启x轴旋转")gui.add(meshObjy, 'bool').name("是否开启y轴旋转")gui.add(meshObjz, 'bool').name("是否开启z轴旋转")//改变颜色gui.addColor({ color: 0x00ffff }, 'color').onChange((value) => {//value是十进制，需要转换成十六进制bgColor.value = '#' + value.toString(16);mesh.material.color.set(value)})setImg();
}const imgArr = reactive({ img: "" })
let texture = reactive("");
//更换模型图片
const setImg = () => {//.load()方法加载图像，返回一个纹理对象Textureconst girlTexture = texLoader.load('./girl.png');const goalTexture = texLoader.load('./goal.png');//切换模型上图片gui.add(imgArr, 'img', { '可爱': 1, '目标': 2 }).name('模型图片').onChange((value) => {//遍历mesh下所有的对象mesh.traverse((child) => {if (child instanceof THREE.Mesh) {if ([1, 2].includes(value)) {switch (value) {case 1:texture = girlTexturebreak;case 2:texture = goalTexturebreak;default:break;}//给模型进行贴图// 设置阵列模式texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;// uv两个方向纹理重复数量 2*2 = 4个图片 自动将图片按照制定的数量平铺texture.repeat.set(2, 2);//注意选择合适的阵列数量//纹理U方向偏移 将图片进行偏移texture.offset.x += 0.5;child.material.map = texture;//THREE.SingleSide 单面，THREE.DoubleSide 双面  默认是双面贴图console.log(THREE.DoubleSide)child.material.side = THREE.SingleSide//开启透明child.material.transparent = false//更新模型child.material.needsUpdate = true;}}})})
}
//渲染
const render = () => {texture?texture.offset.x += 0.01:null;renderer.render(scene, camera); //执行渲染操作meshObjx.bool ? mesh.rotateX(0.01) : null;//每次绕y轴旋转0.01弧度meshObjy.bool ? mesh.rotateY(0.01) : null;//每次绕y轴旋转0.01弧度meshObjz.bool ? mesh.rotateZ(0.01) : null;//每次绕y轴旋转0.01弧度//重复渲染requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}</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%;background: yellow;}
}
</style>

三、注意事项

       1、在vue框架的基础上，一定要注意加载图片存放的路径。默认的当前文件夹是.public,不是src。

        2、一定要设置模型的.needUpdate 为true，重新对3d几何体进行渲染；否则容易出现gui切换了图片，但是3d几何体上图片未做任何的切换的问题。

如果你认为该文章对你有帮助，伸出您的小手，帮忙【点赞】+【关注】+【收藏】。