three.js - 在 THREE.Js 的场景中添加同一导入模型的多个副本

Question

我已将 3D 模型导入到我一直在处理的 THREE.Js 项目中，并且我想将它们的多个副本添加到场景中。这是我用来复制它的代码:

let ball = new THREE.Mesh();
loader.load( './ball.gltf', function ( gltf ) {
    gltf.scene.traverse(function(model) { //for gltf shadows!
        if (model.isMesh) {
          model.castShadow = true;
          model.material = sphereMaterial;
        }
    });
    ball = gltf.scene;
    scene.add( ball );
}, undefined, function ( error ) {
    console.error( error );
} );

const ball2 = ball.clone()
ball2.position.set(0.5, 0.5, 0.5)
scene.add(ball2)

但是，在 loader.load() 调用中，场景中只显示了一个“球”。有谁知道我应该采取什么不同的措施才能成功复制模型？

Answer 1

您的 onLoad() 处理程序 (function ( gltf ) {...}) 是异步的，克隆 ball 的代码 ( const ball2 = ball.clone()) 在使用 GLTF 数据初始化 ball 之前执行。因此，在 ball.clone() 执行时，ball 只是您在加载 GLTF 之前创建的空 Mesh，并且该空 >Mesh 是被克隆的内容。

我怀疑您在某些时候遇到了与在未定义上读取 clone 相关的控制台错误，这就是为什么您添加了将 ball 初始化为空的行网格，这是不必要的。

有几种方法可以处理这个问题，但最简单的是将克隆 ball 的代码移动到 onLoad 处理程序中(即 ，在 scene.add( ball ) 之后)。

概念证明 here .