如何在 Three.js 中克隆 object3d？答案

【问题标题】：How to clone an object3d in Three.js?如何在 Three.js 中克隆 object3d？
【发布时间】：2012-08-08 19:40:47
【问题描述】：

我想克隆一个加载了loader的模型，我在github上找到了this issue，但是解决方案不起作用。 Object3D 似乎发生了结构变化。

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

【问题讨论】：

【解决方案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。

【讨论】：

这行得通，但是每当更改其中一个克隆的 object3d 的材质属性时，所有其余部分都会受到影响！
为了避免在所有克隆的 object3d 之间共享材质，只需按如下方式遍历它： if (child instanceof THREE.Mesh) { child.material = child.material.clone(); }

【解决方案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 );
}

您想要克隆一个 Mesh 而不是 Object3D，因为加载器的输出是一个 Mesh。

【讨论】：

我发布了一个单独但类似的问题here，因为它们相关但也不同。希望你能帮忙。
这引用了相同的网格；即，如果您扭曲几何中顶点的位置，则两个网格都会受到影响
允许自己改变一个几何体而不影响另一个，只需在网格构造函数中使用loadedMesh.geometry.clone()...

【解决方案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);

  });

}

【讨论】：