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

I've asked this and got the answer:

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

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

I expected this to work but it didn't.

我希望这可行，但事实并非如此。

3 个解决方案

#1

You've added vertices, but forgot to put those vertices into a face and add that to the geometry:

您已添加顶点，但忘记将这些顶点放入面中并将其添加到几何体中：

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

so your snippet becomes:

所以你的片段变成了：

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

The idea is that a Face3 instance references 3 vertices(the x,y,z coords you've added previously to the geometry) by using the indices of the vertices in the list/array. Currently you only have 3 vertices and you want to connect them,so your face references index 0,1 and 2 in the vertices array.

我们的想法是，Face3实例通过使用列表/数组中顶点的索引来引用3个顶点（先前添加到几何体中的x，y，z坐标）。目前，您只有3个顶点并且想要连接它们，因此您的面引用顶点数组中的索引0,1和2。

Since you're using a mesh normals material, you might want to compute normals for the geometry. Also, make sure your object can be visible (is not to big or to close to the camera to be clipped out, is facing the right direction - towards the camera, etc.) Since you're drawing in the YZ plane, to see your triangle, something like this should work:

由于您使用的是网格法线材质，因此您可能需要计算几何体的法线。此外，请确保您的物体可见（不要太大或靠近要剪裁的相机，朝向正确的方向 - 朝向相机等）因为您正在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

You can automate your triangulation

For big polygons it can be quite a job to manually add the faces. You can automate the process of adding faces to the mesh using the triangulateShape method in THREE.ShapeUtils like this:

对于大多边形，手动添加面可能非常重要。您可以使用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 );

Where vertices is your array of vertices and with holes you can define holes in your polygon.

如果顶点是顶点数组并且带有孔，则可以在多边形中定义孔。

Note: Be careful, if your polygon is self intersecting it will throw an error. Make sure your vertices array is representing a valid (non intersecting) polygon.

注意：注意，如果多边形是自相交的，它将引发错误。确保顶点数组表示有效（非相交）多边形。

#3

THREE.Vertex has been deprecated in the newest version of Three.js so that part is not needed anymore:

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

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