chore: update dependencies, remove legacy lights

Author: bjornstar

packages/react-three-cannon-examples/package.json

@@ -21,8 +21,8 @@
   ],
   "devDependencies": {
     "@react-three/cannon": "^6.6.0",
-    "@react-three/drei": "^9.80.1",
-    "@react-three/fiber": "^8.13.6",
+    "@react-three/drei": "^9.97.5",
+    "@react-three/fiber": "^8.15.16",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^17.0.14",
@@ -31,7 +31,6 @@
     "@types/three": "^0.155.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
-    "@vitejs/plugin-react": "^2.2.0",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-es": "^4.1.0",
@@ -47,16 +46,17 @@
     "react-router-dom": "^6.2.2",
     "styled-components": "^5.3.5",
     "three": "^0.155.0",
-    "three-stdlib": "^2.24.1",
+    "three-stdlib": "^2.29.4",
     "typescript": "^4.6.3",
-    "vite": "^3.2.2",
+    "vite": "^5.1.1",
     "vite-react-jsx": "^1.1.2",
-    "zustand": "^3.7.1"
+    "zustand": "^4.5.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
     "*.{js,json,jsx,md,ts,tsx}": "prettier --write"
   },
   "license": "MIT",
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }

packages/react-three-cannon-examples/src/demos/MondayMorning/index.tsx

@@ -9,8 +9,9 @@ import {
   usePointToPointConstraint,
   useSphere,
 } from '@react-three/cannon'
+import { useGLTF } from '@react-three/drei'
 import type { BoxGeometryProps, MeshProps, MeshStandardMaterialProps, ThreeEvent } from '@react-three/fiber'
