如何在Three.js中克隆object3d？

Question

我想克隆一个加载了加载器的模型，我在github上找到了this issue，但解决方案不起作用。看起来Object3D已经发生了结构性的变化。

如何在当前稳定版本的Three.js中克隆Object3D？

Answer 1

在这个新版本的three.js中，您有一个方法clone。

例如，我使用国际象棋中的皇后，我不得不重复多次：

// queen is a mesh
var newQueen = queen.clone();

// make sure to re position to be able to see the new queen!
newQueen.position.set(100,100,100); // or any other coordinates

它可以与任何网格一起工作。

我用了three.js r61。

Answer 2

实际上mrdoob的答案就是你的答案。

加载器将输出用于创建网格的几何体。您需要使用加载器创建的网格的几何体和材质创建一个新网格。

for ( var i = 0; i < 10; i ++ ) {
    var mesh = new THREE.Mesh( loadedMesh.geometry, loadedMesh.material );
    mesh.position.set( i * 100, 0, 0 );
    scene.add( mesh );
}

您希望克隆网格而不是Object3D，因为加载器的输出是网格。

Answer 3

我找到了一个快速的解决方案(不是最有效的)

GLTFLoader在内部使用THREE.FileLoader()方法，该方法允许您缓存文件。

为此，您需要在创建GLTFLoader实例之前添加此行

THREE.Cache.enabled = true;

然后，您可以多次加载同一模型，但仅第一次加载将花费更长的时间，例如：

THREE.Cache.enabled = true;

var loader = new GLTFLoader();

var deeplyClonedModels = [];

for( var i = 0; i < 10; i++ ){

   loader.load('foo.gltf', function ( gltf ) {

     deeplyClonedModels.push(gltf.scene);

  });

}