breaking: update three to 0.139. This doesn't break LUME APIs, but …

…any code relying on `element.three` to use Three.js objects directly may break, especially code that relies on `Geometry` APIs because the `Geometry` class was removed and all geometries that previously extended from `Geometry` now extend from `BufferGeometry`.

package.json

@@ -98,13 +98,14 @@
 		"lowclass": "^5.0.0",
 		"regexr": "^1.5.1",
 		"resize-observer-polyfill": "^1.5.1",
-		"three": "^0.124.0",
+		"three": "^0.139.0",
 		"three-projected-material": "^2.0.5"
 	},
 	"devDependencies": {
 		"@lume/cli": "^0.7.4",
 		"@types/mkdirp": "^0.5.2",
 		"@types/rimraf": "^2.0.3",
+		"@types/three": "^0.139.0",
 		"at-at": "^1.1.0",
 		"babel-eslint": "8.2.6",
 		"docsify-cli": "trusktr/docsify-cli#add-cors",

src/behaviors/mesh-behaviors/GeometryOrMaterialBehavior.ts

@@ -2,7 +2,6 @@
 import {MeshBehavior, MeshComponentType} from './MeshBehavior.js'
 
 import type {Material} from 'three/src/materials/Material.js'
-import type {Geometry} from 'three/src/core/Geometry.js'
 import type {BufferGeometry} from 'three/src/core/BufferGeometry.js'
 
 /**
@@ -39,7 +38,7 @@ export abstract class GeometryOrMaterialBehavior extends MeshBehavior {
 		this.element.needsUpdate()
 	}
 
-	_createComponent(): BufferGeometry | Geometry | Material {
+	_createComponent(): BufferGeometry | Material {
 		throw new Error('`_createComponent()` is not implemented by subclass.')
 	}
 

src/behaviors/mesh-behaviors/MeshBehavior.ts

@@ -3,7 +3,7 @@ import {Mesh} from '../../meshes/Mesh.js'
 import {Points} from '../../meshes/Points.js'
 import {InstancedMesh} from '../../meshes/InstancedMesh.js'
 
-import type {BufferGeometry, Geometry, Material} from 'three'
+import type {BufferGeometry, Material} from 'three'
 
 export type MeshComponentType = 'geometry' | 'material'
 
@@ -20,7 +20,7 @@ export abstract class MeshBehavior extends RenderableBehavior {
 		return [Mesh, Points, InstancedMesh]
 	}
 
-	_createComponent(): BufferGeometry | Geometry | Material {
+	_createComponent(): BufferGeometry | Material {
 		throw new Error('`_createComponent()` is not implemented by subclass.')
 	}
 

src/behaviors/mesh-behaviors/geometries/GeometryBehavior.ts

@@ -1,8 +1,7 @@
-import {Geometry} from 'three/src/core/Geometry.js'
+import {BufferGeometry} from 'three/src/core/BufferGeometry.js'
 import {GeometryOrMaterialBehavior} from '../GeometryOrMaterialBehavior.js'
 
 import type {MeshComponentType} from '../MeshBehavior.js'
-import type {BufferGeometry} from 'three'
 
 // base class for geometry behaviors
 export abstract class GeometryBehavior extends GeometryOrMaterialBehavior {
@@ -30,8 +29,8 @@ export abstract class GeometryBehavior extends GeometryOrMaterialBehavior {
 		return this.meshComponent
 	}
 
-	override _createComponent(): BufferGeometry | Geometry {
-		return new Geometry()
+	override _createComponent(): BufferGeometry {
+		return new BufferGeometry()
 	}
 
 	loadGL() {

src/behaviors/mesh-behaviors/geometries/RoundedRectangleGeometryBehavior.ts

@@ -5,7 +5,7 @@ import {ExtrudeGeometry} from 'three/src/geometries/ExtrudeGeometry.js'
 import {ShapeGeometry} from 'three/src/geometries/ShapeGeometry.js'
 import {GeometryBehavior} from './GeometryBehavior.js'
 
-import type {Geometry} from 'three/src/core/Geometry.js'
+import type {BufferGeometry} from 'three/src/core/BufferGeometry.js'
 
 // function BoolAttribute(val: string | null) {
 // 	if (val === null || val === 'false') return false
@@ -56,7 +56,7 @@ export class RoundedRectangleGeometryBehavior extends GeometryBehavior {
 
 	_createComponent() {
 		let thickness = this.thickness
-		let geom: Geometry
+		let geom: BufferGeometry
 
 		const roundedRectShape = new RoundedRectShape(
 			0,

src/behaviors/mesh-behaviors/geometries/ShapeGeometryBehavior.ts

@@ -9,7 +9,7 @@ import {Vector2} from 'three/src/math/Vector2.js'
 import {GeometryBehavior} from './GeometryBehavior.js'
 import {stringToNumberArray} from '../../../meshes/utils.js'
 
-import type {Geometry} from 'three/src/core/Geometry.js'
+// import type {BufferGeometry} from 'three/src/core/BufferGeometry.js'
 
 // Heart shape.
 const defaultShape = new Shape()
@@ -212,21 +212,22 @@ export class ShapeGeometryBehavior extends GeometryBehavior {
 		// Negative scale throws a lot of things off, causing lighting not to work due to normals going the wrong direction.
 		geometry.scale(1, -1, 1)
 		// So we have to do the following to reverse the effects:
-		handleInvertedGeometry(geometry)
+		// handleInvertedGeometry(geometry)
 
+		if (this.fitment) return geometry
 		if (this.fitment === 'none') return geometry
 
 		let minX = Number.MAX_VALUE
 		let maxX = -Number.MAX_VALUE
 		let minY = Number.MAX_VALUE
 		let maxY = -Number.MAX_VALUE
 
-		for (const vert of geometry.vertices) {
-			minX = vert.x < minX ? vert.x : minX
-			maxX = vert.x > maxX ? vert.x : maxX
-			minY = vert.y < minY ? vert.y : minY
-			maxY = vert.y > maxY ? vert.y : maxY
-		}
+		// for (const vert of geometry.vertices) {
+		// 	minX = vert.x < minX ? vert.x : minX
+		// 	maxX = vert.x > maxX ? vert.x : maxX
+		// 	minY = vert.y < minY ? vert.y : minY
+		// 	maxY = vert.y > maxY ? vert.y : maxY
+		// }
 
 		const shapeSizeX = maxX - minX
 		const shapeSizeY = maxY - minY
@@ -298,41 +299,109 @@ if (!elementBehaviors.has('shape-geometry')) elementBehaviors.define('shape-geom
 // Based on https://stackoverflow.com/questions/16824650/three-js-how-to-flip-normals-after-negative-scale
 // TODO handle BufferGeometry too. We'll need to once we update Three.js to
 // latest, which drops the old Geometry classes.
-function handleInvertedGeometry(geometry: Geometry) {
-	for (const face of geometry.faces) {
-		// flip face normals
-		// TODO It seems to work without modifying z. Is this ok?
-		face.normal.x *= -1
-		face.normal.y *= -1
-		face.normal.z *= -1
-
-		// change face winding order
-		const temp = face.a
-		face.a = face.c
-		face.c = temp
-	}
+// function handleInvertedGeometryOld(geometry: BufferGeometry) {
+// 	for (const face of geometry.faces) {
+// 		// flip face normals
+// 		// TODO It seems to work without modifying z. Is this ok?
+// 		face.normal.x *= -1
+// 		face.normal.y *= -1
+// 		face.normal.z *= -1
+
+// 		// change face winding order
+// 		const temp = face.a
+// 		face.a = face.c
+// 		face.c = temp
+// 	}
+
+// 	// flip UV coordinates
+// 	const faceVertexUvs = geometry.faceVertexUvs[0]
+// 	for (let i = 0; i < faceVertexUvs.length; i++) {
+// 		const temp = faceVertexUvs[i][0]
+// 		faceVertexUvs[i][0] = faceVertexUvs[i][2]
+// 		faceVertexUvs[i][2] = temp
+// 	}
+
+// 	// TODO Does anything else need update? Right now it doesn't matter, as
+// 	// we're only using this on freshly-made geometries. When we optimize in the
+// 	// future, we'd want to update geometries in place rather than always
+// 	// replacing them, then this will matter.
+// 	geometry.verticesNeedUpdate = true
+// 	geometry.normalsNeedUpdate = true
+
+// 	// If we use this on a geometry that needs smoothing, this will apply:
+// 	// TODO attribute to toggle flat shading
+// 	// geometry.computeFaceNormals()
+// 	// geometry.computeVertexNormals()
+// 	// geometry.computeBoundingSphere()
+// }
 
-	// flip UV coordinates
-	const faceVertexUvs = geometry.faceVertexUvs[0]
-	for (let i = 0; i < faceVertexUvs.length; i++) {
-		const temp = faceVertexUvs[i][0]
-		faceVertexUvs[i][0] = faceVertexUvs[i][2]
-		faceVertexUvs[i][2] = temp
-	}
+// function handleInvertedGeometry(geometry: BufferGeometry) {
+//   const tempXYZ = [0, 0, 0];
+
+//   // flip normals
+//   for (let i = 0; i < geometry.attributes.normal.array.length / 9; i++) {
+//     // cache a coordinates
+//     tempXYZ[0] = geometry.attributes.normal.array[i * 9];
+//     tempXYZ[1] = geometry.attributes.normal.array[i * 9 + 1];
+//     tempXYZ[2] = geometry.attributes.normal.array[i * 9 + 2];
+
+//     // overwrite a with c
+//     geometry.attributes.normal.array[i * 9] =
+//       geometry.attributes.normal.array[i * 9 + 6];
+//     geometry.attributes.normal.array[i * 9 + 1] =
+//       geometry.attributes.normal.array[i * 9 + 7];
+//     geometry.attributes.normal.array[i * 9 + 2] =
+//       geometry.attributes.normal.array[i * 9 + 8];
+
+//     // overwrite c with stored a values
+//     geometry.attributes.normal.array[i * 9 + 6] = tempXYZ[0];
+//     geometry.attributes.normal.array[i * 9 + 7] = tempXYZ[1];
+//     geometry.attributes.normal.array[i * 9 + 8] = tempXYZ[2];
+//   }
+
+//   // change face winding order
+//   for (let i = 0; i < geometry.attributes.position.array.length / 9; i++) {
+//     // cache a coordinates
+//     tempXYZ[0] = geometry.attributes.position.array[i * 9];
+//     tempXYZ[1] = geometry.attributes.position.array[i * 9 + 1];
+//     tempXYZ[2] = geometry.attributes.position.array[i * 9 + 2];
+
+//     // overwrite a with c
+//     geometry.attributes.position.array[i * 9] =
+//       geometry.attributes.position.array[i * 9 + 6];
+//     geometry.attributes.position.array[i * 9 + 1] =
+//       geometry.attributes.position.array[i * 9 + 7];
+//     geometry.attributes.position.array[i * 9 + 2] =
+//       geometry.attributes.position.array[i * 9 + 8];
+
+//     // overwrite c with stored a values
+//     geometry.attributes.position.array[i * 9 + 6] = tempXYZ[0];
+//     geometry.attributes.position.array[i * 9 + 7] = tempXYZ[1];
+//     geometry.attributes.position.array[i * 9 + 8] = tempXYZ[2];
+//   }
+
+//   // flip UV coordinates
+//   for (let i = 0; i < geometry.attributes.uv.array.length / 6; i++) {
+//     // cache a coordinates
+//     tempXYZ[0] = geometry.attributes.uv.array[i * 6];
+//     tempXYZ[1] = geometry.attributes.uv.array[i * 6 + 1];
+
+//     // overwrite a with c
+//     geometry.attributes.uv.array[i * 6] =
+//       geometry.attributes.uv.array[i * 6 + 4];
+//     geometry.attributes.uv.array[i * 6 + 1] =
+//       geometry.attributes.uv.array[i * 6 + 5];
+
+//     // overwrite c with stored a values
+//     geometry.attributes.uv.array[i * 6 + 4] = tempXYZ[0];
+//     geometry.attributes.uv.array[i * 6 + 5] = tempXYZ[1];
+//   }
+
+//   geometry.attributes.normal.needsUpdate = true;
+//   geometry.attributes.position.needsUpdate = true;
+//   geometry.attributes.uv.needsUpdate = true;
 
-	// TODO Does anything else need update? Right now it doesn't matter, as
-	// we're only using this on freshly-made geometries. When we optimize in the
-	// future, we'd want to update geometries in place rather than always
-	// replacing them, then this will matter.
-	geometry.verticesNeedUpdate = true
-	geometry.normalsNeedUpdate = true
-
-	// If we use this on a geometry that needs smoothing, this will apply:
-	// TODO attribute to toggle flat shading
-	// geometry.computeFaceNormals()
-	// geometry.computeVertexNormals()
-	// geometry.computeBoundingSphere()
-}
+// }
 
 // Adapted from https://github.com/mrdoob/three.js/blob/c7d06c02e302ab9c20fe8b33eade4b61c6712654/examples/jsm/loaders/SVGLoader.js#L207
 

src/behaviors/mesh-behaviors/materials/StandardMaterialBehavior.ts

@@ -68,10 +68,10 @@ export class StandardMaterialBehavior extends MaterialBehavior {
 			mat.bumpScale = this.bumpScale
 			mat.normalScale.set(this.normalScale, this.normalScale)
 			mat.metalness = this.metalness
-			mat.morphNormals = this.morphNormals
-			mat.morphTargets = this.morphTargets
+			// mat.morphNormals = this.morphNormals
+			// mat.morphTargets = this.morphTargets
 			mat.roughness = this.roughness
-			mat.vertexTangents = this.vertexTangents
+			// mat.vertexTangents = this.vertexTangents
 
 			// TODO Needed?
 			// mat.needsUpdate = true

src/renderers/WebglRendererThree.ts

@@ -329,7 +329,7 @@ export class WebglRendererThree {
 			renderer.setAnimationLoop(fn)
 		else if (renderer.animate)
 			// < r94
-			renderer.animate(fn)
+			renderer.animate(fn as () => void)
 	}
 
 	// TODO: at the moment this has only been tested toggling it on