3D solar system · granite-4.1-8b

Below is a **single‑file** HTML document (`index.html`) that contains everything needed to run a 3‑D solar‑system demo using the **global `THREE`** object supplied by the pre‑installed `three.min.js`. All code lives inline (`<style>` and `<script>` tags) – no external CDN or extra files are required. The scene includes: * **Sun** – a bright sphere. * **Planets** with different radii and orbit speeds (Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune). * **Orbit‑drag camera control** – you can click‑drag to rotate the view and use the scroll wheel to zoom. * **Starfield** – a simple background of many tiny white points that give the impression of deep space. > **How it works** > 1. Load the bundled `three.min.js` (the file is already in the current directory). > 2. Build the scene, camera, renderer, and orbit‑drag controls. > 3. Create a starfield by generating many particles and moving them slowly. > 4. Create each planet as a mesh orbiting on a circular path around the sun. Their angular speed is scaled by a simple factor so they orbit at “real‑relative” rates. > 5. Animate the scene in `requestAnimationFrame`. Save the following content as **`index.html`** in the current directory (`/tmp/ws`). ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3‑D Solar System (Three.js)</title> <style> body { margin:0; overflow:hidden; font-family:Arial, sans-serif; } #info { position:absolute; top:10px; left:10px; color:#fff; font-size:16px; } </style> </head> <body> <div id="info">Drag to rotate, scroll to zoom.</div> <script src="three.min.js"></script> <script> // ----- SETTINGS ------------------------------------------------- const settings = { // Number of stars in the starfield starCount: 3000, // Sun parameters sunRadius: 80, sunColor: 0xffdd00, // Planet parameters (radius, orbital radius, orbital period in seconds) // Period = orbitSpeed * 1000 gives a reasonable pacing on screen. planets: [ { name: "Mercury", radius: 4, orbit: 100, orbitSpeed: 0.02 }, // fast { name: "Venus", radius: 6, orbit: 150, orbitSpeed: 0.015 }, { name: "Earth", radius: 7, orbit: 200, orbitSpeed: 0.013 }, { name: "Mars", radius: 5, orbit: 250, orbitSpeed: 0.011 }, { name: "Jupiter", radius: 28, orbit: 600, orbitSpeed: 0.005 }, { name: "Saturn", radius: 24, orbit: 800, orbitSpeed: 0.004 }, { name: "Uranus", radius: 12, orbit: 1200,orbitSpeed: 0.0025 }, { name: "Neptune", radius: 10, orbit: 1500,orbitSpeed: 0.002 } ] }; // ---------------------------------------------------------------- // Basic scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); const renderer = new THREE.WebGLRenderer({ antialias:true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Camera initial orbit (nice view of the whole solar system) camera.position.set(0, 0, 3000); scene.add(camera); // Light: a bright point light for the sun, plus ambient light const ambient = new THREE.AmbientLight(0x404040); scene.add(ambient); const sunLight = new THREE.PointLight(sunColor, 1, 5000); sunLight.position.set(0, 0, 0); scene.add(sunLight); // ---------------------------------------------------------------- // 1️⃣ Starfield background // ---------------------------------------------------------------- const starGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(settings.starCount * 3); for (let i = 0; i < settings.starCount; i++) { const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI; const r = 5000 + Math.random() * 2000; // distance from camera positions[i * 3] = r * Math.sin(phi) * Math.cos(theta); positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta); positions[i * 3 + 2] = r * Math.cos(phi); } starGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const starMaterial = new THREE.PointsMaterial({ size: 0.2, color: 0xffffff, transparent: true, opacity: 0.8, depthWrite: false }); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); // Move stars slightly behind the camera each frame to keep them stationary relative to view stars.customDepthMaterial = new THREE.PointsMaterial({ size: starMaterial.size, color: starMaterial.color, depthTest: false, depthWrite: false, transparent: true, opacity: starMaterial.opacity }); // ---------------------------------------------------------------- // 2️⃣ Sun // ---------------------------------------------------------------- const sunGeo = new THREE.SphereGeometry(settings.sunRadius, 32, 32); const sunMat = new THREE.MeshStandardMaterial({ color: settings.sunColor, emissive: settings.sunColor, emissiveIntensity: 0.5 }); const sunMesh = new THREE.Mesh(sunGeo, sunMat); sunMesh.position.set(0, 0, 0); scene.add(sunMesh); // ---------------------------------------------------------------- // 3️⃣ Planets with orbiting paths // ---------------------------------------------------------------- const planetMaterials = new Map(); settings.planets.forEach(p => { const mat = new THREE.MeshStandardMaterial({ color: 0x8888ff, metalness: 0.2, roughness: 0.8 }); planetMaterials.set(p.name, mat); }); const planets = settings.planets.map(p => { const geo = new THREE.SphereGeometry(p.radius, 32, 32); const mat = planetMaterials.get(p.name); const mesh = new THREE.Mesh(geo, mat); mesh.position.set(p.orbit, 0, 0); // start on the X‑axis scene.add(mesh); // Animate orbit later using a quaternion based on time return mesh; }); // ---------------------------------------------------------------- // 4️⃣ Orbit‑drag camera (trackball controls) // ---------------------------------------------------------------- const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // smooth damping controls.dampingFactor = 0.025; controls.rotateSpeed = 2.0; controls.maxDistance = 5000; controls.minDistance = 100; // ---------------------------------------------------------------- // 5️⃣ Animation loop // ---------------------------------------------------------------- let clock = new THREE.Clock(); function animate() { const dt = clock.getDelta(); // seconds since last frame // Sun light follows the sun (always centered on sun) sunLight.position.copy(sunMesh.position); // Update starfield: move behind camera for a static effect stars.position.copy(camera.position).multiplyScalar(-1); // Update each planet's orbit planets.forEach((planet, i) => { const p = settings.planets[i]; const angle = p.orbitSpeed * dt * 1000; // orbitSpeed defined in seconds per orbit, scaled const orbit = p.orbit; const q = new THREE.Quaternion(); q.setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle); planet.position.set( orbit * Math.cos(angle), 0, orbit * Math.sin(angle) ); planet.quaternion.copy(q); }); // Optional: rotate the whole starfield subtly for visual interest const starRot = dt * 0.01; stars.rotation.y += starRot; // Render renderer.render(scene, camera); controls.update(); requestAnimationFrame(animate); } animate(); // ---------------------------------------------------------------- // 6️⃣ Resize handling // ---------------------------------------------------------------- window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html> ``` **How to run** 1. Ensure `three.min.js` exists in the same directory (`/tmp/ws`). 2. Open `index.html` in any modern browser (Chrome, Firefox, Edge, Safari). 3. Use the mouse: * **Left‑click‑drag** rotates the view around the solar system. * **Right‑click‑drag** pans (orbit controls automatically handle this). * **Scroll wheel** zooms in/out. The demo is fully self‑contained and requires no network resources, fulfilling the request to keep everything inline. Enjoy exploring the 3‑D solar system!