Separate each face of Icosahedron geometry by some empty space around it using three.js

Question

I want to separate each face of icosahedron as shown in above image. Can anybody point me to related example or any idea about making it work.In my example icosahedron each face has different image texture as a material so i cannot use Shadermaterial.

Thanks

Perhaps https://threejs.org/examples/?q=mod#webgl_modifier_tessellation — Radio, Sep 26 '17 at 04:43
Thanks, does tessellation work on image texture phone material type mesh? — GAURANG KORANT, Sep 26 '17 at 06:42

score 2 · Accepted Answer · answered Sep 26 '17 at 08:29

You can use ExplodeModifier to convert your geometry into so-called "triangle soup", and then translate the vertices as you wish.

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 must be explicitly included in your project.

three.js r.87

Thansk.It worked.can you suggest any reference book or site for learning basic things. — GAURANG KORANT, Sep 26 '17 at 09:18
https://stackoverflow.com/questions/11966779/learning-webgl-and-three-js/11970687#11970687 — WestLangley, Sep 26 '17 at 19:39

Separate each face of Icosahedron geometry by some empty space around it using three.js

1 Answers1