Compare commits
2 Commits
feature/re
...
master
Author | SHA1 | Date | |
---|---|---|---|
ea91710510 | |||
7bf5ff926a |
@ -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",
|
||||
|
39
src/App.tsx
39
src/App.tsx
@ -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>;
|
||||
}
|
||||
|
@ -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>);
|
@ -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'
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user