Как создать пользовательскую сетку на THREE.JS?

Ответ 1

Вы добавили вершины, но забыли положить эти вершины в лицо и добавить это к геометрии:

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

поэтому ваш фрагмент будет выглядеть следующим образом:

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);

Идея состоит в том, что экземпляр Face3 ссылается на 3 вершины (координаты x, y, z, которые вы добавили ранее в геометрию), используя индексы вершин в списке/массиве. В настоящее время у вас есть только 3 вершины, и вы хотите их соединить, поэтому ваши грани ссылаются на индекс 0,1 и 2 в массиве вершин.

Поскольку вы используете материал нормалей сетки, вам может потребоваться вычислить нормали для геометрии. Кроме того, убедитесь, что ваш объект может быть виден (не большой или близко к снимаемой камере, обращен в правильном направлении - к камере и т.д.), Поскольку вы рисуете на плоскости YZ, чтобы увидеть ваш треугольник, что-то вроде этого должно работать:

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);

Ответ 2

Вы можете автоматизировать триангуляцию

Для больших полигонов может быть довольно сложной задача вручную добавить грани. Вы можете автоматизировать процесс добавления граней в сетку с помощью метода triangulateShape в THREE.ShapeUtils следующим образом:

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 );

Где vertices - ваш массив вершин и holes вы можете определить дыры в вашем полигоне.

Примечание. Будьте осторожны, если ваш многоугольник самопересекается, он выдает ошибку. Убедитесь, что ваш массив вершин представляет допустимый (непересекающийся) многоугольник.

Ответ 3

THREE.Vertex устарел в новейшей версии Three.js, так что часть больше не нужна:

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