Update with-three-js example (vercel#24857)

## Changes

- Update dependencies
- Use new `useAnimations` hook
- Remove next-transpile-modules in favour of drei
- Refactor Components
- Remove dynamic import
- Enable webpack5 (by removing `next.config.js`)
- Removed missing key warning

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [x] Make sure the linting passes

examples/with-three-js/components/Bird.js

@@ -1,44 +1,40 @@
-import { useRef, useState, useEffect } from 'react'
-import * as THREE from 'three'
+import { useEffect } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { useAnimations, useGLTF } from '@react-three/drei'
 
-import { useFrame, useLoader } from 'react-three-fiber'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+export default function Bird({ speed, factor, url, ...props }) {
+  const { nodes, animations } = useGLTF(url)
+  const { ref, mixer } = useAnimations(animations)
 
-const Bird = ({ speed, factor, url, ...props }) => {
-  const gltf = useLoader(GLTFLoader, url)
-  const group = useRef()
-  const [mixer] = useState(() => new THREE.AnimationMixer())
-
-  useEffect(
-    () => void mixer.clipAction(gltf.animations[0], group.current).play(),
-    [gltf.animations, mixer]
-  )
+  useEffect(() => void mixer.clipAction(animations[0], ref.current).play(), [
+    mixer,
+    animations,
+    ref,
+  ])
 
   useFrame((state, delta) => {
-    group.current.rotation.y +=
+    ref.current.rotation.y +=
       Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
     mixer.update(delta * speed)
   })
 
   return (
-    <group ref={group}>
+    <group ref={ref}>
       <scene name="Scene" {...props}>
         <mesh
           name="Object_0"
-          morphTargetDictionary={gltf.nodes.Object_0.morphTargetDictionary}
-          morphTargetInfluences={gltf.nodes.Object_0.morphTargetInfluences}
+          morphTargetDictionary={nodes.Object_0.morphTargetDictionary}
+          morphTargetInfluences={nodes.Object_0.morphTargetInfluences}
           rotation={[1.5707964611537577, 0, 0]}
         >
-          <bufferGeometry attach="geometry" {...gltf.nodes.Object_0.geometry} />
+          <bufferGeometry attach="geometry" {...nodes.Object_0.geometry} />
           <meshStandardMaterial
             attach="material"
-            {...gltf.nodes.Object_0.material}
+            {...nodes.Object_0.material}
             name="Material_0_COLOR_0"
           />
         </mesh>
       </scene>
     </group>
   )
 }
-
-export default Bird

examples/with-three-js/components/Box.js

@@ -0,0 +1,29 @@
+import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { Box as NativeBox } from '@react-three/drei'
+
+export default function Box(props) {
+  const mesh = useRef()
+
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+
+  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
+
+  return (
+    <NativeBox
+      args={[1, 1, 1]}
+      {...props}
+      ref={mesh}
+      scale={active ? [6, 6, 6] : [5, 5, 5]}
+      onClick={() => setActive(!active)}
+      onPointerOver={() => setHover(true)}
+      onPointerOut={() => setHover(false)}
+    >
+      <meshStandardMaterial
+        attach="material"
+        color={hovered ? '#2b6c76' : '#720b23'}
+      />
+    </NativeBox>
+  )
+}

examples/with-three-js/package.json

@@ -8,15 +8,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "@react-three/drei": "3.8.6",
-    "next": "10.0.7",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-three-fiber": "5.3.19",
-    "three": "0.126.0"
-  },
-  "devDependencies": {
-    "next-transpile-modules": "6.3.0"
+    "@react-three/drei": "4.3.3",
+    "@react-three/fiber": "6.0.19",
+    "next": "10.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "three": "0.128.0"
   },
   "license": "MIT"
 }

examples/with-three-js/pages/birds.js

@@ -1,50 +1,45 @@
-import dynamic from 'next/dynamic'
 import { Suspense } from 'react'
-import { Canvas } from 'react-three-fiber'
+import { Canvas } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
+import Bird from '../components/Bird'
 
