When adding vertices, it's important to connect them in a face and add that to the geometry for proper rendering:
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
Here is an example of how to do this correctly:
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 Face3 instance links 3 vertices together using their indices. Make sure your object is properly positioned and oriented for visibility.
If you are using a mesh normals material, consider computing normals for the geometry as well. Here's a snippet to help with that:
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;
object.rotation.y = -Math.PI * .5;
scene.add(object);
Note: THREE.Geometry
and THREE.Face3
are deprecated. It is recommended to use THREE.BufferGeometry
instead.
const geometry = new THREE.BufferGeometry();
const positions = [
0, 0, 0,
0, 500, 0,
0, 500, 500
];
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.computeVertexNormals();
const object = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
scene.add(object);
In summary, use a flat array to define vertex positions in a BufferGeometry, along with providing vertex colors and normals if needed. For more examples and guidance, check out the provided links.
https://i.sstatic.net/HW51d.jpg
https://i.sstatic.net/w1U2x.jpg