[example] Fix bird animations in with-three-js example (#36053)

* Fix bird animations

* Use memo for birds generation

examples/with-three-js/package.json

@@ -6,11 +6,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "@react-three/drei": "7.6.1",
-    "@react-three/fiber": "7.0.6",
+    "@react-three/drei": "9.3.4",
+    "@react-three/fiber": "8.0.10",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "three": "0.128.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "three": "0.139.2"
   }
 }

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

@@ -1,45 +1,49 @@
-import { Suspense } from 'react'
+import { Suspense, useMemo } from 'react'
 import { Canvas } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 import Bird from '../components/Bird'
 
 export default function BirdsPage() {
-  return (
-    <>
-      <Canvas camera={{ position: [0, 0, 35] }}>
-        <ambientLight intensity={2} />
-        <pointLight position={[40, 40, 40]} />
-        <OrbitControls />
-        <Suspense fallback={null}>
-          {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
+  const birds = useMemo(
+    () =>
+      new Array(10).fill().map((_, index) => {
+        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)
+        ]
+        const speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
+        const factor =
+          bird === 'stork'
+            ? 0.5 + Math.random()
+            : bird === 'flamingo'
+            ? 0.25 + Math.random()
+            : 1 + Math.random() - 0.5
+
+        return {
+          key: index,
+          position: [x, y, z],
+          rotation: [0, x > 0 ? Math.PI : 0, 0],
+          speed,
+          factor,
+          url: `/glb/${bird}.glb`,
+        }
+      }),
+    []
+  )
 
-            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>
-    </>
+  return (
+    <Canvas camera={{ position: [0, 0, 35] }}>
+      <ambientLight intensity={2} />
+      <pointLight position={[40, 40, 40]} />
+      <OrbitControls />
+      <Suspense fallback={null}>
+        {birds.map((props) => (
+          <Bird {...props} key={props.key} />
+        ))}
+      </Suspense>
+    </Canvas>
   )
 }