fix: update packages (#69)

updated storybook to use latest three and added typescript fixes

.storybook/stories/AccumulativeShadows.stories.ts

@@ -2,8 +2,8 @@ import * as THREE from 'three'
 import { Setup } from '../Setup'
 import GUI from 'lil-gui'
 import { Meta } from '@storybook/html'
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
 import { ProgressiveLightMap, SoftShadowMaterial } from '../../src/core/AccumulativeShadows'
 

.storybook/stories/Billboard.stories.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { GUI } from 'lil-gui'
 import { Billboard, BillboardProps, BillboardType } from '../../src/core/Billboard'
 

.storybook/stories/Caustics.stories.ts

@@ -1,9 +1,9 @@
 import * as THREE from 'three'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
-import { GroundProjectedSkybox } from 'three/examples/jsm/objects/GroundProjectedSkybox'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
+import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
 import { GUI } from 'lil-gui'
 import { Caustics, CausticsType } from '../../src/core/Caustics'
@@ -76,10 +76,10 @@ const setupEnvironment = (scene: THREE.Scene) => {
   exrLoader.load('round_platform_1k.exr', (exrTex) => {
     exrTex.mapping = THREE.EquirectangularReflectionMapping
     scene.environment = exrTex
-    // scene.background = exrTex
+    scene.background = exrTex
 
-    const groundProjection = new GroundProjectedSkybox(exrTex)
-    groundProjection.scale.setScalar(100)
+    const groundProjection = new GroundedSkybox(exrTex, 5, 50)
+    groundProjection.position.set(0, 5, 0)
     scene.add(groundProjection)
   })
 }
@@ -107,7 +107,7 @@ const setupCaustics = (scene: THREE.Scene, renderer: THREE.WebGLRenderer) => {
   caustics.helper.visible = false // start hidden
   scene.add(caustics.group, caustics.helper)
 
-  caustics.group.position.y = 0.001 // to prevent z-fighting with groundProjectedSkybox
+  caustics.group.position.y = 0.001 // to prevent z-fighting with GroundedSkybox
 
   caustics.scene.add(torusMesh)
 

.storybook/stories/Clouds.stories.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { Setup } from '../Setup'
 import GUI from 'lil-gui'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { CLOUD_URL, Clouds, Cloud } from '../../src/core/Cloud'
 
 export default {

.storybook/stories/Grid.stories.ts

@@ -1,8 +1,8 @@
 import * as THREE from 'three'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
 import { GUI } from 'lil-gui'
 import { Grid, GridType } from '../../src/core/Grid'

.storybook/stories/MeshDistortMaterial.stories.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { Setup } from '../Setup'
 import GUI from 'lil-gui'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { MeshDistortMaterial } from '../../src/materials/MeshDistortMaterial'
 
 export default {

.storybook/stories/MeshReflectorMaterial.stories.ts

@@ -2,9 +2,9 @@ import * as THREE from 'three'
 import { Setup } from '../Setup'
 import GUI from 'lil-gui'
 import { Meta } from '@storybook/html'
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
-import { GroundProjectedSkybox } from 'three/examples/jsm/objects/GroundProjectedSkybox'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
+import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { MeshReflectorMaterial } from '../../src/materials/MeshReflectorMaterial'
 import { BlurPass } from '../../src/materials/BlurPass'
 
@@ -91,10 +91,10 @@ const setupEnvironment = () => {
   exrLoader.load('dancing_hall_1k.exr', (exrTex) => {
     exrTex.mapping = THREE.EquirectangularReflectionMapping
     scene.environment = exrTex
-    // scene.background = exrTex
+    scene.background = exrTex
 
-    const groundProjection = new GroundProjectedSkybox(exrTex)
-    groundProjection.scale.setScalar(100)
+    const groundProjection = new GroundedSkybox(exrTex, 10, 50)
+    groundProjection.position.set(0, 10, 0)
     scene.add(groundProjection)
 
     const envParams = {

.storybook/stories/MeshTransmissionMaterial.stories.ts

@@ -2,9 +2,9 @@ import * as THREE from 'three'
 import { Setup } from '../Setup'
 import GUI from 'lil-gui'
 import { Meta } from '@storybook/html'
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
-import { GroundProjectedSkybox } from 'three/examples/jsm/objects/GroundProjectedSkybox'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
+import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
 import { MeshTransmissionMaterial } from '../../src/materials/MeshTransmissionMaterial'
 import { MeshDiscardMaterial } from '../../src/materials/MeshDiscardMaterial'
@@ -66,10 +66,10 @@ const setupEnvironment = () => {
   exrLoader.load('round_platform_1k.exr', (exrTex) => {
     exrTex.mapping = THREE.EquirectangularReflectionMapping
     scene.environment = exrTex
-    // scene.background = exrTex
+    scene.background = exrTex
 
-    const groundProjection = new GroundProjectedSkybox(exrTex)
-    groundProjection.scale.setScalar(100)
+    const groundProjection = new GroundedSkybox(exrTex, 10, 50)
+    groundProjection.position.set(0, 10, 0)
     scene.add(groundProjection)
   })
 }

.storybook/stories/MeshWobbleMaterial.stories.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { Setup } from '../Setup'
 import GUI from 'lil-gui'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { MeshWobbleMaterial } from '../../src/materials/MeshWobbleMaterial'
 
 export default {

.storybook/stories/Outlines.stories.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { GUI } from 'lil-gui'
 import { Outlines, OutlinesType } from '../../src/core/Outlines'
 

.storybook/stories/PCSS.stories.ts

@@ -18,7 +18,7 @@ import {
 import { pcss } from '../../src/core/pcss'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import GUI from 'lil-gui'
 
 export default {

.storybook/stories/Splat.stories.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { GUI } from 'lil-gui'
 import { Splat, SplatLoader } from '../../src/core/Splat'
 

.storybook/stories/SpriteAnimator.stories.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { SpriteAnimator, SpriteAnimatorType } from '../../src/core/SpriteAnimator'
 import { GUI } from 'lil-gui'
 

.storybook/stories/Text.stories.ts

@@ -1,6 +1,6 @@
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { GUI } from 'lil-gui'
 import { Text, TextProps, TextType } from '../../src/core/Text'
 

.storybook/stories/shaderMaterial.stories.ts

@@ -2,7 +2,7 @@ import { BoxGeometry, Mesh, Texture, TextureLoader, REVISION } from 'three'
 import { shaderMaterial } from '../../src/core/shaderMaterial'
 import { Setup } from '../Setup'
 import { Meta } from '@storybook/html'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { GUI } from 'lil-gui'
 
 export default {

.storybook/stories/volumetricSpotlight.stories.ts

@@ -10,10 +10,8 @@ import {
   LinearFilter,
   MathUtils,
   Mesh,
-  MeshBasicMaterial,
   MeshStandardMaterial,
   PlaneGeometry,
-  ShaderMaterial,
   SphereGeometry,
   SpotLight,
   SpotLightHelper,
@@ -23,7 +21,7 @@ import {
   WebGLRenderTarget,
 } from 'three'
 import { Setup } from '../Setup'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { Meta } from '@storybook/html'
 import GUI from 'lil-gui'
 

package.json

@@ -86,7 +86,7 @@
     "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^26.0.10",
     "@types/lodash-es": "^4.17.3",
-    "@types/three": "^0.158.1",
+    "@types/three": "^0.166.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-eslint": "^10.1.0",
@@ -100,7 +100,7 @@
     "husky": "^6.0.0",
     "jest": "^26.4.1",
     "json": "^11.0.0",
-    "lil-gui": "^0.19.1",
+    "lil-gui": "^0.19.2",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.0",
     "raw-loader": "^4.0.2",
@@ -112,10 +112,10 @@
     "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^20.1.1",
-    "three": "^0.158.0",
-    "three-stdlib": "^2.25.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.7.4",
+    "three": "^0.166.1",
+    "three-stdlib": "^2.30.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.3",
     "yarn": "^1.22.17"
   },
   "peerDependencies": {

src/core/Cloud.ts

@@ -13,6 +13,7 @@ import {
   PlaneGeometry,
   InstancedBufferAttribute,
   BufferAttribute,
+  Camera,
 } from 'three'
 import { setUpdateRange } from '../../src/helpers/deprecated'
 
@@ -125,7 +126,7 @@ export class Clouds extends Group {
   ref: Group
   instance: InstancedMesh
   cloudMaterial: Material
-  update: (camera: THREE.Camera, time: number, delta: number) => void
+  update: (camera: Camera, time: number, delta: number) => void
 
   constructor({ limit = 200, range, material = MeshLambertMaterial, texture, frustumCulled = true }: CloudsProps = {}) {
     super()

src/core/Text.ts

@@ -1,4 +1,5 @@
 // @ts-ignore
+import { Mesh } from 'three'
 import { Text as TextMeshImpl, preloadFont } from 'troika-three-text'
 
 export type TextProps = {
@@ -48,7 +49,7 @@ function removeExternalProps(props: Partial<TextProps>) {
 }
 
 export type TextType = {
-  mesh: THREE.Mesh
+  mesh: Mesh
   updateProps: (newProps: Partial<TextProps>) => void
   dispose: () => void
 }

src/core/useFBO.ts

@@ -5,7 +5,7 @@ type FBOSettings = {
   samples?: number
   /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
   depth?: boolean
-} & THREE.WebGLRenderTargetOptions
+} & THREE.RenderTargetOptions
 
 function useFBO(
   /** Width in pixels */

src/helpers/deprecated.ts

@@ -1,15 +1,15 @@
+import { BufferAttribute } from 'three'
+
 /**
  * Sets `BufferAttribute.updateRange` since r159.
  */
-export const setUpdateRange = (
-  attribute: THREE.BufferAttribute,
-  updateRange: { offset: number; count: number }
-): void => {
+export const setUpdateRange = (attribute: BufferAttribute, updateRange: { offset: number; count: number }): void => {
   if ('updateRanges' in attribute) {
     // r159
     // @ts-ignore
     attribute.updateRanges[0] = updateRange
   } else {
+    // @ts-ignore
     attribute.updateRange = updateRange
   }
 }

src/materials/MeshTransmissionMaterial.ts

@@ -71,6 +71,7 @@ export class MeshTransmissionMaterial extends THREE.MeshPhysicalMaterial {
       buffer: { value: buffer },
     }
 
+    // @ts-ignore
     this.onBeforeCompile = (shader: THREE.Shader & { defines: { [key: string]: string } }) => {
       shader.uniforms = {
         ...shader.uniforms,