45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import { Canvas, useFrame } from '@react-three/fiber'
|
|
import { useRef } from 'react'
|
|
|
|
function GroupedStructure({ position = [0, 0, 0], direction = 1 }) {
|
|
const groupRef = useRef()
|
|
|
|
useFrame((state) => {
|
|
const seconds = state.clock.elapsedTime
|
|
|
|
if (!groupRef.current) return
|
|
|
|
groupRef.current.rotation.y = direction * seconds * 0.7
|
|
groupRef.current.rotation.x = Math.sin(seconds * 1.1) * 0.2
|
|
})
|
|
|
|
return (
|
|
<group ref={groupRef} position={position}>
|
|
<mesh position={[0, -0.2, 0]}>
|
|
<boxGeometry args={[0.7, 1.6, 0.7]} />
|
|
<meshStandardMaterial color="#f6bd60" />
|
|
</mesh>
|
|
|
|
<mesh position={[0, 0.95, 0]}>
|
|
<sphereGeometry args={[0.4, 24, 24]} />
|
|
<meshStandardMaterial color="#84a59d" />
|
|
</mesh>
|
|
</group>
|
|
)
|
|
}
|
|
|
|
export default GroupedStructure
|
|
|
|
// export default function GroupApp() {
|
|
// return (
|
|
// <Canvas camera={{ fov: 60, near: 0.1, far: 100, position: [0, 1.2, 8] }}>
|
|
// <color attach="background" args={['#101418']} />
|
|
// <ambientLight intensity={0.65} />
|
|
// <directionalLight intensity={1.1} position={[4, 6, 5]} />
|
|
|
|
// <GroupedStructure position={[-1.4, 0, 0]} direction={1} />
|
|
// <GroupedStructure position={[1.4, 0, 0]} direction={-1} />
|
|
// </Canvas>
|
|
// )
|
|
// }
|