如何在 THREE.JS 上创建自定义网格? [英] How to create a custom mesh on THREE.JS?

问题描述

我已经问过这个问题并得到了答案:

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());场景.addObject(对象)；

我希望这会奏效，但没有.

解决方案

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

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());场景.addObject(对象)；

这个想法是，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;//后移一点——500的大小有点大object.rotation.y = -Math.PI * .5;//三角形指向深度，在Y方向旋转-90度场景添加(对象)；

更新: THREE.Geometry 和 THREE.Face3 已弃用:

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.

解决方案

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.

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:

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

Update: THREE.Geometry and THREE.Face3 are deprecated: THREE.BufferGeometry is recommended instead.

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

In short, as opposed to providing vertex positions and Face3 objects with 3 vertex indices now you would use a flat array in x1, y1, z1, x2, y2, z2, ..., xn, yn, zn order (every 3 x,y,z triplets in order define a face).

Additionally, it's possible to compute and provide vertex colours and normals. There are plenty of three.js example to start with, including:

• webgl_buffergeometry
• webgl_buffergeometry_indexed

这篇关于如何在 THREE.JS 上创建自定义网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！