template/package.json

@@ -12,9 +12,10 @@
     "vite": "^5.2.8"
   },
   "dependencies": {
+    "@react-three/drei": "^9.105.4",
+    "@react-three/fiber": "^8.16.2",
     "react": "18.2",
     "react-dom": "18.2",
-    "@react-three/fiber": "^8.16.2",
     "three": "^0.163.0"
   }
-}
+}

template/src/Experience.jsx

@@ -1,7 +1,5 @@
 import { useThree, extend } from '@react-three/fiber'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
-
-extend({ OrbitControls })
+import { OrbitControls } from '@react-three/drei'
 
 export default function Experience()
 {
@@ -9,7 +7,7 @@ export default function Experience()
 
     return <>
 
-        <orbitControls args={ [ camera, gl.domElement ] } />
+        <OrbitControls />
 
         <directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
         <ambientLight intensity={ 1.5 } />
@@ -21,7 +19,7 @@ export default function Experience()
 
         <mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
             <planeGeometry />
-            <meshStandardMaterial color="greenyellow" />
+            <meshStandardMaterial color="grey" />
         </mesh>
 
     </>