How to clone an object3d in Three.js?

Question

I want to clone a model loaded with loader, I found this issue on github,but the solution doesn\'t work. It seems there has been an structural change in Object3D.

Ho

Answer 1

In this new version of three.js you have a method clone.

For example, I use a queen from chess and I had to duplicate multiple times:

// 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

It will work with any mesh.

I used three.js r61.

Answer 2

I found one fast solution (not the most efficient)

The GLTFLoader uses the THREE.FileLoader() method internally, which allows you to cache files.
To do so, you need to add this line before you create an instance of the GLTFLoader

THREE.Cache.enabled = true;

Then you can load multiple times the same model, but only the first time will take longer, for example:

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

  });

}

Answer 3

Actually mrdoob's answer is your answer...

The loader output a geometry you use to create a mesh. You need to create a new mesh with the loader-created mesh's geometry and material.

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

You want to clone a Mesh and not an Object3D because the output of the loader is a Mesh.