Merge pull request #439 from isaac-mason/chore/updates

chore: update @types/three dev dependency, update examples deps
pmndrs · Aug 5, 2023 · facd443 · facd443 · vercel · Aug 5, 2023
2 parents be3b7a4 + c43a2f6
commit facd443
Show file tree

Hide file tree

Showing 22 changed files with 4,129 additions and 3,949 deletions.
diff --git a/.changeset/happy-rats-drum.md b/.changeset/happy-rats-drum.md
@@ -0,0 +1,6 @@
+---
+"@pmndrs/cannon-worker-api": minor
+"@react-three/cannon": minor
+---
+
+chore: update @types/three dev dependency
diff --git a/packages/cannon-worker-api/package.json b/packages/cannon-worker-api/package.json
@@ -37,7 +37,7 @@
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/events": "^3.0.0",
-    "@types/three": "^0.139.0",
+    "@types/three": "^0.155.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "cannon-es": "^0.20.0",

diff --git a/packages/react-three-cannon-examples/package.json b/packages/react-three-cannon-examples/package.json
@@ -21,14 +21,14 @@
   ],
   "devDependencies": {
     "@react-three/cannon": "^6.5.2",
-    "@react-three/drei": "^9.4.3",
-    "@react-three/fiber": "^8.0.11",
+    "@react-three/drei": "^9.80.1",
+    "@react-three/fiber": "^8.13.6",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
-    "@types/three": "^0.139.0",
+    "@types/three": "^0.155.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-react": "^2.2.0",
@@ -46,8 +46,8 @@
     "react-is": "^18.0.0",
     "react-router-dom": "^6.2.2",
     "styled-components": "^5.3.5",
-    "three": "^0.139.1",
-    "three-stdlib": "^2.17.3",
+    "three": "^0.155.0",
+    "three-stdlib": "^2.24.1",
     "typescript": "^4.6.3",
     "vite": "^3.2.2",
     "vite-react-jsx": "^1.1.2",

diff --git a/packages/react-three-cannon-examples/src/demos/MondayMorning/index.tsx b/packages/react-three-cannon-examples/src/demos/MondayMorning/index.tsx
@@ -9,12 +9,7 @@ import {
   usePointToPointConstraint,
   useSphere,
 } from '@react-three/cannon'
-import type {
-  BoxBufferGeometryProps,
-  MeshProps,
-  MeshStandardMaterialProps,
-  ThreeEvent,
-} from '@react-three/fiber'
+import type { BoxGeometryProps, MeshProps, MeshStandardMaterialProps, ThreeEvent } from '@react-three/fiber'
 import { Canvas, useFrame, useLoader } from '@react-three/fiber'
 import type { ReactNode, RefObject } from 'react'
 import {
@@ -56,14 +51,14 @@ function useDragConstraint(child: RefObject<Object3D>) {
 }
 
 type BoxProps = Omit<MeshProps, 'args'> &
-  Pick<BoxBufferGeometryProps, 'args'> &
+  Pick<BoxGeometryProps, 'args'> &
   Pick<MeshStandardMaterialProps, 'color' | 'opacity' | 'transparent'>
 
 const Box = forwardRef<Mesh, BoxProps>(
   ({ args = [1, 1, 1], children, color = 'white', opacity = 1, transparent = false, ...props }, ref) => {
     return (
       <mesh castShadow receiveShadow ref={ref} {...props}>
-        <boxBufferGeometry args={args} />
+        <boxGeometry args={args} />
         <meshStandardMaterial color={color} opacity={opacity} transparent={transparent} />
         {children}
       </mesh>
@@ -163,7 +158,7 @@ function Plane(props: PlaneProps) {
   const [ref] = usePlane(() => ({ ...props }), useRef<Mesh>(null))
   return (
     <mesh ref={ref} receiveShadow>
-      <planeBufferGeometry args={[1000, 1000]} />
+      <planeGeometry args={[1000, 1000]} />
       <meshStandardMaterial color="#171720" />
     </mesh>
   )
@@ -295,7 +290,7 @@ const Lamp = () => {
   return (
     <>
       <mesh ref={lamp} {...bind}>
-        <coneBufferGeometry attach="geometry" args={[2, 2.5, 32]} />
+        <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 />
@@ -315,7 +310,7 @@ const Cursor = () => {
 
   return (
     <mesh ref={ref}>
-      <sphereBufferGeometry args={[0.5, 32, 32]} />
+      <sphereGeometry args={[0.5, 32, 32]} />
       <meshBasicMaterial fog={false} depthTest={false} transparent opacity={0.5} />
     </mesh>
   )
@@ -327,6 +322,10 @@ 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]} />

diff --git a/packages/react-three-cannon-examples/src/demos/Pingpong/index.tsx b/packages/react-three-cannon-examples/src/demos/Pingpong/index.tsx
@@ -112,7 +112,7 @@ function Ball() {
   const [ref] = useSphere(() => ({ args: [0.5], mass: 1, position: [0, 5, 0] }), useRef<Mesh>(null))
   return (
     <mesh castShadow ref={ref}>
-      <sphereBufferGeometry args={[0.5, 64, 64]} />
+      <sphereGeometry args={[0.5, 64, 64]} />
       <meshStandardMaterial map={map} />
     </mesh>
   )
@@ -152,6 +152,10 @@ export default function () {
         shadows
         camera={{ fov: 50, position: [0, 5, 12] }}
         onPointerMissed={() => welcome && reset(false)}
+        gl={{
+          // todo: stop using legacy lights
+          useLegacyLights: true,
+        }}
       >
         <color attach="background" args={['#171720']} />
         <ambientLight intensity={0.5} />
@@ -181,7 +185,7 @@ export default function () {
           allowSleep={false}
         >
           <mesh position={[0, 0, -10]} receiveShadow>
-            <planeBufferGeometry args={[1000, 1000]} />
+            <planeGeometry args={[1000, 1000]} />
             <meshPhongMaterial color="#172017" />
           </mesh>
           <ContactGround />

diff --git a/packages/react-three-cannon-examples/src/demos/Raycast/index.tsx b/packages/react-three-cannon-examples/src/demos/Raycast/index.tsx
@@ -26,11 +26,11 @@ function Plane(props: GroupProps) {
   return (
     <group {...props}>
       <mesh>
-        <planeBufferGeometry args={[8, 8]} />
+        <planeGeometry args={[8, 8]} />
         <meshBasicMaterial color="#FFD3A5" />
       </mesh>
       <mesh receiveShadow>
-        <planeBufferGeometry args={[8, 8]} />
+        <planeGeometry args={[8, 8]} />
         <shadowMaterial color="#f8cd7e" />
       </mesh>
     </group>
@@ -49,7 +49,7 @@ function Sphere({ radius, position }: SphereProps) {
   })
   return (
     <mesh castShadow ref={ref}>
-      <sphereBufferGeometry args={[radius, 32, 32]} />
+      <sphereGeometry args={[radius, 32, 32]} />
       <meshNormalMaterial />
     </mesh>
   )
@@ -67,7 +67,7 @@ function Cube({ size, position }: CubeProps) {
   })
   return (
     <mesh castShadow ref={ref} position={position}>
-      <boxBufferGeometry args={size} />
+      <boxGeometry args={size} />
       <meshNormalMaterial />
     </mesh>
   )
@@ -155,7 +155,14 @@ const Camera = () => {
 }
 
 export default () => (
-  <Canvas shadows gl={{ alpha: false }}>
+  <Canvas
+    shadows
+    gl={{
+      alpha: false,
+      // todo: stop using legacy lights
+      useLegacyLights: true,
+    }}
+  >
     <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
@@ -35,7 +35,7 @@ function Pillar(props: CylinderProps) {
   )
   return (
     <mesh ref={ref} castShadow>
-      <cylinderBufferGeometry args={args} />
+      <cylinderGeometry args={args} />
       <meshNormalMaterial />
     </mesh>
   )
@@ -54,7 +54,14 @@ const VehicleScene = () => {
 
   return (
     <>
-      <Canvas shadows camera={{ fov: 50, position: [0, 5, 15] }}>
+      <Canvas
+        shadows
+        camera={{ fov: 50, position: [0, 5, 15] }}
+        gl={{
+          // todo: stop using legacy lights
+          useLegacyLights: true,
+        }}
+      >
         <fog attach="fog" args={['#171720', 10, 50]} />
         <color attach="background" args={['#171720']} />
         <ambientLight intensity={0.1} />

diff --git a/packages/react-three-cannon-examples/src/demos/demo-Chain.tsx b/packages/react-three-cannon-examples/src/demos/demo-Chain.tsx
@@ -60,7 +60,7 @@ function ChainLink({
   return (
     <>
       <mesh ref={ref}>
-        <cylinderBufferGeometry args={args} />
+        <cylinderGeometry args={args} />
         <meshStandardMaterial color={color} />
       </mesh>
       <parent.Provider value={{ position, ref }}>{children}</parent.Provider>
@@ -109,7 +109,7 @@ function PointerHandle({ children, size }: PropsWithChildren<{ size: number }>):
   return (
     <group>
       <mesh ref={ref}>
-        <boxBufferGeometry args={args} />
+        <boxGeometry args={args} />
         <meshStandardMaterial />
       </mesh>
       <parent.Provider value={{ position, ref }}>{children}</parent.Provider>
@@ -127,7 +127,7 @@ function StaticHandle({ children, position, radius }: PropsWithChildren<StaticHa
   return (
     <group>
       <mesh ref={ref}>
-        <sphereBufferGeometry args={[radius, 64, 64]} />
+        <sphereGeometry args={[radius, 64, 64]} />
         <meshStandardMaterial />
       </mesh>
       <parent.Provider value={{ position, ref }}>{children}</parent.Provider>
@@ -154,7 +154,15 @@ function ChainScene(): JSX.Element {
 
   return (
     <>
-      <Canvas shadows camera={{ fov: 50, position: [0, 5, 20] }} onPointerMissed={reset}>
+      <Canvas
+        shadows
+        camera={{ fov: 50, position: [0, 5, 20] }}
+        onPointerMissed={reset}
+        gl={{
+          // todo: stop using legacy lights
+          useLegacyLights: true,
+        }}
+      >
         <color attach="background" args={['#171720']} />
         <ambientLight intensity={0.5} />
         <pointLight position={[-10, -10, -10]} />

diff --git a/packages/react-three-cannon-examples/src/demos/demo-CompoundBody.tsx b/packages/react-three-cannon-examples/src/demos/demo-CompoundBody.tsx
@@ -9,11 +9,11 @@ function Plane(props: PlaneProps): JSX.Element {
   return (
     <group ref={ref}>
       <mesh>
-        <planeBufferGeometry args={[8, 8]} />
+        <planeGeometry args={[8, 8]} />
         <meshBasicMaterial color="#ffb385" />
       </mesh>
       <mesh receiveShadow>
-        <planeBufferGeometry args={[8, 8]} />
+        <planeGeometry args={[8, 8]} />
         <shadowMaterial color="lightsalmon" />
       </mesh>
     </group>
@@ -64,11 +64,11 @@ function CompoundBody({
   return (
     <group ref={ref}>
       <mesh castShadow>
-        <boxBufferGeometry args={boxSize} />
+        <boxGeometry args={boxSize} />
         <meshNormalMaterial />
       </mesh>
       <mesh castShadow position={[1, 0, 0]}>
-        <sphereBufferGeometry args={[sphereRadius, 16, 16]} />
+        <sphereGeometry args={[sphereRadius, 16, 16]} />
         <meshNormalMaterial />
       </mesh>
     </group>
@@ -99,7 +99,15 @@ export default function (): JSX.Element {
   }
 
   return (
-    <Canvas shadows gl={{ alpha: false }} camera={{ fov: 50, position: [-2, 1, 7] }}>
+    <Canvas
+      shadows
+      camera={{ fov: 50, position: [-2, 1, 7] }}
+      gl={{
+        alpha: false,
+        // todo: stop using legacy lights
+        useLegacyLights: true,
+      }}
+    >
       <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
@@ -17,7 +17,7 @@ const Box = forwardRef<Mesh, BoxProps>((props, fwdRef) => {
   )
   return (
     <mesh ref={ref}>
-      <boxBufferGeometry args={args} />
+      <boxGeometry args={args} />
       <meshNormalMaterial />
     </mesh>
   )
@@ -30,7 +30,7 @@ const Ball = forwardRef<Mesh, SphereProps>((props, fwdRef) => {
   )
   return (
     <mesh ref={ref}>
-      <sphereBufferGeometry args={[0.5, 64, 64]} />
+      <sphereGeometry args={[0.5, 64, 64]} />
       <meshNormalMaterial />
     </mesh>
   )
@@ -65,7 +65,13 @@ const style = {
 export default () => {
   return (
     <>
-      <Canvas camera={{ fov: 50, position: [0, 0, 8] }}>
+      <Canvas
+        camera={{ fov: 50, position: [0, 0, 8] }}
+        gl={{
+          // todo: stop using legacy lights
+          useLegacyLights: true,
+        }}
+      >
         <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
@@ -49,7 +49,7 @@ function Cone({ position, rotation, sides }: ConeProps) {
 
   return (
     <mesh castShadow {...{ geometry, position, ref, rotation }}>
-      <coneBufferGeometry args={[0.7, 0.7, sides, 1]} />
+      <coneGeometry args={[0.7, 0.7, sides, 1]} />
       <meshNormalMaterial />
     </mesh>
   )
@@ -66,7 +66,7 @@ function Cube({ position, rotation, size }: CubeProps) {
   const [ref] = useConvexPolyhedron(() => ({ args, mass: 100, position, rotation }), useRef<Mesh>(null))
   return (
     <mesh castShadow receiveShadow {...{ geometry, position, ref, rotation }}>
-      <boxBufferGeometry args={[size, size, size]} />
+      <boxGeometry args={[size, size, size]} />
       <meshPhysicalMaterial color="rebeccapurple" />
     </mesh>
   )
@@ -76,7 +76,7 @@ function Plane(props: PlaneProps) {
   const [ref] = usePlane(() => ({ type: 'Static', ...props }), useRef<Mesh>(null))
   return (
     <mesh ref={ref} receiveShadow>
-      <planeBufferGeometry args={[10, 10]} />
+      <planeGeometry args={[10, 10]} />
       <shadowMaterial color="#171717" />
     </mesh>
   )
@@ -95,7 +95,14 @@ function ConvexPolyhedron() {
 
   return (
     <>
-      <Canvas shadows camera={{ fov: 50, position: [-1, 1, 5] }}>
+      <Canvas
+        shadows
+        camera={{ fov: 50, position: [-1, 1, 5] }}
+        gl={{
+          // todo: stop using legacy lights
+          useLegacyLights: true,
+        }}
+      >
         <color attach="background" args={['lightpink']} />
         <spotLight
           position={[15, 15, 15]}