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.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几何体上图片未做任何的切换的问题。

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