delete lock

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/fiber": "^8.17.8",
+    "@types/three": "^0.169.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "three": "^0.169.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.tsx

@@ -1,8 +1,39 @@
 import React from 'react'
+import * as Fiber from '@react-three/fiber'
+import * as Three from 'three'
+
+const ThreeBox:React.FC<{position?:Fiber.Vector3}> =(args)=> {
+  const meshRef = React.useRef<Three.Mesh>(null)
+  const [hovered, setHover] = React.useState(false)
+  const [active, setActive] = React.useState(false)
+  Fiber.useFrame((_state, delta) => meshRef.current&&(meshRef.current.rotation.x += delta))
+  return <mesh
+    position={args.position}
+    ref={meshRef}
+    scale={active ? 1.5 : 1}
+    onClick={_=> setActive(!active)}
+    onPointerOver={_=> setHover(true)}
+    onPointerOut ={_=> setHover(false)}>
+    <boxGeometry args={[1, 1, 1]} />
+    <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+  </mesh>
+}
+
+const ThreeStage:React.FC =()=> <Fiber.Canvas>
+  <ambientLight intensity={Math.PI / 2} />
+  <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+  <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+  <ThreeBox position={[-1.2, 0, 0]} />
+  <ThreeBox position={[1.2, 0, 0]} />
+</Fiber.Canvas>;
+
 
 export default function App() {
   const [count, setCount] = React.useState(0)
-  return <button onClick={() => setCount((count) => count + 1)}>
+  return <>
-    count is {count}
+    <button onClick={() => setCount((count) => count + 1)}>
-  </button>;
+      le count {count}
-}
+    </button>
+    <ThreeStage/>
+  </>;
+}

src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App';
+import App from './App'
 
 const root = document.getElementById('root');
 root && ReactDOM.createRoot(root).render(<React.StrictMode><App /></React.StrictMode>);

vite.config.ts

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  resolve: {
+    alias: {
+      'three': 'https://esm.sh/three@0.169.0'
+    }
+  }
+});