diff --git a/packages/react-three-cannon-examples/package.json b/packages/react-three-cannon-examples/package.json
index 92b1af0f..7cab3546 100755
--- a/packages/react-three-cannon-examples/package.json
+++ b/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"
 }
diff --git a/packages/react-three-cannon-examples/src/demos/MondayMorning/index.tsx b/packages/react-three-cannon-examples/src/demos/MondayMorning/index.tsx
index 1d791c9e..2d036fa1 100644
--- a/packages/react-three-cannon-examples/src/demos/MondayMorning/index.tsx
+++ b/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]} />
diff --git a/packages/react-three-cannon-examples/src/demos/Pingpong/index.tsx b/packages/react-three-cannon-examples/src/demos/Pingpong/index.tsx
index 3ee14937..931ca577 100644
--- a/packages/react-three-cannon-examples/src/demos/Pingpong/index.tsx
+++ b/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}
diff --git a/packages/react-three-cannon-examples/src/demos/Raycast/index.tsx b/packages/react-three-cannon-examples/src/demos/Raycast/index.tsx
index dae1694f..73662f23 100644
--- a/packages/react-three-cannon-examples/src/demos/Raycast/index.tsx
+++ b/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} />
diff --git a/packages/react-three-cannon-examples/src/demos/RaycastVehicle/index.tsx b/packages/react-three-cannon-examples/src/demos/RaycastVehicle/index.tsx
index 5b370f47..926e425c 100644
--- a/packages/react-three-cannon-examples/src/demos/RaycastVehicle/index.tsx
+++ b/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 }}
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Chain.tsx b/packages/react-three-cannon-examples/src/demos/demo-Chain.tsx
index 1f45778c..98e49085 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Chain.tsx
+++ b/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} />
diff --git a/packages/react-three-cannon-examples/src/demos/demo-CompoundBody.tsx b/packages/react-three-cannon-examples/src/demos/demo-CompoundBody.tsx
index 400b6a96..5ed7e999 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-CompoundBody.tsx
+++ b/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
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Constraints.tsx b/packages/react-three-cannon-examples/src/demos/demo-Constraints.tsx
index 0d52cd57..ee19f076 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Constraints.tsx
+++ b/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 />
diff --git a/packages/react-three-cannon-examples/src/demos/demo-ConvexPolyhedron.tsx b/packages/react-three-cannon-examples/src/demos/demo-ConvexPolyhedron.tsx
index 3afd689c..dff6b746 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-ConvexPolyhedron.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-ConvexPolyhedron.tsx
@@ -1,20 +1,19 @@
-import type { ConvexPolyhedronProps, PlaneProps } from '@react-three/cannon'
+import type { ConvexPolyhedronProps, PlaneProps, Triplet } from '@react-three/cannon'
 import { Physics, useConvexPolyhedron, usePlane } from '@react-three/cannon'
-import { Canvas, useLoader } from '@react-three/fiber'
+import { useGLTF } from '@react-three/drei'
+import { Canvas } from '@react-three/fiber'
 import { Suspense, useMemo, useRef, useState } from 'react'
 import type { BufferGeometry, Mesh } from 'three'
 import { BoxGeometry, ConeGeometry } from 'three'
-import { Geometry } from 'three-stdlib/deprecated/Geometry'
+import { Geometry } from 'three-stdlib'
 import type { GLTF } from 'three-stdlib/loaders/GLTFLoader'
-import { GLTFLoader } from 'three-stdlib/loaders/GLTFLoader'
 
