Is it possible in Three.js to merge two or more meshes, with different materials?

The solutions I've found, merges geometry only, or just puts the Meshes into one Object3D or Group.

Is it possible in Three.js to merge two or more meshes, with different materials?

The solutions I've found, merges geometry only, or just puts the Meshes into one Object3D or Group.

• javascript
• three.js

• Best way to get help is to post code you have so far. – Mladen Oršolić Commented Aug 11, 2015 at 13:26
• 1 @gaitat is correct. The renderer just splits the mesh apart again to render it. three.js r.71 – WestLangley Commented Aug 11, 2015 at 15:46
• Then why is the rendering much faster, if I merge everything in the 3D editor, before exporting it? – Iter Ator Commented Aug 11, 2015 at 18:30

1 Answer 1

Yes: Kind-of (see the ments attached to the question and this answer post):

var blueMaterial = new THREE.MeshPhongMaterial( {color: 0x0000FF } );
var redMaterial = new THREE.MeshPhongMaterial({ color:0xFF0000 });
var meshFaceMaterial = new THREE.MeshFaceMaterial( [ blueMaterial, redMaterial ] );

var boxGeometry = new THREE.BoxGeometry( 10, 10, 10 );

for ( var face in boxGeometry.faces ) {
    boxGeometry.faces[ face ].materialIndex = 0;
}

var sphereGeometry = new THREE.SphereGeometry( 5, 16, 16 );
sphereGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, 5, 0) );

var mergeGeometry = new THREE.Geometry();
mergeGeometry.merge( boxGeometry, boxGeometry.matrix );
mergeGeometry.merge( sphereGeometry, sphereGeometry.matrix, 1 );

var mesh = new THREE.Mesh( mergeGeometry, meshFaceMaterial );
scene.add( mesh );

I went with a cube and a sphere because a box for example wants to know a material id for each of its faces.

http://jsfiddle/v49ntxfo/