ThreeJS new mesh vs clone

Question

I'm wondering which style is more effective creating a new mesh or cloning one.

For example I have a loop that creates multiple times the "same mesh". But I also noticed that if I have an opacity of the mesh set as 0 and I want to change it later to be visible, this would effect all the meshes that have the same material. Could it be because they have the same uuid.

var material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    transparent: true,  // Make the material transparent
    opacity: 0          // Set material opacity to 0
});

var geometry = new THREE.PlaneGeometry(width, height);

$.each(things, function(i, something) {
    var mesh = new THREE.Mesh(geometry, material);
    // Mesh positioning
    scene.add(mesh);
});

So if I use the same material and geometry multiple times and use the raycaster to change the mesh opacity it would change the opacity of all the meshes.

Should I use the clone inside the each loop or create the material and the geometry of the mesh again and again?

$.each(things, function(i, something) {
    var mesh = new THREE.Mesh(geometry.clone(), material.clone());
    // Mesh positioning
    scene.add(mesh);
});

or

$.each(things, function(i, something) {
    var material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        transparent: true,  // Make the material transparent
        opacity: 0          // Set material opacity to 0
     });

     var geometry = new THREE.PlaneGeometry(width, height);
     var mesh = new THREE.Mesh(geometry, material);
     // Mesh postioning here
     scene.add(mesh);
});

You can share both the geometry and the material and just set mesh.visible = false. There is no need to clone anything in that case. — WestLangley

HariV HariV · Accepted Answer · 2018-01-17T08:07:42

In your first method all the meshes are built up on the SAME GEOMETRY and MATERIAL(As you said they also have the same uuid). So when you change the properties of the material it will affect all the meshes which are using the same material. But when you clone the material, it will create a NEW MATERIAL WITH THE SAME PROPERTIES, and also changes on the original material will not affect the cloned material. So most probably this method will work for you,

$.each(things, function(i, something) {
    var mesh = new THREE.Mesh(geometry, material.clone());
    // rest of your code...
});

I tried the following and it worked for me,

var material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    transparent: true,
    opacity: 0.5
});
var geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
for( var i = 0; i < 5; i++ ){

    scene.add( new THREE.Mesh( geometry, material.clone() ) );

}

ThreeJS new mesh vs clone

1 Answers