使用three.js將二十面體幾何體的每個面分開一些空的空間

Question

我想要分離二十面體的每個面，如上圖所示。任何人都可以指向我的相關示例或關於使其工作的任何想法。在我的例子中，二十面體每個面都具有不同的圖像紋理作爲材質，所以我不能使用Shadermaterial。

感謝

Answer 1

您可以使用ExplodeModifier你的幾何圖形轉換成所謂的「三角湯」，然後，你想轉換的頂點。

var geometry = new THREE.IcosahedronGeometry(4, 2); 

var modifier = new THREE.ExplodeModifier(); 
modifier.modify(geometry); 

var normal = new THREE.Vector3(); 

for (var i = 0, l = geometry.faces.length; i < l; i ++) { 

    var face = geometry.faces[ i ]; 

    normal.copy(face.normal).multiplyScalar(1); 

    geometry.vertices[ face.a ].add(normal); 
    geometry.vertices[ face.b ].add(normal); 
    geometry.vertices[ face.c ].add(normal); 

}; 

examples/js/modifiers/ExplodeModifier.js必須明確包含在您的項目中。

three.js所r.87