-const Bird = dynamic(() => import('../components/Bird'), { ssr: false })
-
-const Birds = () => {
-  return new Array(5).fill().map((_, i) => {
-    const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
-    const y = -10 + Math.random() * 20
-    const z = -5 + Math.random() * 10
-    const bird = ['stork', 'parrot', 'flamingo'][Math.round(Math.random() * 2)]
-    let speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
-    let factor =
-      bird === 'stork'
-        ? 0.5 + Math.random()
-        : bird === 'flamingo'
-        ? 0.25 + Math.random()
-        : 1 + Math.random() - 0.5
-
-    return (
-      <Bird
-        key={i}
-        position={[x, y, z]}
-        rotation={[0, x > 0 ? Math.PI : 0, 0]}
-        speed={speed}
-        factor={factor}
-        url={`/glb/${bird}.glb`}
-      />
-    )
-  })
-}
-
-const BirdsPage = (props) => {
+export default function BirdsPage() {
   return (
     <>
       <Canvas camera={{ position: [0, 0, 35] }}>
         <ambientLight intensity={2} />
         <pointLight position={[40, 40, 40]} />
         <OrbitControls />
         <Suspense fallback={null}>
-          <Birds />
+          {new Array(6).fill().map((_, i) => {
+            const x =
+              (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
+            const y = -10 + Math.random() * 20
+            const z = -5 + Math.random() * 10
+            const bird = ['stork', 'parrot', 'flamingo'][
+              Math.round(Math.random() * 2)
+            ]
+            let speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
+            let factor =
+              bird === 'stork'
+                ? 0.5 + Math.random()
+                : bird === 'flamingo'
+                ? 0.25 + Math.random()
+                : 1 + Math.random() - 0.5
+
+            return (
+              <Bird
+                key={i}
+                position={[x, y, z]}
+                rotation={[0, x > 0 ? Math.PI : 0, 0]}
+                speed={speed}
+                factor={factor}
+                url={`/glb/${bird}.glb`}
+              />
+            )
+          })}
         </Suspense>
       </Canvas>
     </>
   )
 }
-
-export default BirdsPage

examples/with-three-js/pages/boxes.js

@@ -1,46 +1,20 @@
-import { useRef, useState } from 'react'
-import { Canvas, useFrame } from 'react-three-fiber'
-import { OrbitControls, Box } from '@react-three/drei'
-
-const MyBox = (props) => {
-  const mesh = useRef()
-
-  const [hovered, setHover] = useState(false)
-  const [active, setActive] = useState(false)
-
-  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+import Box from '../components/Box'
 
+export default function BoxesPage() {
   return (
-    <Box
-      args={[1, 1, 1]}
-      {...props}
-      ref={mesh}
-      scale={active ? [6, 6, 6] : [5, 5, 5]}
-      onClick={() => setActive(!active)}
-      onPointerOver={() => setHover(true)}
-      onPointerOut={() => setHover(false)}
-    >
-      <meshStandardMaterial
-        attach="material"
-        color={hovered ? '#2b6c76' : '#720b23'}
-      />
-    </Box>
+    <>
+      <h1>Click on me - Hover me :)</h1>
+      <Canvas camera={{ position: [0, 0, 35] }}>
+        <ambientLight intensity={2} />
+        <pointLight position={[40, 40, 40]} />
+        <Box position={[10, 0, 0]} />
+        <Box position={[-10, 0, 0]} />
+        <Box position={[0, 10, 0]} />
+        <Box position={[0, -10, 0]} />
+        <OrbitControls />
+      </Canvas>
+    </>
   )
 }
-
-const BoxesPage = () => {
-  return [
-    <h1>Click on me - Hover me :)</h1>,
-    <Canvas camera={{ position: [0, 0, 35] }}>
-      <ambientLight intensity={2} />
-      <pointLight position={[40, 40, 40]} />
-      <MyBox position={[10, 0, 0]} />
-      <MyBox position={[-10, 0, 0]} />
-      <MyBox position={[0, 10, 0]} />
-      <MyBox position={[0, -10, 0]} />
-      <OrbitControls />
-    </Canvas>,
-  ]
-}
-
-export default BoxesPage

examples/with-three-js/pages/index.js

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-const Index = () => {
+export default function IndexPage() {
   return (
     <div className="main">
       <Link href="/birds">
@@ -12,5 +12,3 @@ const Index = () => {
     </div>
   )
 }
-
-export default Index