Comment créer un maillage personnalisé sur THREE.JS ?

Question

J'ai posé la question et obtenu la réponse :

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);

Je m'attendais à ce que ça marche mais ça n'a pas marché.

Answer 1

Vous avez ajouté des sommets, mais vous avez oublié de mettre ces sommets dans une face et de l'ajouter à la géométrie :

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );

pour que votre extrait devienne :

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);

L'idée est qu'une instance Face3 fait référence à 3 sommets (les coordonnées x, y, z que vous avez ajoutées précédemment à la géométrie) en utilisant les indices des sommets dans la liste/le tableau. Actuellement, vous n'avez que 3 sommets et vous voulez les connecter, donc votre face fait référence aux indices 0, 1 et 2 dans le tableau des sommets.

Puisque vous utilisez un matériau de normales de maillage, vous pourriez vouloir calculer les normales pour la géométrie. Vérifiez également que votre objet est visible (il n'est pas trop grand ou trop proche de la caméra pour être coupé, il est orienté dans la bonne direction - vers la caméra, etc.) Puisque vous dessinez dans le plan YZ, pour voir votre triangle, quelque chose comme ceci devrait fonctionner :

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

object.position.z = -100;//move a bit back - size of 500 is a bit big
object.rotation.y = -Math.PI * .5;//triangle is pointing in depth, rotate it -90 degrees on Y

scene.add(object);

Mise à jour : THREE.Geometry y THREE.Face3 sont dépréciés : THREE.BufferGeometry est recommandé à la place.

const geometry = new THREE.BufferGeometry();

const positions = [
0,   0, 0,    // v1
0, 500, 0,   // v2
0, 500, 500  // v3
];

geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.computeVertexNormals();

const object = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
scene.add(object);

En bref, au lieu de fournir des positions de vertex et des objets Face3 avec 3 indices de vertex, vous utiliseriez maintenant un tableau plat en x1, y1, z1, x2, y2, z2, ..., xn, yn, zn ordre (tous les 3 triplets x,y,z dans l'ordre définissent une face).

En outre, il est possible de calculer et de fournir les couleurs et les normales des sommets. Il y a beaucoup d'exemples de trois.js pour commencer, y compris :

• webgl_buffergeometry
• webgl_buffergeometry_indexed

Answer 2

Vous pouvez automatiser votre triangulation

Pour les grands polygones, l'ajout manuel des faces peut représenter un travail considérable. Vous pouvez automatiser le processus d'ajout de faces au maillage à l'aide de la fonction le site triangulateShape méthode dans THREE.ShapeUtils comme ça :

var vertices = [your vertices array];
var holes = [];
var triangles, mesh;
var geometry = new THREE.Geometry();
var material = new THREE.MeshBasicMaterial();

geometry.vertices = vertices;

triangles = THREE.ShapeUtils.triangulateShape( vertices, holes );

for( var i = 0; i < triangles.length; i++ ){

    geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));

}

mesh = new THREE.Mesh( geometry, material );

Où vertices est votre tableau de sommets et avec holes vous pouvez définir des trous dans votre polygone.

Note : Attention, si votre polygone s'intersecte lui-même, une erreur se produira. Assurez-vous que votre tableau de sommets représente un polygone valide (sans intersection).

Answer 3

THREE.Vertex a été déprécié dans la dernière version de Three.js, cette partie n'est donc plus nécessaire :

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);