如何在 THREE.JS 上创建自定义网格？

Question

我问过这个并得到了答案：

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

我预计这会起作用，但没有。

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

更新：不推荐使用THREE.Geometry和THREE.Face3 ：推荐使用THREE.BufferGeometry 。

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

简而言之，与提供顶点位置和具有 3 个顶点索引的 Face3 对象相反，现在您将使用x1, y1, z1, x2, y2, z2, ..., xn, yn, zn顺序（每 3 x ,y,z 三元组以定义面）。

此外，还可以计算并提供顶点颜色和法线。 有很多three.js示例可以开始，包括：

• webgl_buffergeometry
• webgl_buffergeometry_indexed

Answer 2

您可以自动进行三角测量

对于大多边形，手动添加面可能是一项艰巨的工作。 您可以使用THREE.ShapeUtils的triangulateShape方法自动执行向网格添加面的过程，如下所示：

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可以定义你的多边形孔。

注意：小心，如果你的多边形是自相交的，它会抛出一个错误。 确保您的顶点数组表示有效（非相交）多边形。

Answer 3

THREE.Vertex 在 Three.js 的最新版本中已被弃用，因此不再需要该部分：

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