使用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