Skip to content

Updating THREE.Geometry to THREE.BufferGeometry

Description

Three r125 contained a major breaking change from previous versions.

The class THREE.Geometry was deprecated, renamed to just Geometry and moved to /jsm/deprecated/Geometry.js.

If you used the THREE.Geometry in any of your custom code, and you want to use THREE r125 or later, then you will need to update to use THREE.BufferGeometry.

or add an import for /jsm/deprecated/Geometry.js

Since Three r125, all inbuilt geometries now derive from the THREE.BufferGeometry only. A BufferGeometry is a more efficient way of representing meshes since it stores the data as typed arrays. The classic THREE.Geometry stores it's data as arrays of THREE.Vector3 and THREE.Color objects. The classic THREE.Geometry is more intuitive to read and edit from a human perspective, but it is slower to process in the WebGL shader code within the core of Threejs. Beware that in future versions of Threejs, THREE.BufferGeometry may be renamed to THREE.Geometry.

The below examples show several use cases of THREE.Geometry and how you can update them to use THREE.BufferGeometry.

Create a Line

The below example creates a line with 2 points.

THREE.Geometry

let geometry = new THREE.Geometry()
geometry.vertices.push(new THREE.Vector3(-5, 0, 0))
geometry.vertices.push(new THREE.Vector3(5, 0, 0))
let line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x888888 }))
scene.add(line)

THREE.BufferGeometry

const points = []
points.push(new THREE.Vector3(-5, 0, 0))
points.push(new THREE.Vector3(5, 0, 0))
let geometry = new THREE.BufferGeometry().setFromPoints( points )
let line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x888888 }))
scene.add(line)

Explode Points

Modifying the vertices of a geometry by repositioning them outwards from the center by a factor of 2.

THREE.Geometry

const vertices = (geometry as THREE.Geometry).vertices
for (let i = 0; i < vertices.length; i++) {
    vertices[i].multiplyScalar(2)
}
(geometry as THREE.Geometry).verticesNeedUpdate = true

THREE.BufferGeometry

const positions = (geometry as THREE.BufferGeometry).attributes.position.array as Array<number>
for (let i = 0; i < positions.length; i += 3) {
    const v = new THREE.Vector3(positions[i], positions[i + 1], positions[i + 2]).multiplyScalar(2)
    positions[i] = v.x
    positions[i + 1] = v.y
    positions[i + 2] = v.z
}
(geometry as THREE.BufferGeometry).attributes.position.needsUpdate = true

Tetrahedron

Manually creating a tetrahedron, also known as a triangular pyramid.

THREE.Geometry

const material = new THREE.MeshNormalMaterial()
let geometry = new THREE.Geometry()
geometry.vertices.push(
    new THREE.Vector3(1, 1, 1),//a
    new THREE.Vector3(-1, -1, 1),//b
    new THREE.Vector3(-1, 1, -1),//c
    new THREE.Vector3(1, -1, -1)//d
)
geometry.faces.push(
    new THREE.Face3(2, 1, 0), 
    new THREE.Face3(0, 3, 2),
    new THREE.Face3(1, 3, 0), 
    new THREE.Face3(2, 3, 1)
)
geometry.computeFlatVertexNormals()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

THREE.BufferGeometry

const material = new THREE.MeshNormalMaterial()
let geometry = new THREE.BufferGeometry()
const points = [
    new THREE.Vector3(-1, 1, -1),//c
    new THREE.Vector3(-1, -1, 1),//b
    new THREE.Vector3(1, 1, 1),//a   

    new THREE.Vector3(1, 1, 1),//a    
    new THREE.Vector3(1, -1, -1),//d  
    new THREE.Vector3(-1, 1, -1),//c

    new THREE.Vector3(-1, -1, 1),//b
    new THREE.Vector3(1, -1, -1),//d  
    new THREE.Vector3(1, 1, 1),//a

    new THREE.Vector3(-1, 1, -1),//c
    new THREE.Vector3(1, -1, -1),//d    
    new THREE.Vector3(-1, -1, 1),//b
]

geometry.setFromPoints(points)
geometry.computeVertexNormals()

const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Example

Modifying the third value in the geometries attributes.position.array which happens to relate to the X coordinate of the second point that was added to the tetrahedron.