如何将three.js网格合并为一个网格？

Question

是否有可能在Three.js中合并两个或多个网格,使用不同的材质？

我找到的解决方案,仅合并几何,或者只是将网格放入一个 Object3D或Group.

Answer 1

是的:亲切(见问题所附的评论和这个答案的帖子):

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

我选择了一个立方体和一个球体,因为例如一个盒子想要知道每个面部的材质ID.

http://jsfiddle.net/L0rdzbej/16/