53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
|
|
import { Canvas, useFrame } from '@react-three/fiber'
|
|
import { useRef } from 'react'
|
|
|
|
function SolarSystem() {
|
|
const earthOrbitRef = useRef()
|
|
const moonOrbitRef = useRef()
|
|
const earthRef = useRef()
|
|
|
|
useFrame((_, delta) => {
|
|
earthOrbitRef.current.rotation.y += delta * 0.9
|
|
moonOrbitRef.current.rotation.y += delta * 2.2
|
|
earthRef.current.rotation.y += delta * 2.1
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<ambientLight intensity={0.2} />
|
|
<pointLight position={[0, 0, 0]} intensity={120} />
|
|
|
|
<mesh scale={[2.4, 2.4, 2.4]}>
|
|
<sphereGeometry args={[1, 32, 32]} />
|
|
<meshStandardMaterial color="#ffcc55" emissive="#ffaa00" emissiveIntensity={1.2} />
|
|
|
|
<group ref={earthOrbitRef}>
|
|
<mesh ref={earthRef} position={[8, 0, 0]} scale={[0.65, 0.65, 0.65]}>
|
|
<sphereGeometry args={[1, 32, 32]} />
|
|
<meshStandardMaterial color="#2a66ff" roughness={0.9} metalness={0.05} />
|
|
|
|
<group ref={moonOrbitRef}>
|
|
<mesh position={[2.2, 0, 0]} scale={[0.28, 0.28, 0.28]}>
|
|
<sphereGeometry args={[1, 32, 32]} />
|
|
<meshStandardMaterial color="#bbbbbb" roughness={1} metalness={0} />
|
|
</mesh>
|
|
</group>
|
|
</mesh>
|
|
</group>
|
|
</mesh>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<Canvas camera={{ fov: 60, near: 0.1, far: 100, position: [0, 0, 22] }}>
|
|
<color attach="background" args={['#000000']} />
|
|
<SolarSystem />
|
|
</Canvas>
|
|
)
|
|
}
|
|
|
|
export default App
|