three 实现多个相同模型的加载

最新推荐文章于 2025-02-05 17:50:38 发布

xx_ling

最新推荐文章于 2025-02-05 17:50:38 发布

阅读量6.4k

点赞数 13

分类专栏： Three 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_38008116/article/details/105111361

版权

Three 专栏收录该内容

8 篇文章

订阅专栏

完整代码点这里
考虑一种场景：现在有一个厂房，里面有很多机器，而这些机器是一样的。那我们难道要将同一个模型加载多次吗？很明显，效率太低，不能这么做。
是不是想到克隆了呢？要不加载一次模型，然后需要多少个就克隆多少个？
克隆看这里
ok，现在就开始搞。
（1）定义一个模型克隆函数

    cloneModel(obj, x, y, z, num) { //params: 模型， 坐标xyz，自定义数据
      const cloneObj = obj.clone();
      
      cloneObj.$data = {
        name: '亚托克斯 ' + num + '号'
      }
      cloneObj.position.set(x, y, z);
      this.group.add(cloneObj);
      /**增加文字标签 */
      const sprite = this.createSprite(cloneObj.$data); //前面文章有讲,createSprite函数是自定义的，用于给模型增加文字标签
      sprite.position.set(x, y + 2, z);
      this.scene.add(sprite);
    }

运行程序，发现新的问题已经出现。。点击某一个模型实现让其变色，会发现其他的也变色了。。
在这里插入图片描述
思考问题来源，模型颜色改变是由于更改了材质materia的color，改变一个模型的material其他的material也变了，是不是因为共用了一个material呢？？
那我们把material也克隆一下试试。

（2）增加材质的克隆

    cloneModel(obj, x, y, z, num) { //params: 模型， 坐标xyz，自定义数据
      const cloneObj = obj.clone();
      cloneObj.children.map((v, i) => { //克隆材质
        if (v.material) {
          v.material = obj.children[i].material.clone();
        }
      });
      cloneObj.$data = {
        name: '亚托克斯 ' + num + '号'
      }
      cloneObj.position.set(x, y, z);
      this.group.add(cloneObj);
      /**增加文字标签 */
      const sprite = this.createSprite(cloneObj.$data);
      sprite.position.set(x, y + 2, z);
      this.scene.add(sprite);
    }