Séparez chaque face de la géométrie Icosaèdre par un espace vide autour de lui en utilisant trois.js

Question

Je veux séparer chaque face de l'icosaèdre comme indiqué sur l'image ci-dessus. Est-ce que n'importe qui peut m'indiquer l'exemple apparenté ou n'importe quelle idée de le faire fonctionner. Dans mon exemple icosaèdre chaque visage a la texture différente d'image en tant que matériel ainsi je ne peux pas employer le matériel de Shadermaterial.

Merci

Answer 1

Vous pouvez utiliser ExplodeModifier pour convertir la géométrie en soi-disant « soupe de triangle », puis traduire les sommets que vous le souhaitez.

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 doit être explicitement incluse dans votre projet.

Three.js R.87