40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import { Canvas, useFrame } from '@react-three/fiber'
|
|
import { OrbitControls } from '@react-three/drei'
|
|
import { useRef, useState } from 'react'
|
|
|
|
function Box({ position }) {
|
|
const ref = useRef()
|
|
const [hovered, setHovered] = useState(false)
|
|
const [clicked, setClicked] = useState(false)
|
|
|
|
useFrame(() => {
|
|
ref.current.rotation.x += 0.01
|
|
ref.current.rotation.y += 0.01
|
|
})
|
|
|
|
return (
|
|
<mesh
|
|
ref={ref}
|
|
position={position}
|
|
scale={clicked ? 1.5 : 1}
|
|
onClick={() => setClicked(!clicked)}
|
|
onPointerOver={() => setHovered(true)}
|
|
onPointerOut={() => setHovered(false)}
|
|
>
|
|
<boxGeometry args={[1, 1, 1]} />
|
|
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
|
|
</mesh>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Canvas style={{ background: '#f0f0f0' }}>
|
|
<ambientLight intensity={Math.PI / 2} />
|
|
<pointLight position={[-10, -10, -10]} intensity={Math.PI} />
|
|
<Box position={[-1.2, 0, 0]} />
|
|
<Box position={[1.2, 0, 0]} />
|
|
<OrbitControls />
|
|
</Canvas>
|
|
)
|
|
}
|