基于ThreeJS为3D模型添加贴图

示例描述与操作指南

当前示例用于展示如何在三维立体构件六个面上添加贴图。

示例效果展示

实现方式

添加贴图：在模型的多个面上添加材质图片

// 改变材质种类
const changeMaterial = () => {
  // 实例化一个加载器loader
  const loader = new THREE.TextureLoader();

// 加载一张材质图片
  loader.load(
    // 'floors/FloorsCheckerboard_S_Diffuse.jpg',   // 本地路径的图片
    'http://renyuan.bos.xyz/FloorsCheckerboard_S_Diffuse.jpg', // 远程图片的地址
    // 加载完贴图后的回调函数
    function (texture) {
      // 当材质加载完成之后，我们创建一个新的mesh对象，为这个对象创建几何和材质，为材质附上一张贴图
      const material = new THREE.MeshLambertMaterial({
        map: texture // 将材质的map属性设置为加载的图片
      });
      const geometry = new THREE.BoxGeometry(100, 100, 100);  // 一个正方体几何体，长宽高都为100
      const cube = new THREE.Mesh(geometry, material);  // 创建这个mesh对象

      // cube.position.set(-120,60,60); // 为这个新建的几何体设置一个位置，设置在场景内正方体的旁边
      cube.position.copy(vizbim.components[componentid].position); // 为这个新建的几何体设置一个位置，设置在场景内正方体的旁边
      cube.position.x -= 200;
      cube.position.z += 50;

      vizbim.scene.add(cube); // 将新创建的带贴图的几何体添加到场景内，我们就可以看到了
    },

    // 目前不支持加载贴图过程中的回调函数
    undefined,

    // 加载出错时候的回调函数
    function (err) {
      console.error('An error happened.');
    }
  );
}

下载完整代码