How to create a custom mesh on THREE.JS?

by

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 three.js triangles example

webgl_buffergeometry_indexed three.js subdivided plane example

More Related Contents:

  1. “Cross origin requests are only supported for HTTP.” error when loading a local file
  2. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  3. How to Fit Camera to Object
  4. THREE.js generate UV coordinate
  5. Three.js – Orthographic camera
  6. Drawing a line with three.js dynamically
  7. How to rotate a 3D object on axis three.js?
  8. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  9. Thickness of lines using THREE.LineBasicMaterial
  10. Using textures in THREE.js
  11. How to stop a requestAnimationFrame recursion/loop?
  12. Three JS – Find all points where a mesh intersects a plane
  13. Three.js / WebGL – transparent planes hiding other planes behind them
  14. Is it possible to enable unbounded number of renderers in THREE.js?
  15. Rendering a transparent shell
  16. Any way to get a bounding box from a three.js Object3D?
  17. Three.js Projector and Ray objects
  18. How to detect collision in three.js?
  19. Three JS Pivot point
  20. Convert 2:1 equirectangular panorama to cube map
  21. three.js transparent object occlusion
  22. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  23. Antialiasing not working in Three.js
  24. Detect clicked object in THREE.js
  25. Determine if a mesh is visible on the viewport according to current camera
  26. How to render clipped surfaces as solid objects
  27. Threejs: assign different colors to each vertex in a geometry
  28. Three.js multiple materials on object loaded via OBJMTLLoader
  29. Switch threejs controls ( from TrackBall to FlyControls and vice versa)
  30. Apply color gradient to material on mesh – three.js

Leave a Comment