three.js同时使用相同建模时通过clone来克隆建模

虾我一大条

已于 2024-02-21 15:03:31 修改

阅读量646

点赞数 13

文章标签：前端 javascript 开发语言

于 2024-02-21 15:02:23 首次发布

本文链接：https://blog.csdn.net/weixin_69533807/article/details/136212055

版权

文章介绍了如何在Three.js中使用LoadingManager、MTLLoader和OBJLoader异步加载3D模型，并演示了关键的模型克隆代码，以便减少加载次数并管理3D对象的命名和属性。

摘要由CSDN通过智能技术生成

        let loadObjmore = new THREE.Object3D();
        let loadingManager = new THREE.LoadingManager();
        let mtlLoaderMiddleTen = new MTLLoader();
        let loaderMiddleTen = new OBJLoader(loadingManager);
mtlLoaderMiddleTen.load('/static/服务器(3).mtl', (materials) => {
              materials.preload();
              loaderMiddleTen.setMaterials(materials);
              // 加载 OBJ 模型
              loaderMiddleTen.load('/static/服务器(3).obj', (object) => {
                  for (let z = 0; z < 5; z++) {
                    const clonedObject = object.clone(); //最重要的一个复制相同的建模，这样子就刻意少加载
                    // 加载成功后，你可以在这里对模型进行操作
                    clonedObject.position.set(-0.2, (z + 1) * 2, -1); // 将模型放置在(10, , )的位置
                    clonedObject.traverse((child) => {
                      console.log('123123', child)
                      if (child instanceof THREE.Mesh) {
                        child.name = '机柜' +z //命名需要不重复唯一，这样子就不会出现拆分的时候拆不了的问题
                        child.userData = {
                          names: '服务器',
                          value: z,
                          params: 222,
                          totalRobte: 112,
                          x:-0.2,
                          y:(z + 1) * 2,
                          z:-1
                          // colors: child.material.clone(object) //用来恢复高亮恢复原来材质
                        };

                      }
                      //写入模型
                      if (child.isMesh && child.material) {
                        modelMaterialList.push(child)
                        that.glowMaterialList = modelMaterialList.map(v=>v.name)
                      }
                    });
                    // scene.add(object);
                    loadObjmore.add(clonedObject); // 将模型添加到容器中
                  }

                },
                // (xhr) => {
                //   console.log(`${modelInfo.name} 已加载: ${Math.floor((xhr.loaded / xhr.total) * 100)}%`);
                // },
                // (error) => {
                //   console.error(`加载 ${modelInfo.name} 时发生错误：${error}`);
                // }
              );
            },
            // (xhr) => {
            //   console.log(`加载 ${modelInfo.name} 的材质: ${Math.floor((xhr.loaded / xhr.total) * 100)}%`);
            // },
            // (error) => {
            //   console.error(`加载 ${modelInfo.name} 的材质时发生错误：${error}`);
            // }
          );