web-dev-qa-db-fra.com

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

J'ai posé cette question et j'ai 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 cela fonctionne, mais cela n'a pas fonctionné.

javascriptthree.js
47
MaiaVictor

Vous avez ajouté des sommets, mais vous avez oublié de mettre ces sommets dans une face et de les 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 occurrence de Face3 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/tableau. Actuellement, vous n'avez que 3 sommets et vous souhaitez les connecter, donc votre face référence les index 0,1 et 2 dans le tableau des sommets.

Puisque vous utilisez un matériau de normales de maillage, vous souhaiterez peut-être calculer des normales pour la géométrie. Assurez-vous également que votre objet peut être visible (n'est pas trop grand ou trop proche de la caméra pour être coupé, 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 ça 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);
68
George Profenza

Vous pouvez automatiser votre triangulation

Pour les gros polygones, il peut être très difficile d'ajouter manuellement les faces. Vous pouvez automatiser le processus d'ajout de faces au maillage à l'aide de la méthode triangulateShape dans THREE.ShapeUtils comme ceci:

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.

Remarque: Attention, si votre polygone se coupe automatiquement, il générera une erreur. Assurez-vous que votre tableau de sommets représente un polygone valide (sans intersection).

25
Wilt

THREE.Vertex est obsolète dans la dernière version de Three.js, de sorte qu'une partie n'est plus nécessaire:

geom.vertices.Push(v1);
geom.vertices.Push(v2);
geom.vertices.Push(v3);
10
BishopZ