Spaces:
Build error
Build error
| import React, { useState, useRef, useEffect } from 'react'; | |
| import { Canvas } from '@react-three/fiber'; | |
| import { OrbitControls, Stars } from '@react-three/drei'; | |
| import * as THREE from 'three'; | |
| import Navbar from '../components/Navbar'; | |
| import PlanetInfo from '../components/PlanetInfo'; | |
| import StarField from '../components/StarField'; | |
| import Sun from '../components/Sun'; | |
| import Planet from '../components/Planet'; | |
| export default function SolarSystem() { | |
| const [selectedPlanet, setSelectedPlanet] = useState(null); | |
| const [speed, setSpeed] = useState(1); | |
| const [cameraDistance, setCameraDistance] = useState(100); | |
| const [viewMode, setViewMode] = useState('solar-system'); | |
| const [planetData, setPlanetData] = useState(null); | |
| // Planet data configuration | |
| const planets = [ | |
| { | |
| name: "Mercury", | |
| size: 2, | |
| distance: 30, | |
| speed: 0.04, | |
| color: "#A5A5A5", | |
| texture: null, | |
| onClick: () => handlePlanetClick("mercury") | |
| }, | |
| { | |
| name: "Venus", | |
| size: 3.5, | |
| distance: 45, | |
| speed: 0.03, | |
| color: "#E3BB76", | |
| texture: null, | |
| onClick: () => handlePlanetClick("venus") | |
| }, | |
| { | |
| name: "Earth", | |
| size: 3.6, | |
| distance: 60, | |
| speed: 0.02, | |
| color: "#22A6B3", | |
| texture: null, | |
| onClick: () => handlePlanetClick("earth") | |
| }, | |
| { | |
| name: "Mars", | |
| size: 2.8, | |
| distance: 75, | |
| speed: 0.018, | |
| color: "#FF6B6B", | |
| texture: null, | |
| onClick: () => handlePlanetClick("mars") | |
| }, | |
| { | |
| name: "Jupiter", | |
| size: 10, | |
| distance: 100, | |
| speed: 0.012, | |
| color: "#DDA15E", | |
| texture: null, | |
| onClick: () => handlePlanetClick("jupiter") | |
| }, | |
| { | |
| name: "Saturn", | |
| size: 8.5, | |
| distance: 130, | |
| speed: 0.01, | |
| color: "#BC8F5F", | |
| texture: null, | |
| hasRings: true, | |
| onClick: () => handlePlanetClick("saturn") | |
| }, | |
| { | |
| name: "Uranus", | |
| size: 6, | |
| distance: 160, | |
| speed: 0.008, | |
| color: "#7ED6DF", | |
| texture: null, | |
| onClick: () => handlePlanetClick("uranus") | |
| }, | |
| { | |
| name: "Neptune", | |
| size: 5.8, | |
| distance: 190, | |
| speed: 0.006, | |
| color: "#219EBD", | |
| texture: null, | |
| onClick: () => handlePlanetClick("neptune") | |
| } | |
| ]; | |
| const handlePlanetClick = (planetName) => { | |
| setSelectedPlanet(planetName); | |
| // Update camera position for better view | |
| setCameraDistance(40); | |
| }; | |
| const handleClosePlanetInfo = () => { | |
| setSelectedPlanet(null); | |
| setCameraDistance(100); | |
| }; | |
| return ( | |
| <div className="min-h-screen bg-black text-white font-sans overflow-hidden"> | |
| {/* Navbar */} | |
| <Navbar | |
| setView={setViewMode} | |
| speed={speed} | |
| setSpeed={setSpeed} | |
| /> | |
| {/* 3D Canvas */} | |
| <div className="h-screen w-full relative"> | |
| <Canvas camera={{ position: [0, 80, 100], fov: 60 }}> | |
| {/* Lights */} | |
| <ambientLight intensity={0.2} /> | |
| <pointLight position={[100, 100, 50]} intensity={1} color="#FFFFFF" /> | |
| {/* Controls */} | |
| <OrbitControls | |
| enablePan={false} | |
| minDistance={20} | |
| maxDistance={500} | |
| rotateSpeed={0.5} | |
| zoomSpeed={0.8} | |
| dampingFactor={0.1} | |
| /> | |
| {/* Starfield */} | |
| <StarField count={2000} /> | |
| {/* Sun */} | |
| <Sun | |
| onClick={() => handlePlanetClick('sun')} | |
| /> | |
| {/* Planets */} | |
| {planets.map((planet) => ( | |
| <Planet | |
| key={planet.name} | |
| name={planet.name} | |
| size={planet.size} | |
| distance={planet.distance} | |
| speed={planet.speed * speed} | |
| color={planet.color} | |
| texture={planet.texture} | |
| onClick={planet.onClick} | |
| hasRings={planet.hasRings} | |
| /> | |
| ))} | |
| {/* Orbit lines for clarity */} | |
| <group> | |
| {planets.map((planet, i) => ( | |
| <mesh key={`orbit-${i}`} rotation={[-Math.PI / 2, 0, 0]}> | |
| <ringGeometry args={[planet.distance - 0.2, planet.distance + 0.2, 64]} /> | |
| <meshBasicMaterial color="#FFFFFF" transparent opacity={0.05} /> | |
| </mesh> | |
| ))} | |
| </group> | |
| </Canvas> | |
| {/* Planet Info Modal */} | |
| {selectedPlanet && ( | |
| <PlanetInfo | |
| planet={selectedPlanet} | |
| onClose={handleClosePlanetInfo} | |
| /> | |
| )} | |
| {/* Info Panel */} | |
| <div className="absolute bottom-6 left-6 right-6 md:left-10 md:right-auto md:w-80 bg-black/60 backdrop-blur-md rounded-xl border border-white/10 p-6 z-10"> | |
| <h2 className="text-xl font-bold mb-3 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent"> | |
| Interactive Solar System | |
| </h2> | |
| <p className="text-gray-300 mb-4 text-sm"> | |
| Click on any planet to learn more about it. Use your mouse to rotate, zoom, and explore the solar system. | |
| </p> | |
| <div className="space-y-2 text-xs text-gray-400"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-3 h-3 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(253,224,71,0.8)]"></div> | |
| <span>Click the Sun or planets to explore</span> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-3 h-3 rounded-full bg-blue-500"></div> | |
| <span>Earth is our home planet</span> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-3 h-3 rounded-full bg-red-500"></div> | |
| <span>Mars - the Red Planet</span> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Footer Attribution */} | |
| <div className="absolute bottom-4 right-4 z-10"> | |
| <a | |
| href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="text-xs text-gray-500 hover:text-gray-300 transition-colors" | |
| > | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } |