Search code examples
three.jsgeometryfacebuffer-geometry

What is the suggested alternative for the deprecated Face3?

I know THREE.Geometry was deprecated in favor of THREE.BufferGeometry(). However, there doesn't seem to be any clear information about how to implement what was once "Face3()". My understanding is that it was somehow related to the Geometry() object, but I'm not sure how because the documentation has been removed.

I'm trying to get some old example running that used Face3().

Could someone provide a simple translation from Face3() to its suggested newer alternative please?

Here's an example to work with:

const points = []
points.push(new THREE.Vector3(-5, 0, 0))
points.push(new THREE.Vector3(5, 0, 0))
points.push(new THREE.Vector3(0, 5, 0))
let geometry = new THREE.BufferGeometry().setFromPoints( points )
var face = new THREE.Face3(0, 1, 2); //Error: Face3 is not a constructor

I've tried reading through this thread but there doesn't seem to be any real information on Face3() here. Also, when I search the threejs.org documentaiton for "face", there are no relevant results.

Appreciate any help!

Solution

  • The change from THREE.Geometry to THREE.BufferGeometry gives three.js a similar representation of the mesh to what WebGL requires, allowing better performance without additional processing overhead. Each 'face' is specified as the indices of three vertices in the vertex list — not as an explicit JavaScript object for each face, which is expensive. An example constructing a new geometry would be:

    const geometry = new THREE.BufferGeometry();

// specify vertex positions
geometry.setAttribute( 'position', 
  new THREE.BufferAttribute( new Float32Array( [
    -5, 0, 0, // vertex 1
    5, 0, 0,  // vertex 2 
    0, 5, 0   // vertex 3
  ], 3 ) )
);

// specify triangles, as triplets of indexes into the vertex list.
geometry.setIndex( new THREE.BufferAttribute( [ 0, 1, 2 ], 1 ) );

    The index in the example above is optional. If omitted, each triplet of three vertices in the geometry will be considered a unique triangle. The index is needed when you want to share the same vertices among multiple triangles.

    See THREE.BufferGeometry documentation for more details.

    In some situations it may be useful to construct a THREE.Triangle to temporarily represent a particular face of the mesh. These are not part of the rendering process but may be useful for computations.

    const face = new THREE.Triangle()
  .setFromAttributeAndIndices( geometry.attributes.position, 0, 1, 2 );

const area = face.getArea();