web-dev-qa-db-ja.com

Three.jsでobject3dを複製する方法は？

ローダーでロードされたモデルのクローンを作成したいのですが、githubに this issue が見つかりましたが、ソリューションが機能しません。 Object3Dの構造が変更されたようです。

現在の安定バージョンのThree.jsでObject3Dを複製するにはどうすればよいですか？

webglthree.js
15
CarlLee

この新しいバージョンの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を使用しました。

27
Alin Ciocan

実際には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ではなくメッシュのクローンを作成します。

9
EliSherer

1つの高速なソリューションを見つけました（最も効率的ではありません）

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);

  });

}
0
ehopperdietzel