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

完整代码点这里
考虑一种场景: 现在有一个厂房,里面有很多机器,而这些机器是一样的。那我们难道要将同一个模型加载多次吗?很明显,效率太低,不能这么做。
是不是想到克隆了呢?要不加载一次模型,然后需要多少个就克隆多少个?
克隆看这里
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);
    }

喔,amazing,可以了耶~
在这里插入图片描述

发布了7 篇原创文章 · 获赞 0 · 访问量 110
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览