嗨，我是小路。今天主要和大家分享的主题是“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.01
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，渲染下一帧
}3.图片显示面
定义：一般几何体默认有两个面，一个是正面，一个是背面。当图片切换成矩形平面时，这种效果更为明显。具体的效果，可看详情图。
child.material.side = THREE.SingleSide二、实例代码
1、封装代码
const imgArr = reactive({ img: "" })
let texture = reactive("");
//更换模型图片
const setImg = () => {
//.load()方法加载图像，返回一个纹理对象Texture
const 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 = girlTexture
break;
case 2:
texture = goalTexture
break;
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()方法加载图像，返回一个纹理对象Texture
const 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 = girlTexture
break;
case 2:
texture = goalTexture
break;
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几何体上图片未做任何的切换的问题。
如果你认为该文章对你有帮助，伸出您的小手，帮忙【点赞】+【关注】+【收藏】。
