在 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()) 的代码在 ball 初始化之前执行GLTF 数据。因此，在 ball.clone() 执行时，ball 只是您在加载 GLTF 之前创建的空 Mesh，而空 Mesh 就是被克隆的内容。

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

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

之后

概念验证 here。

在 THREE.Js 的场景中添加多个相同导入模型的副本

Add several copies of the same imported model in a scene in THREE.Js

duplicates

three.js

gltf