[dev] update version of package and adapte code

app/blob/page.jsx

@@ -1,24 +1,10 @@
 'use client'
 
 import dynamic from 'next/dynamic'
-
+import { View } from '@react-three/drei'
 const Blob = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Blob), { ssr: false })
-const View = dynamic(() => import('@/components/canvas/View').then((mod) => mod.View), {
-  ssr: false,
-  loading: () => (
-    <div className='flex h-96 w-full flex-col items-center justify-center'>
-      <svg className='-ml-1 mr-3 h-5 w-5 animate-spin text-black' fill='none' viewBox='0 0 24 24'>
-        <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' />
-        <path
-          className='opacity-75'
-          fill='currentColor'
-          d='M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
-        />
-      </svg>
-    </div>
-  ),
-})
-const Common = dynamic(() => import('@/components/canvas/View').then((mod) => mod.Common), { ssr: false })
+
+const Common = dynamic(() => import('@/components/canvas/Common').then((mod) => mod.Common), { ssr: false })
 
 export default function Page() {
   return (

app/page.jsx

@@ -2,26 +2,12 @@
 
 import dynamic from 'next/dynamic'
 import { Suspense } from 'react'
+import { View } from '@react-three/drei'
 
 const Logo = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Logo), { ssr: false })
 const Dog = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Dog), { ssr: false })
 const Duck = dynamic(() => import('@/components/canvas/Examples').then((mod) => mod.Duck), { ssr: false })
-const View = dynamic(() => import('@/components/canvas/View').then((mod) => mod.View), {
-  ssr: false,
-  loading: () => (
-    <div className='flex h-96 w-full flex-col items-center justify-center'>
-      <svg className='-ml-1 mr-3 h-5 w-5 animate-spin text-black' fill='none' viewBox='0 0 24 24'>
-        <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' />
-        <path
-          className='opacity-75'
-          fill='currentColor'
-          d='M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
-        />
-      </svg>
-    </div>
-  ),
-})
-const Common = dynamic(() => import('@/components/canvas/View').then((mod) => mod.Common), { ssr: false })
+const Common = dynamic(() => import('@/components/canvas/Common').then((mod) => mod.Common), { ssr: false })
 
 export default function Page() {
   return (
@@ -51,19 +37,19 @@ export default function Page() {
           <p className='mb-8 text-gray-600'>Drag, scroll, pinch, and rotate the canvas to explore the 3D scene.</p>
         </div>
         <div className='relative my-12 h-48 w-full py-6 sm:w-1/2 md:mb-40'>
-          <View orbit className='relative h-full  sm:h-48 sm:w-full'>
+          <View className='relative h-full  sm:h-48 sm:w-full'>
             <Suspense fallback={null}>
               <Dog scale={2} position={[0, -1.6, 0]} rotation={[0.0, -0.3, 0]} />
-              <Common color={'lightpink'} />
+              <Common color={'lightpink'} orbit />
             </Suspense>
           </View>
         </div>
         {/* second row */}
         <div className='relative my-12 h-48 w-full py-6 sm:w-1/2 md:mb-40'>
-          <View orbit className='relative h-full animate-bounce sm:h-48 sm:w-full'>
+          <View className='relative h-full animate-bounce sm:h-48 sm:w-full'>
             <Suspense fallback={null}>
               <Duck route='/blob' scale={2} position={[0, -1.6, 0]} />
-              <Common color={'lightblue'} />
+              <Common color={'lightblue'} orbit />
             </Suspense>
           </View>
         </div>

package.json

@@ -18,15 +18,14 @@
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.0.0",
-    "@react-three/drei": "^9.92.7",
-    "@react-three/fiber": "^8.15.12",
+    "@react-three/drei": "^9.120.6",
+    "@react-three/fiber": "^8.17.10",
     "glsl-random": "^0.0.5",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.160.0",
-    "three-stdlib": "^2.28.9",
-    "tunnel-rat": "^0.1.2"
+    "three": "^0.172.0",
+    "three-stdlib": "^2.28.9"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.0.4",

src/components/canvas/Common.jsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { Suspense } from 'react'
+import { PerspectiveCamera, OrbitControls } from '@react-three/drei'
+
+export const Common = ({ color, orbit }) => (
+  <Suspense fallback={null}>
+    {color && <color attach='background' args={[color]} />}
+    {orbit && <OrbitControls />}
+    <ambientLight />
+    <pointLight position={[20, 30, 10]} intensity={3} decay={0.2} />
+    <pointLight position={[-10, -10, -10]} color='blue' decay={0.2} />
+    <PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} />
+  </Suspense>
+)

src/components/canvas/Scene.jsx

@@ -1,18 +1,14 @@
 'use client'
 
 import { Canvas } from '@react-three/fiber'
-import { Preload } from '@react-three/drei'
-import { r3f } from '@/helpers/global'
+import { Preload, View } from '@react-three/drei'
 import * as THREE from 'three'
 
 export default function Scene({ ...props }) {
   // Everything defined in here will persist between route changes, only children are swapped
   return (
-    <Canvas {...props}
-      onCreated={(state) => (state.gl.toneMapping = THREE.AgXToneMapping)}
-    >
-      {/* @ts-ignore */}
-      <r3f.Out />
+    <Canvas {...props} onCreated={(state) => (state.gl.toneMapping = THREE.AgXToneMapping)}>
+      <View.Port />
       <Preload all />
     </Canvas>
   )