feat: update three to r151 (#1850)

package.json

@@ -105,7 +105,7 @@
     "@types/jest": "^26.0.10",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/three": "^0.149.0",
+    "@types/three": "^0.151.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-eslint": "^10.1.0",
@@ -135,7 +135,7 @@
     "semantic-release": "^21.0.6",
     "serve": "^14.2.0",
     "storybook": "^7.0.12",
-    "three": "^0.149.0",
+    "three": "^0.151.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
     "vite": "^4.3.6",

src/core/Caustics.tsx

@@ -81,7 +81,7 @@ declare global {
   }
 }
 
-function createNormalMaterial(side = THREE.FrontSide) {
+function createNormalMaterial(side: THREE.Side = THREE.FrontSide) {
   const viewMatrix = { value: new THREE.Matrix4() }
   return Object.assign(new THREE.MeshNormalMaterial({ side }) as CausticsProjectionMaterialType, {
     viewMatrix,
@@ -108,23 +108,23 @@ const CausticsProjectionMaterial = /* @__PURE__ */ shaderMaterial(
     lightProjMatrix: /* @__PURE__ */ new THREE.Matrix4(),
     lightViewMatrix: /* @__PURE__ */ new THREE.Matrix4(),
   },
-  `varying vec3 vWorldPosition;   
+  `varying vec3 vWorldPosition;
    void main() {
      gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
      vec4 worldPosition = modelMatrix * vec4(position, 1.);
      vWorldPosition = worldPosition.xyz;
    }`,
   `varying vec3 vWorldPosition;
   uniform vec3 color;
-  uniform sampler2D causticsTexture; 
-  uniform sampler2D causticsTextureB; 
+  uniform sampler2D causticsTexture;
+  uniform sampler2D causticsTextureB;
   uniform mat4 lightProjMatrix;
   uniform mat4 lightViewMatrix;
    void main() {
-    // Apply caustics  
+    // Apply caustics
     vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);
     lightSpacePos.xyz /= lightSpacePos.w;
-    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5; 
+    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5;
     vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;
     vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;
     gl_FragColor = vec4((front + back) * color, 1.0);
@@ -158,7 +158,7 @@ const CausticsMaterial = /* @__PURE__ */ shaderMaterial(
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }`,
-  /* glsl */ `  
+  /* glsl */ `
   uniform mat4 cameraMatrixWorld;
   uniform mat4 cameraProjectionMatrixInv;
   uniform vec3 lightDir;
@@ -186,7 +186,7 @@ const CausticsMaterial = /* @__PURE__ */ shaderMaterial(
     viewSpacePosition /= viewSpacePosition.w;
     vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;
     return worldSpacePosition.xyz;
-  }                  
+  }
   float sdPlane( vec3 p, vec3 n, float h ) {
     // n must be normalized
     return dot(p,n) + h;

src/core/Effects.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
-import { RGBAFormat, HalfFloatType, WebGLRenderTarget, UnsignedByteType } from 'three'
+import { RGBAFormat, HalfFloatType, WebGLRenderTarget, UnsignedByteType, TextureDataType, TextureEncoding } from 'three'
 import { ReactThreeFiber, extend, useThree, useFrame } from '@react-three/fiber'
 import { EffectComposer, RenderPass, ShaderPass, GammaCorrectionShader } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
   multisamping?: number
-  encoding?: number
-  type?: number
+  encoding?: TextureEncoding
+  type?: TextureDataType
   renderIndex?: number
   disableGamma?: boolean
   disableRenderPass?: boolean

src/core/Sampler.tsx

@@ -140,7 +140,7 @@ export function useSurfaceSampler(
 
     buffer.needsUpdate = true
 
-    setBuffer(buffer.clone())
+    setBuffer(new InstancedBufferAttribute(buffer.array, buffer.itemSize).copy(buffer))
   }, [mesh, instanceMesh, weight, count, transform])
 
   return buffer

src/core/Stats.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { addEffect, addAfterEffect } from '@react-three/fiber'
-import StatsImpl from 'stats.js'
+import * as StatsImpl from 'stats.js'
 import { useEffectfulState } from '../helpers/useEffectfulState'
 
 type Props = {

src/materials/BlurPass.tsx

@@ -55,6 +55,7 @@ export class BlurPass {
     this.convolutionMaterial.setTexelSize(1.0 / width, 1.0 / height)
     this.convolutionMaterial.setResolution(new Vector2(width, height))
     this.scene = new Scene()
+    // @ts-expect-error fixed in r154
     this.camera = new Camera()
     this.convolutionMaterial.uniforms.minDepthThreshold.value = minDepthThreshold
     this.convolutionMaterial.uniforms.maxDepthThreshold.value = maxDepthThreshold

src/web/Html.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
 import {
+  Vector2,
   Vector3,
   Group,
   Object3D,
@@ -11,15 +12,15 @@ import {
   Raycaster,
   DoubleSide,
   Mesh,
-  Material,
 } from 'three'
 import { Assign } from 'utility-types'
-import { MaterialProps, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
+import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 const v1 = /* @__PURE__ */ new Vector3()
 const v2 = /* @__PURE__ */ new Vector3()
 const v3 = /* @__PURE__ */ new Vector3()
+const v4 = /* @__PURE__ */ new Vector2()
 
 function defaultCalculatePosition(el: Object3D, camera: Camera, size: { width: number; height: number }) {
   const objectPos = v1.setFromMatrixPosition(el.matrixWorld)
@@ -43,7 +44,8 @@ function isObjectVisible(el: Object3D, camera: Camera, raycaster: Raycaster, occ
   const elPos = v1.setFromMatrixPosition(el.matrixWorld)
   const screenPos = elPos.clone()
   screenPos.project(camera)
-  raycaster.setFromCamera(screenPos, camera)
+  v4.set(screenPos.x, screenPos.y)
+  raycaster.setFromCamera(v4, camera)
   const intersects = raycaster.intersectObjects(occlude, true)
   if (intersects.length) {
     const intersectionDistance = intersects[0].distance
@@ -409,15 +411,15 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
           /*
             This shader is from the THREE's SpriteMaterial.
             We need to turn the backing plane into a Sprite
-            (make it always face the camera) if "transfrom" 
-            is false. 
+            (make it always face the camera) if "transfrom"
+            is false.
           */
           #include <common>
 
           void main() {
             vec2 center = vec2(0., 1.);
             float rotation = 0.0;
-            
+
             // This is somewhat arbitrary, but it seems to work well
             // Need to figure out how to derive this dynamically if it even matters
             float size = 0.03;

yarn.lock

@@ -3984,12 +3984,20 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/three@^0.149.0":
-  version "0.149.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.149.0.tgz#f48c03ffcf35b2d196f3532b51bc845e96f6090e"
-  integrity sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg==
+"@types/stats.js@*":
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
+  integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==
+
+"@types/three@^0.151.0":
+  version "0.151.0"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.151.0.tgz#ed2f5a9f6716a80ab284435aad056641b98ec695"
+  integrity sha512-hwOyN4szaikHsNzqbYLBfGvXi+TA/1TIKvK3ujJi+cQXzYzE5ZymzlDnOA6/cTSozY1juPFE3u5agToVQKb9TQ==
   dependencies:
+    "@types/stats.js" "*"
     "@types/webxr" "*"
+    fflate "~0.6.9"
+    lil-gui "~0.17.0"
 
 "@types/unist@^2.0.0":
   version "2.0.8"
@@ -6945,7 +6953,7 @@ fetch-retry@^5.0.2:
   resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.6.tgz#17d0bc90423405b7a88b74355bf364acd2a7fa56"
   integrity sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==
 
-fflate@^0.6.9:
+fflate@^0.6.9, fflate@~0.6.9:
   version "0.6.10"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
   integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
@@ -9386,6 +9394,11 @@ libnpmversion@^4.0.2:
     proc-log "^3.0.0"
     semver "^7.3.7"
 
+lil-gui@~0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/lil-gui/-/lil-gui-0.17.0.tgz#b41ae55d0023fcd9185f7395a218db0f58189663"
+  integrity sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -13027,10 +13040,10 @@ three-stdlib@^2.29.4:
     fflate "^0.6.9"
     potpack "^1.0.1"
 
-three@^0.149.0:
-  version "0.149.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.149.0.tgz#a9cf78b17d02f063ffe6dfca1e300eff2eab2927"
-  integrity sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ==
+three@^0.151.0:
+  version "0.151.3"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.151.3.tgz#0b3c7de4b070d5b66b15217f42465d67cbfa6004"
+  integrity sha512-+vbuqxFy8kzLeO5MgpBHUvP/EAiecaDwDuOPPDe6SbrZr96kccF0ktLngXc7xA7bzyd3N0t2f6mw3Z9y6JCojQ==
 
 through2@^0.6.3:
   version "0.6.5"