-// Returns legacy geometry vertices, faces for ConvP
-function toConvexProps(bufferGeometry: BufferGeometry): ConvexPolyhedronProps['args'] {
+function toConvexProps(bufferGeometry: BufferGeometry): [vertices: Triplet[], faces: Triplet[]] {
   const geo = new Geometry().fromBufferGeometry(bufferGeometry)
-  // Merge duplicate vertices resulting from glTF export.
-  // Cannon assumes contiguous, closed meshes to work
   geo.mergeVertices()
-  return [geo.vertices.map((v) => [v.x, v.y, v.z]), geo.faces.map((f) => [f.a, f.b, f.c]), []]
+  const vertices: Triplet[] = geo.vertices.map((v) => [v.x, v.y, v.z])
+  const faces: Triplet[] = geo.faces.map((f) => [f.a, f.b, f.c])
+  return [vertices, faces]
 }
 
 type DiamondGLTF = GLTF & {
@@ -27,7 +26,7 @@ function Diamond({ position, rotation }: ConvexPolyhedronProps) {
     nodes: {
       Cylinder: { geometry },
     },
-  } = useLoader(GLTFLoader, '/diamond.glb') as DiamondGLTF
+  } = useGLTF('/diamond.glb') as DiamondGLTF
   const args = useMemo(() => toConvexProps(geometry), [geometry])
   const [ref] = useConvexPolyhedron(() => ({ args, mass: 100, position, rotation }), useRef<Mesh>(null))
 
@@ -92,34 +91,25 @@ const style = {
 
 function ConvexPolyhedron() {
   const [invertGravity, setInvertGravity] = useState(false)
+  const toggleInvertGravity = () => setInvertGravity(!invertGravity)
 
   return (
     <>
-      <Canvas
-        shadows
-        camera={{ fov: 50, position: [-1, 1, 5] }}
-        gl={{
-          // todo: stop using legacy lights
-          useLegacyLights: true,
-        }}
-      >
+      <Canvas camera={{ fov: 50, position: [-1, 1, 5] }} shadows>
         <color attach="background" args={['lightpink']} />
         <spotLight
-          position={[15, 15, 15]}
           angle={0.3}
-          penumbra={1}
-          intensity={2}
           castShadow
+          decay={0}
+          intensity={2 * Math.PI}
+          penumbra={1}
+          position={[15, 15, 15]}
           shadow-mapSize-width={2048}
           shadow-mapSize-height={2048}
         />
         <Suspense fallback={null}>
           <Physics gravity={[0, invertGravity ? 5 : -10, 0]}>
-            <group
-              onPointerDown={() => {
-                setInvertGravity(!invertGravity)
-              }}
-            >
+            <group onPointerDown={toggleInvertGravity}>
               <Plane rotation={[-Math.PI / 2, 0, 0]} />
               <Diamond position={[1, 5, 0]} rotation={[0.4, 0.1, 0.1]} />
               <Cone position={[-1, 5, 0.5]} rotation={[0.1, 0.2, 0.1]} sides={6} />
diff --git a/packages/react-three-cannon-examples/src/demos/demo-CubeHeap.tsx b/packages/react-three-cannon-examples/src/demos/demo-CubeHeap.tsx
index 2b17c721..5644adeb 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-CubeHeap.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-CubeHeap.tsx
@@ -11,7 +11,7 @@ function Plane(props: PlaneProps) {
   const [ref] = usePlane(() => ({ ...props }), useRef<Mesh>(null))
   return (
     <mesh ref={ref} receiveShadow>
-      <planeGeometry args={[5, 5]} />
+      <planeGeometry args={[10, 10]} />
       <shadowMaterial color="#171717" />
     </mesh>
   )
@@ -89,25 +89,19 @@ export default () => {
 
   return (
     <Canvas
-      shadows
-      gl={{
-        alpha: false,
-        // todo: stop using legacy lights
-        useLegacyLights: true,
-      }}
       camera={{ fov: 50, position: [-1, 1, 2.5] }}
-      onPointerMissed={() => setGeometry((geometry) => (geometry === 'box' ? 'sphere' : 'box'))}
       onCreated={({ scene }) => (scene.background = new Color('lightblue'))}
+      onPointerMissed={() => setGeometry((geometry) => (geometry === 'box' ? 'sphere' : 'box'))}
+      shadows
     >
-      <hemisphereLight intensity={0.35} />
+      <hemisphereLight intensity={0.35 * Math.PI} />
       <spotLight
-        position={[5, 5, 5]}
         angle={0.3}
-        penumbra={1}
-        intensity={2}
         castShadow
-        shadow-mapSize-width={256}
-        shadow-mapSize-height={256}
+        decay={0}
+        intensity={2 * Math.PI}
+        penumbra={1}
+        position={[10, 10, 10]}
       />
       <Physics broadphase="SAP">
         <Plane rotation={[-Math.PI / 2, 0, 0]} />
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Friction.tsx b/packages/react-three-cannon-examples/src/demos/demo-Friction.tsx
index f1155bb2..ede575b8 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Friction.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-Friction.tsx
@@ -177,17 +177,10 @@ function PhysicsContent() {
 
 export default () => (
   <>
-    <Canvas
-      shadows
-      camera={{ position: [-5, 3, 8] }}
-      gl={{
-        // todo: stop using legacy lights
-        useLegacyLights: true,
-      }}
-    >
+    <Canvas camera={{ position: [-5, 3, 8] }} shadows>
       <OrbitControls />
-      <pointLight position={[1, 2, 3]} castShadow />
-      <ambientLight intensity={0.2} />
+      <pointLight castShadow decay={0} intensity={Math.PI} position={[1, 2, 3]} />
+      <ambientLight intensity={0.2 * Math.PI} />
       <Physics gravity={[3, -9.81, 0]}>
         <PhysicsContent />
       </Physics>
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Heightfield.tsx b/packages/react-three-cannon-examples/src/demos/demo-Heightfield.tsx
index 2a6f9799..89cb6b4d 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Heightfield.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-Heightfield.tsx
@@ -1,24 +1,13 @@
 import type { Triplet } from '@react-three/cannon'
 import { Physics, useHeightfield, useSphere } from '@react-three/cannon'
-import type { Node } from '@react-three/fiber'
-import { Canvas, extend, useFrame, useThree } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import type { BufferGeometry, InstancedMesh, Mesh, PerspectiveCamera } from 'three'
 import { Color, Float32BufferAttribute } from 'three'
-import { OrbitControls } from 'three-stdlib/controls/OrbitControls'
 
 import niceColors from '../colors'
 
-extend({ OrbitControls })
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      orbitControls: Node<OrbitControls, typeof OrbitControls>
-    }
-  }
-}
-
 type GenerateHeightmapArgs = {
   height: number
   number: number
@@ -172,7 +161,6 @@ function Spheres({ columns, rows, spread }: { columns: number; rows: number; spr
 
 function Camera(): JSX.Element {
   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)
@@ -190,17 +178,15 @@ function Camera(): JSX.Element {
   }, [])
 
   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
         enableDamping
-        ref={controlsRef}
         args={[camera, gl.domElement]}
         dampingFactor={0.2}
         minPolarAngle={Math.PI / 3}
@@ -211,18 +197,12 @@ function Camera(): JSX.Element {
 }
 
 export default ({ scale = 10 }) => (
-  <Canvas
-    shadows
-    gl={{
-      // todo: stop using legacy lights
-      useLegacyLights: true,
-    }}
-  >
+  <Canvas shadows>
     <color attach="background" args={['#171720']} />
     <Camera />
     <Physics>
-      <ambientLight intensity={0.5} />
-      <directionalLight position={[0, 3, 0]} castShadow />
+      <ambientLight intensity={0.5 * Math.PI} />
+      <directionalLight castShadow intensity={Math.PI} position={[0, 3, 0]} />
       <Heightfield
         elementSize={(scale * 1) / 128}
         heights={generateHeightmap({
diff --git a/packages/react-three-cannon-examples/src/demos/demo-HingeMotor.tsx b/packages/react-three-cannon-examples/src/demos/demo-HingeMotor.tsx
index 33c85692..233bb8f2 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-HingeMotor.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-HingeMotor.tsx
@@ -307,14 +307,15 @@ function Scene() {
     <Suspense fallback={null}>
       <PerspectiveCamera ref={cameraRef} makeDefault position={[-40, 10, 20]} />
 
-      <hemisphereLight intensity={0.35} />
+      <hemisphereLight intensity={0.35 * Math.PI} />
       <spotLight
-        position={[20, 30, 10]}
         angle={Math.PI / 5}
-        penumbra={1}
-        intensity={1}
-        distance={180}
         castShadow
+        decay={0}
+        distance={180}
+        penumbra={1}
+        position={[20, 30, 10]}
+        intensity={Math.PI}
         shadow-mapSize-width={256}
         shadow-mapSize-height={256}
       />
@@ -342,14 +343,7 @@ const style = {
 export default () => {
   return (
     <>
-      <Canvas
-        shadows
-        gl={{
-          alpha: false,
-          // todo: stop using legacy lights
-          useLegacyLights: true,
-        }}
-      >
+      <Canvas shadows>
         <OrbitControls />
         <Scene />
       </Canvas>
diff --git a/packages/react-three-cannon-examples/src/demos/demo-KinematicCube.tsx b/packages/react-three-cannon-examples/src/demos/demo-KinematicCube.tsx
index 3f5dc31d..2bdb6e70 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-KinematicCube.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-KinematicCube.tsx
@@ -67,26 +67,19 @@ function InstancedSpheres({ number = 100 }) {
 }
 
 export default () => (
-  <Canvas
-    shadows
-    camera={{ position: [0, -12, 16] }}
-    gl={{
-      alpha: false,
-      // todo: stop using legacy lights
-      useLegacyLights: true,
-    }}
-  >
-    <hemisphereLight intensity={0.35} />
+  <Canvas camera={{ position: [0, -12, 16] }} shadows>
+    <hemisphereLight intensity={0.35 * Math.PI} />
     <spotLight
-      position={[30, 0, 30]}
       angle={0.3}
-      penumbra={1}
-      intensity={2}
       castShadow
+      decay={0}
+      intensity={2 * Math.PI}
+      penumbra={1}
+      position={[30, 0, 30]}
       shadow-mapSize-width={256}
       shadow-mapSize-height={256}
     />
-    <pointLight position={[-30, 0, -30]} intensity={0.5} />
+    <pointLight decay={0} intensity={0.5 * Math.PI} position={[-30, 0, -30]} />
     <Physics gravity={[0, 0, -30]}>
       <Plane color={niceColors[4]} position={[0, 0, 0]} rotation={[0, 0, 0]} />
       <Plane color={niceColors[1]} position={[-6, 0, 0]} rotation={[0, 0.9, 0]} />
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Paused.tsx b/packages/react-three-cannon-examples/src/demos/demo-Paused.tsx
index f0db2dd4..609dc45f 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Paused.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-Paused.tsx
@@ -57,7 +57,7 @@ function Scene({ isPaused = false }): JSX.Element {
         </Debug>
       </Physics>
 
-      <ambientLight intensity={3} />
+      <ambientLight intensity={Math.PI} />
     </>
   )
 }
diff --git a/packages/react-three-cannon-examples/src/demos/demo-SphereDebug.tsx b/packages/react-three-cannon-examples/src/demos/demo-SphereDebug.tsx
index 0ae909a6..be64ca32 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-SphereDebug.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-SphereDebug.tsx
@@ -47,8 +47,8 @@ export default function App() {
   return (
     <Canvas shadows camera={{ position: [-1, 2, 4] }}>
       <color attach="background" args={['#a6d1f6']} />
-      <hemisphereLight />
-      <directionalLight position={[5, 10, 5]} castShadow />
+      <hemisphereLight intensity={Math.PI} />
+      <directionalLight position={[5, 10, 5]} castShadow intensity={3 * Math.PI} />
       <Physics allowSleep>
         <Debug scale={1.1}>
           <Plane />
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Triggers.tsx b/packages/react-three-cannon-examples/src/demos/demo-Triggers.tsx
index 25ad4642..5be8a66e 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Triggers.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-Triggers.tsx
@@ -45,19 +45,12 @@ function Plane(props: PlaneProps) {
 export default () => {
   const [bg, setbg] = useState('#171720')
   return (
-    <Canvas
-      shadows
-      camera={{ fov: 50, position: [-10, 15, 5] }}
-      gl={{
-        // todo: stop using legacy lights
-        useLegacyLights: true,
-      }}
-    >
+    <Canvas camera={{ fov: 50, position: [-10, 15, 5] }} shadows>
       <OrbitControls />
       <fog attach="fog" args={[bg, 10, 50]} />
       <color attach="background" args={[bg]} />
-      <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>
         <BoxTrigger
           args={[4, 1, 4]}
diff --git a/packages/react-three-cannon-examples/src/demos/demo-Trimesh.tsx b/packages/react-three-cannon-examples/src/demos/demo-Trimesh.tsx
index c2cc1ce5..02948e6b 100644
--- a/packages/react-three-cannon-examples/src/demos/demo-Trimesh.tsx
+++ b/packages/react-three-cannon-examples/src/demos/demo-Trimesh.tsx
@@ -5,7 +5,7 @@ import { Canvas, invalidate } from '@react-three/fiber'
 import { useEffect, useRef, useState } from 'react'
 import type { BufferGeometry, Mesh } from 'three'
 import type { GLTF } from 'three-stdlib/loaders/GLTFLoader'
-import create from 'zustand'
+import { create } from 'zustand'
 
 type BowlGLTF = GLTF & {
   materials: {}
@@ -100,17 +100,10 @@ const style = {
 
 export default () => (
   <>
-    <Canvas
-      shadows
-      frameloop="demand"
-      gl={{
-        // todo: stop using legacy lights
-        useLegacyLights: true,
-      }}
-    >
+    <Canvas frameloop="demand" shadows>
       <color attach="background" args={['#171720']} />
-      <ambientLight intensity={0.3} />
-      <pointLight castShadow intensity={0.8} position={[100, 100, 100]} />
+      <ambientLight intensity={0.3 * Math.PI} />
+      <pointLight castShadow decay={0} intensity={0.8 * Math.PI} position={[100, 100, 100]} />
       <OrbitControls />
       <Physics shouldInvalidate={false}>
         <Bowl rotation={[0, 0, 0]} />
diff --git a/packages/react-three-cannon-examples/vite.config.ts b/packages/react-three-cannon-examples/vite.config.ts
index 80316f3d..4f1b25a0 100644
--- a/packages/react-three-cannon-examples/vite.config.ts
+++ b/packages/react-three-cannon-examples/vite.config.ts
@@ -1,4 +1,3 @@
-import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
-export default defineConfig({ plugins: [react()] })
+export default defineConfig({})