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 its 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
const geometry = new THREE.Geometry()
geometry.vertices.push(new THREE.Vector3(-5, 0, 0))
geometry.vertices.push(new THREE.Vector3(5, 0, 0))
const 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.attributes.position as THREE.BufferAttribute).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.attributes.position as THREE.BufferAttribute).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)
Examples
Modify a position attribute
This example demonstrates modifying one of the values in the geometries attributes.position.array. The modified value affects the X coordinate of the second point that was added to the tetrahedron.
Twisted Cube
By iterating through all position attributes, you can apply a rotation and create a twisted cube.