Compare commits

..

2 Commits

Author SHA1 Message Date
ea91710510 delete lock file 2024-10-10 21:37:01 -04:00
7bf5ff926a separate App 2024-09-30 10:41:31 -04:00
4 changed files with 7 additions and 46 deletions

View File

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

View File

@ -1,39 +1,8 @@
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)}>
le count {count}
</button>
<ThreeStage/>
</>;
return <button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>;
}

View File

@ -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>);

View File

@ -4,9 +4,4 @@ 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'
}
}
});
})