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

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

1
2
3
4
5
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

1
2
3
4
5
6
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

1
2
3
4
5
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

1
2
3
4
5
6
7
8
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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(bufferGeometry, material);
scene.add(mesh)