-import { Canvas, useFrame, useLoader } from '@react-three/fiber'
+import { Canvas, useFrame } from '@react-three/fiber'
 import type { ReactNode, RefObject } from 'react'
 import {
   createContext,
@@ -25,7 +26,6 @@ import {
 } from 'react'
 import type { Group, Material, Mesh, Object3D, SpotLight } from 'three'
 import type { GLTF } from 'three-stdlib/loaders/GLTFLoader'
-import { GLTFLoader } from 'three-stdlib/loaders/GLTFLoader'
 
 import type { ShapeName } from './createConfig'
 import { createRagdoll } from './createConfig'
@@ -206,7 +206,7 @@ interface CupGLTF extends GLTF {
 }
 
 function Mug() {
-  const { nodes, materials } = useLoader(GLTFLoader, '/cup.glb') as CupGLTF
+  const { nodes, materials } = useGLTF('/cup.glb') as CupGLTF
   const [ref] = useCylinder(
     () => ({
       args: [0.6, 0.6, 1, 16],
@@ -292,8 +292,16 @@ const Lamp = () => {
       <mesh ref={lamp} {...bind}>
         <coneGeometry attach="geometry" args={[2, 2.5, 32]} />
         <meshStandardMaterial attach="material" />
-        <pointLight intensity={10} distance={5} />
-        <spotLight ref={light} position={[0, 20, 0]} angle={0.4} penumbra={1} intensity={0.6} castShadow />
+        <pointLight decay={5} intensity={10 * Math.PI} />
+        <spotLight
+          angle={0.4}
+          decay={0}
+          penumbra={1}
+          position={[0, 20, 0]}
+          ref={light}
+          intensity={0.6 * Math.PI}
+          castShadow
+        />
       </mesh>
     </>
   )
@@ -322,15 +330,11 @@ export default () => (
     orthographic
     shadows
     style={{ cursor: 'none' }}
-    gl={{
-      // todo: stop using legacy lights
-      useLegacyLights: true,
-    }}
   >
     <color attach="background" args={['#171720']} />
     <fog attach="fog" args={['#171720', 20, 70]} />
-    <ambientLight intensity={0.2} />
-    <pointLight position={[-10, -10, -10]} color="red" intensity={1.5} />
+    <ambientLight intensity={0.2 * Math.PI} />
+    <pointLight decay={0} position={[-10, -10, -10]} color="red" intensity={1.5 * Math.PI} />
     <Physics iterations={15} gravity={[0, -200, 0]} allowSleep={false}>
       <Cursor />
       <Ragdoll position={[0, 0, 0]} />

packages/react-three-cannon-examples/src/demos/Pingpong/index.tsx

@@ -1,14 +1,13 @@
 import { Physics, useBox, usePlane, useSphere } from '@react-three/cannon'
+import { useGLTF } from '@react-three/drei'
 import { Canvas, useFrame, useLoader } from '@react-three/fiber'
 import lerp from 'lerp'
 import clamp from 'lodash-es/clamp'
 import { Suspense, useRef } from 'react'
 import type { Group, Material, Mesh, Object3D, Skeleton } from 'three'
 import { TextureLoader } from 'three'
-import { DRACOLoader } from 'three-stdlib/loaders/DRACOLoader'
 import type { GLTF } from 'three-stdlib/loaders/GLTFLoader'
-import { GLTFLoader } from 'three-stdlib/loaders/GLTFLoader'
-import create from 'zustand'
+import { create } from 'zustand'
 
 import earthImg from './resources/cross.jpg'
 import pingSound from './resources/ping.mp3'
@@ -46,14 +45,8 @@ type PingPongGLTF = GLTF & {
     }
 }
 
-const extensions = (loader: GLTFLoader) => {
-  const dracoLoader = new DRACOLoader()
-  dracoLoader.setDecoderPath('/draco-gltf/')
-  loader.setDRACOLoader(dracoLoader)
-}
-
 function Paddle() {
-  const { nodes, materials } = useLoader(GLTFLoader, '/pingpong.glb', extensions) as PingPongGLTF
+  const { nodes, materials } = useGLTF('/pingpong.glb', '/draco-gltf/') as PingPongGLTF
   const { pong } = useStore((state) => state.api)
   const welcome = useStore((state) => state.welcome)
   const count = useStore((state) => state.count)
@@ -149,23 +142,20 @@ export default function () {
   return (
     <>
       <Canvas
-        shadows
         camera={{ fov: 50, position: [0, 5, 12] }}
         onPointerMissed={() => welcome && reset(false)}
-        gl={{
-          // todo: stop using legacy lights
-          useLegacyLights: true,
-        }}
+        shadows
       >
         <color attach="background" args={['#171720']} />
-        <ambientLight intensity={0.5} />
-        <pointLight position={[-10, -10, -10]} />
+        <ambientLight intensity={0.5 * Math.PI} />
+        <pointLight decay={0} intensity={Math.PI} position={[-10, -10, -10]} />
         <spotLight
-          position={[10, 10, 10]}
           angle={0.3}
-          penumbra={1}
-          intensity={1}
           castShadow
+          decay={0}
+          intensity={Math.PI}
+          penumbra={1}
+          position={[10, 10, 10]}
           shadow-mapSize-width={2048}
           shadow-mapSize-height={2048}
           shadow-bias={-0.0001}

packages/react-three-cannon-examples/src/demos/Raycast/index.tsx

@@ -1,22 +1,20 @@
 import type { Triplet } from '@react-three/cannon'
 import { Physics, useBox, useRaycastAll, useSphere } from '@react-three/cannon'
 import { Html } from '@react-three/drei'
-import type { GroupProps, Node, Object3DNode } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+import type { GroupProps, Object3DNode } from '@react-three/fiber'
 import { Canvas, extend, useFrame, useThree } from '@react-three/fiber'
 import { Suspense, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { Mesh, PerspectiveCamera } from 'three'
 import { BufferGeometry, Line as ThreeLine, Vector3 } from 'three'
-import { OrbitControls } from 'three-stdlib/controls/OrbitControls'
 
 import { prettyPrint } from './prettyPrint'
 
-extend({ OrbitControls })
 extend({ ThreeLine })
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      orbitControls: Node<OrbitControls, typeof OrbitControls>
       threeLine: Object3DNode<ThreeLine, typeof ThreeLine>
     }
   }
@@ -114,7 +112,6 @@ function Raycast() {
 
 const Camera = () => {
   const cameraRef = useRef<PerspectiveCamera>(null)
-  const controlsRef = useRef<OrbitControls>(null)
   const { gl, camera } = useThree()
   const set = useThree((state) => state.set)
   const size = useThree((state) => state.size)
@@ -132,18 +129,16 @@ const Camera = () => {
   }, [])
 
   useFrame(() => {
-    if (!cameraRef.current || !controlsRef.current) return
+    if (!cameraRef.current) return
     cameraRef.current.updateMatrixWorld()
-    controlsRef.current.update()
   })
 
   return (
     <>
       <perspectiveCamera ref={cameraRef} position={[0, -10, 10]} />
-      <orbitControls
+      <OrbitControls
         autoRotate
         enableDamping
-        ref={controlsRef}
         args={[camera, gl.domElement]}
         dampingFactor={0.2}
         rotateSpeed={0.5}
@@ -155,14 +150,7 @@ const Camera = () => {
 }
 
 export default () => (
-  <Canvas
-    shadows
-    gl={{
-      alpha: false,
-      // todo: stop using legacy lights
-      useLegacyLights: true,
-    }}
-  >
+  <Canvas shadows>
     <Camera />
     <color attach="background" args={['#fcb89d']} />
     <hemisphereLight intensity={0.35} />

packages/react-three-cannon-examples/src/demos/RaycastVehicle/index.tsx

@@ -54,18 +54,18 @@ const VehicleScene = () => {
 
   return (
     <>
-      <Canvas
-        shadows
-        camera={{ fov: 50, position: [0, 5, 15] }}
-        gl={{
-          // todo: stop using legacy lights
-          useLegacyLights: true,
-        }}
-      >
+      <Canvas camera={{ fov: 50, position: [0, 5, 15] }} shadows>
         <fog attach="fog" args={['#171720', 10, 50]} />
         <color attach="background" args={['#171720']} />
-        <ambientLight intensity={0.1} />
-        <spotLight position={[10, 10, 10]} angle={0.5} intensity={1} castShadow penumbra={1} />
+        <ambientLight intensity={0.1 * Math.PI} />
+        <spotLight
+          angle={0.5}
+          castShadow
+          decay={0}
+          intensity={Math.PI}
+          penumbra={1}
+          position={[10, 10, 10]}
+        />
         <Physics
           broadphase="SAP"
           defaultContactMaterial={{ contactEquationRelaxation: 4, friction: 1e-3 }}

packages/react-three-cannon-examples/src/demos/demo-Chain.tsx

@@ -154,19 +154,18 @@ function ChainScene(): JSX.Element {
 
   return (
     <>
-      <Canvas
-        shadows
-        camera={{ fov: 50, position: [0, 5, 20] }}
-        onPointerMissed={reset}
-        gl={{
-          // todo: stop using legacy lights
-          useLegacyLights: true,
-        }}
-      >
+      <Canvas shadows camera={{ fov: 50, position: [0, 5, 20] }} onPointerMissed={reset}>
         <color attach="background" args={['#171720']} />
-        <ambientLight intensity={0.5} />
-        <pointLight position={[-10, -10, -10]} />
-        <spotLight position={[10, 10, 10]} angle={0.8} penumbra={1} intensity={1} castShadow />
+        <ambientLight intensity={0.5 * Math.PI} />
+        <pointLight position={[-10, -10, -10]} intensity={1 * Math.PI} decay={0} />
+        <spotLight
+          position={[10, 10, 10]}
+          angle={0.8}
+          penumbra={1}
+          intensity={1 * Math.PI}
+          decay={0}
+          castShadow
+        />
         <Physics gravity={[0, -40, 0]} allowSleep={false}>
           <PointerHandle size={1.5}>
             <Chain length={7} />

packages/react-three-cannon-examples/src/demos/demo-CompoundBody.tsx

@@ -99,15 +99,7 @@ export default function (): JSX.Element {
   }
 
   return (
-    <Canvas
-      shadows
-      camera={{ fov: 50, position: [-2, 1, 7] }}
-      gl={{
-        alpha: false,
-        // todo: stop using legacy lights
-        useLegacyLights: true,
-      }}
-    >
+    <Canvas shadows camera={{ fov: 50, position: [-2, 1, 7] }}>
       <color attach="background" args={['#f6d186']} />
       <hemisphereLight intensity={0.35} />
       <spotLight

packages/react-three-cannon-examples/src/demos/demo-Constraints.tsx

@@ -65,13 +65,7 @@ const style = {
 export default () => {
   return (
     <>
-      <Canvas
-        camera={{ fov: 50, position: [0, 0, 8] }}
-        gl={{
-          // todo: stop using legacy lights
-          useLegacyLights: true,
-        }}
-      >
+      <Canvas camera={{ fov: 50, position: [0, 0, 8] }}>
         <color attach="background" args={['#171720']} />
         <Physics gravity={[0, -40, 0]} allowSleep={false}>
           <BoxAndBall />