您已经添加了顶点,但忘记将这些顶点放入面中并将其添加到几何体中:
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示例可以开始,包括: