Update threejs 150 (#7691)

* update threejs to r150

* update patch

* update types

* update type

* update types

package.json

@@ -153,7 +153,7 @@
     "postcss": "^8.4.16",
     "qrcode.react": "^3.1.0",
     "react-json-view": "^1.21.3",
-    "three": "0.148.0",
+    "three": "0.150.1",
     "ts-node": "10.8.2",
     "typescript": "4.9.5",
     "vite-plugin-node": "^1.0.0",

packages/client-core/package.json

@@ -84,7 +84,7 @@
     "@types/react": "18.0.19",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.24",
-    "@types/three": "0.148.0",
+    "@types/three": "0.149.0",
     "css-modules-require-hook": "4.2.3",
     "esbuild": "0.16.9",
     "mocha": "10.0.0",

packages/editor/package.json

@@ -73,7 +73,7 @@
     "@types/react-dom": "18.0.0",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.24",
-    "@types/three": "0.148.0",
+    "@types/three": "0.149.0",
     "@types/uuid": "^8.3.4",
     "esbuild": "0.16.9",
     "mocha": "10.0.0",

packages/editor/src/components/geometry/GeometryEditor.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react'
 import React from 'react'
-import { BufferGeometry } from 'three'
+import { BufferAttribute, BufferGeometry, InterleavedBufferAttribute } from 'three'
 
 import { useHookstate } from '@etherealengine/hyperflux'
 
@@ -21,7 +21,7 @@ export default function GeometryEditor({ geometry }: { ['geometry']: BufferGeome
         name: attribName,
         count: attrib.count,
         itemSize: attrib.itemSize,
-        normalized: attrib.normalized
+        normalized: (attrib as BufferAttribute | InterleavedBufferAttribute).normalized
       }))
     }),
     [updateGeo]

packages/editor/src/lightmapper/AutoUV2.tsx

@@ -1,5 +1,6 @@
 import potpack, { PotpackBox } from 'potpack'
 import * as THREE from 'three'
+import { BufferAttribute, InterleavedBufferAttribute } from 'three'
 
 const tmpOrigin = new THREE.Vector3()
 const tmpU = new THREE.Vector3()
@@ -45,11 +46,11 @@ function findVertex(
 }
 
 function convertGeometryToIndexed(buffer: THREE.BufferGeometry) {
-  const posArray = buffer.attributes.position.array
+  const posArray = (buffer.attributes.position as BufferAttribute | InterleavedBufferAttribute).array
   const posVertexCount = Math.floor(posArray.length / 3)
   const faceCount = Math.floor(posVertexCount / 3)
 
-  const normalArray = buffer.attributes.normal.array
+  const normalArray = (buffer.attributes.normal as BufferAttribute | InterleavedBufferAttribute).array
 
   // fill out a group index lookup to keep faces separate by material
   const origGroups = buffer.groups || []
@@ -167,8 +168,8 @@ export function computeAutoUV2Layout(
     const indexArray = indexAttr.array
     const faceCount = Math.floor(indexArray.length / 3)
 
-    const posArray = buffer.attributes.position.array
-    const normalArray = buffer.attributes.normal.array
+    const posArray = (buffer.attributes.position as BufferAttribute | InterleavedBufferAttribute).array
+    const normalArray = (buffer.attributes.normal as BufferAttribute | InterleavedBufferAttribute).array
 
     const vertexBoxMap: (AutoUVBox | undefined)[] = new Array(posArray.length / 3)
 

packages/editor/src/lightmapper/lightProbe.ts

@@ -1,4 +1,5 @@
 import * as THREE from 'three'
+import { BufferAttribute, InterleavedBufferAttribute } from 'three'
 
 const tmpOrigin = new THREE.Vector3()
 const tmpU = new THREE.Vector3()
@@ -280,8 +281,8 @@ export async function withLightProbe(
 
         // read vertex position for this face and interpolate along U and V axes
         const origIndexArray = originalBuffer.index.array
-        const origPosArray = originalBuffer.attributes.position.array
-        const origNormalArray = originalBuffer.attributes.normal.array
+        const origPosArray = (originalBuffer.attributes.position as BufferAttribute | InterleavedBufferAttribute).array
+        const origNormalArray = (originalBuffer.attributes.normal as BufferAttribute | InterleavedBufferAttribute).array
 
         // get face vertex positions
         const faceVertexBase = faceIndex * 3

packages/engine/package.json

@@ -52,7 +52,7 @@
     "screen-space-reflections": "^2.5.0",
     "sharp": "^0.30.7",
     "simplex-noise": "^3.0.0",
-    "three": "0.148.0",
+    "three": "0.150.1",
     "three-mesh-bvh": "^0.5.0",
     "three.quarks": "0.8.6",
     "ts-matches": "5.3.0",
@@ -67,7 +67,7 @@
     "@types/offscreencanvas": "2019.6.4",
     "@types/proxyquire": "^1.3.28",
     "@types/sinon": "10.0.11",
-    "@types/three": "0.148.0",
+    "@types/three": "0.149.0",
     "jsdom": "19.0.0",
     "jsdom-global": "3.0.2",
     "mocha": "10.0.0",

packages/engine/src/assets/classes/BatchedMesh.ts

@@ -3,6 +3,7 @@ import {
   BufferGeometry,
   DataTexture,
   FloatType,
+  InterleavedBufferAttribute,
   Material,
   MathUtils,
   Matrix4,
@@ -243,8 +244,8 @@ class BatchedMesh extends Mesh {
     // @TODO: Error handling if exceeding maxVertexCount or maxIndexCount
 
     for (const attributeName in geometry.attributes) {
-      const srcAttribute = geometry.getAttribute(attributeName)
-      const dstAttribute = this.geometry.getAttribute(attributeName)
+      const srcAttribute = geometry.getAttribute(attributeName) as BufferAttribute | InterleavedBufferAttribute
+      const dstAttribute = this.geometry.getAttribute(attributeName) as BufferAttribute | InterleavedBufferAttribute
       ;(dstAttribute.array as Float32Array).set(srcAttribute.array, this._vertexCount * dstAttribute.itemSize)
       dstAttribute.needsUpdate = true
     }
@@ -261,7 +262,7 @@ class BatchedMesh extends Mesh {
     const geometryId = this._geometryCount
     this._geometryCount++
 
-    const idAttribute = this.geometry.getAttribute('id')
+    const idAttribute = this.geometry.getAttribute('id') as BufferAttribute | InterleavedBufferAttribute
 
     for (let i = 0; i < srcPositionAttribute.count; i++) {
       idAttribute.setX(this._vertexCount + i, geometryId)

packages/engine/src/assets/csm/CSMHelper.ts

@@ -6,6 +6,7 @@ import {
   Color,
   DoubleSide,
   Group,
+  InterleavedBufferAttribute,
   LineBasicMaterial,
   LineSegments,
   Mesh,
@@ -71,7 +72,9 @@ class CSMHelper extends Group {
     const lights = csm.lights
 
     const frustumLines = this.frustumLines
-    const frustumLinePositions = frustumLines.geometry.getAttribute('position')
+    const frustumLinePositions = frustumLines.geometry.getAttribute('position') as
+      | BufferAttribute
+      | InterleavedBufferAttribute
     const cascadeLines = this.cascadeLines
     const cascadePlanes = this.cascadePlanes
     const shadowLines = this.shadowLines

packages/engine/src/assets/loaders/fbx/FBXLoader.js

@@ -3979,23 +3979,23 @@ function generateTransform( transformData ) {
 	if ( transformData.preRotation ) {
 
 		const array = transformData.preRotation.map( MathUtils.degToRad );
-		array.push( transformData.eulerOrder || Euler.DefaultOrder );
+		array.push( transformData.eulerOrder || Euler.DEFAULT_ORDER );
 		lPreRotationM.makeRotationFromEuler( tempEuler.fromArray( array ) );
 
 	}
 
 	if ( transformData.rotation ) {
 
 		const array = transformData.rotation.map( MathUtils.degToRad );
-		array.push( transformData.eulerOrder || Euler.DefaultOrder );
+		array.push( transformData.eulerOrder || Euler.DEFAULT_ORDER );
 		lRotationM.makeRotationFromEuler( tempEuler.fromArray( array ) );
 
 	}
 
 	if ( transformData.postRotation ) {
 
 		const array = transformData.postRotation.map( MathUtils.degToRad );
-		array.push( transformData.eulerOrder || Euler.DefaultOrder );
+		array.push( transformData.eulerOrder || Euler.DEFAULT_ORDER );
 		lPostRotationM.makeRotationFromEuler( tempEuler.fromArray( array ) );
 		lPostRotationM.invert();
 

packages/engine/src/avatar/animation/avatarPose.ts

@@ -1,4 +1,14 @@
-import { Bone, Matrix3, Matrix4, Quaternion, SkinnedMesh, Vector3, Vector4 } from 'three'
+import {
+  Bone,
+  BufferAttribute,
+  InterleavedBufferAttribute,
+  Matrix3,
+  Matrix4,
+  Quaternion,
+  SkinnedMesh,
+  Vector3,
+  Vector4
+} from 'three'
 
 import { BoneStructure } from '../AvatarBoneMatching'
 
@@ -133,8 +143,8 @@ export function makeTPose(rig: BoneStructure) {
  */
 export function applySkeletonPose(mesh: SkinnedMesh) {
   const target = new Vector3()
-  const posAttr = mesh.geometry.attributes.position
-  const normalAttr = mesh.geometry.attributes.normal
+  const posAttr = mesh.geometry.attributes.position as BufferAttribute | InterleavedBufferAttribute
+  const normalAttr = mesh.geometry.attributes.normal as BufferAttribute | InterleavedBufferAttribute
   const { bones } = mesh.skeleton
 
   bones.forEach((bone) => {
@@ -164,7 +174,7 @@ export function boneNormalTransform(mesh: SkinnedMesh, index: number, target: Ve
   skinIndex.fromBufferAttribute(geometry.attributes.skinIndex as any, index)
   skinWeight.fromBufferAttribute(geometry.attributes.skinWeight as any, index)
   baseNormal
-    .fromBufferAttribute(geometry.attributes.normal, index)
+    .fromBufferAttribute(geometry.attributes.normal as BufferAttribute | InterleavedBufferAttribute, index)
     .applyNormalMatrix(matrix3.getNormalMatrix(mesh.bindMatrix))
 
   target.set(0, 0, 0)

packages/engine/src/common/classes/GenerateMeshBVHWorker.ts

@@ -63,7 +63,9 @@ export class GenerateMeshBVHWorker {
       }
 
       const index = geometry.index ? Uint32Array.from(geometry.index.array) : null
-      const position = Float32Array.from(geometry.attributes.position.array)
+      const position = Float32Array.from(
+        (geometry.attributes.position as BufferAttribute | InterleavedBufferAttribute).array
+      )
 
       const transferrables = [position as ArrayLike<number>]
       if (index) {

packages/engine/src/debug/PositionalAudioHelper.ts

@@ -1,4 +1,4 @@
-import { BufferAttribute, BufferGeometry, Line, LineBasicMaterial, MathUtils } from 'three'
+import { BufferAttribute, BufferGeometry, InterleavedBufferAttribute, Line, LineBasicMaterial, MathUtils } from 'three'
 
 import { AudioNodeGroup } from '../scene/components/MediaComponent'
 
@@ -49,7 +49,7 @@ class PositionalAudioHelper extends Line {
     let stride
 
     const geometry = this.geometry
-    const positionAttribute = geometry.attributes.position
+    const positionAttribute = geometry.attributes.position as BufferAttribute | InterleavedBufferAttribute
 
     geometry.clearGroups()
 

packages/engine/src/ecs/utils/threejsPatches.ts

@@ -108,7 +108,7 @@ declare module 'three/src/math/Quaternion' {
   }
 }
 
-Scene.DefaultMatrixAutoUpdate = false
+Scene.DEFAULT_MATRIX_AUTO_UPDATE = false
 
 /**
  * Since we have complete control over matrix updates, we know that at any given point

packages/engine/src/physics/classes/Physics.ts

@@ -14,7 +14,7 @@ import RAPIER, {
   TempContactForceEvent,
   World
 } from '@dimforge/rapier3d-compat'
-import { Line, Mesh, OrthographicCamera, PerspectiveCamera, Quaternion, Vector2, Vector3 } from 'three'
+import { BufferAttribute, Line, Mesh, OrthographicCamera, PerspectiveCamera, Quaternion, Vector2, Vector3 } from 'three'
 
 import { getMutableState } from '@etherealengine/hyperflux'
 
@@ -208,7 +208,7 @@ function createColliderDesc(
         return console.warn('[Physics]: Tried to load convex mesh but did not find a geometry', mesh) as any
       try {
         const _buff = mesh.geometry.clone().scale(Math.abs(scale.x), Math.abs(scale.y), Math.abs(scale.z))
-        const vertices = new Float32Array(_buff.attributes.position.array)
+        const vertices = new Float32Array((_buff.attributes.position as BufferAttribute).array)
         const indices = new Uint32Array(_buff.index!.array)
         colliderDesc = ColliderDesc.convexMesh(vertices, indices) as ColliderDesc
       } catch (e) {
@@ -223,7 +223,7 @@ function createColliderDesc(
         return console.warn('[Physics]: Tried to load tri mesh but did not find a geometry', mesh) as any
       try {
         const _buff = mesh.geometry.clone().scale(Math.abs(scale.x), Math.abs(scale.y), Math.abs(scale.z))
-        const vertices = new Float32Array(_buff.attributes.position.array)
+        const vertices = new Float32Array((_buff.attributes.position as BufferAttribute).array)
         const indices = new Uint32Array(_buff.index!.array)
         colliderDesc = ColliderDesc.trimesh(vertices, indices)
       } catch (e) {

packages/engine/src/renderer/WebGLRendererSystem.ts

@@ -163,7 +163,8 @@ export class EngineRenderer {
 
     const renderer = this.supportWebGL2 ? new WebGLRenderer(options) : new WebGL1Renderer(options)
     this.renderer = renderer
-    this.renderer.physicallyCorrectLights = true
+    // @ts-ignore
+    this.renderer.useLegacyLights = false //true
     this.renderer.outputEncoding = sRGBEncoding
 
     // DISABLE THIS IF YOU ARE SEEING SHADER MISBEHAVING - UNCHECK THIS WHEN TESTING UPDATING THREEJS

packages/engine/src/renderer/effects/FXAAEffect.ts

@@ -22,9 +22,9 @@ export class FXAAEffect extends Effect {
       blendFunction,
 
       uniforms: new Map([
-        ['tDiffuse', new Uniform(null)],
+        ['tDiffuse', new Uniform(null as WebGLRenderTarget | null)],
         ['resolution', new Uniform(new Vector2())]
-      ])
+      ] as [string, Uniform<any>][])
     })
 
     /**

packages/engine/src/renderer/materials/functions/bakeToVertices.ts

@@ -34,7 +34,7 @@ export default async function bakeToVertices<T extends Material>(
         .map((map) => {
           const texture = material[map.field] as Texture
           const canvas = document.createElement('canvas')
-          const uv = mesh.geometry.getAttribute(map.attribName)
+          const uv = mesh.geometry.getAttribute(map.attribName) as BufferAttribute
           return new Promise<Color[]>(async (resolve) => {
             const image = (
               (await createReadableTexture(texture, { keepTransform: true, flipX: false, flipY: true })) as Texture

packages/engine/src/scene/components/ImageComponent.ts

@@ -1,8 +1,10 @@
 import { useEffect } from 'react'
 import {
+  BufferAttribute,
   BufferGeometry,
   CompressedTexture,
   DoubleSide,
+  InterleavedBufferAttribute,
   Mesh,
   MeshBasicMaterial,
   PlaneGeometry,
@@ -105,7 +107,7 @@ export function resizeImageMesh(mesh: Mesh<any, MeshBasicMaterial>) {
 }
 
 function flipNormals<G extends BufferGeometry>(geometry: G) {
-  const uvs = geometry.attributes.uv.array
+  const uvs = (geometry.attributes.uv as BufferAttribute | InterleavedBufferAttribute).array
   for (let i = 1; i < uvs.length; i += 2) {
     // @ts-ignore
     uvs[i] = 1 - uvs[i]

packages/engine/src/scene/functions/loaders/InstancingFunctions.ts

@@ -1,12 +1,14 @@
 import { max, min } from 'lodash'
 import {
+  BufferAttribute,
   BufferGeometry,
   Color,
   ColorRepresentation,
   DoubleSide,
   InstancedBufferAttribute,
   InstancedBufferGeometry,
   InstancedMesh,
+  InterleavedBufferAttribute,
   Material,
   Matrix4,
   Mesh,
@@ -370,9 +372,9 @@ export async function stageInstancing(entity: Entity) {
   }
   scatterState.state.set(ScatterState.STAGING)
   const targetGeo = getFirstMesh(obj3dFromUuid(scatter.surface))!.geometry
-  const normals = targetGeo.getAttribute('normal')
-  const positions = targetGeo.getAttribute('position')
-  const uvs = targetGeo.getAttribute('uv')
+  const normals = targetGeo.getAttribute('normal') as BufferAttribute | InterleavedBufferAttribute
+  const positions = targetGeo.getAttribute('position') as BufferAttribute | InterleavedBufferAttribute
+  const uvs = targetGeo.getAttribute('uv') as BufferAttribute | InterleavedBufferAttribute
   const uvBounds: any = { minU: null, maxU: null, minV: null, maxV: null }
   for (let i = 0; i < uvs.count; i += 1) {
     const u = uvs.getX(i)
@@ -535,16 +537,18 @@ export async function stageInstancing(entity: Entity) {
 
     let quaternion2 = new Quaternion()
 
+    const positionAttr = grassGeometry.attributes.position as BufferAttribute | InterleavedBufferAttribute
+
     //Bend grass base geometry for more organic look
-    for (let v = 0; v < grassGeometry.attributes.position.array.length / 3; v += 1) {
+    for (let v = 0; v < positionAttr.array.length / 3; v += 1) {
       quaternion2.setFromAxisAngle(new Vector3(0, 1, 0), Math.PI / 2)
-      vertex.x = grassGeometry.attributes.position.array[v * 3]
-      vertex.y = grassGeometry.attributes.position.array[v * 3 + 1]
-      vertex.z = grassGeometry.attributes.position.array[v * 3 + 2]
+      vertex.x = positionAttr.array[v * 3]
+      vertex.y = positionAttr.array[v * 3 + 1]
+      vertex.z = positionAttr.array[v * 3 + 2]
       let frac = vertex.y / (grassProps.bladeHeight.mu + grassProps.bladeHeight.sigma)
       quaternion2.slerp(quaternion0, frac)
       vertex.applyQuaternion(quaternion2)
-      grassGeometry.attributes.position.setXYZ(v, vertex.x, vertex.y, vertex.z)
+      positionAttr.setXYZ(v, vertex.x, vertex.y, vertex.z)
     }
 
     grassGeometry.computeVertexNormals()

packages/ui/package.json

@@ -68,7 +68,7 @@
     "@types/react": "18.0.19",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.24",
-    "@types/three": "0.148.0",
+    "@types/three": "0.149.0",
     "babel-jest": "^29.4.1",
     "babel-loader": "^8.3.0",
     "enzyme": "^3.11.0",