3D solar system · qwen3-coder-30b-a3b-instruct
Using the pre-provided three.min.js (global THREE), build a 3D solar system with the sun and orbiting planets at varied speeds and sizes, orbit-drag camera controls, and a starfield.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Using the pre-provided three.min.js (global THREE), build a 3D solar system with the sun and orbiting planets at varied speeds and sizes, orbit-drag camera controls, and a starfield.
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Solar System</title> <style> body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } #info { position: absolute; top: 10px; width: 100%; text-align: center; color: white; font-family: Arial, sans-serif; font-size: 14px; text-shadow: 0 0 5px rgba(0,0,0,0.5); pointer-events: none; } </style> </head> <body> <div id="info">3D Solar System | Orbit with mouse | Zoom with scroll</div> <script src="three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.min.js"></script> <script> // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Camera position camera.position.set(0, 30, 50); // Add orbit controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; // Create starfield background function createStarfield() { const starGeometry = new THREE.BufferGeometry(); const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.2, sizeAttenuation: true }); const starVertices = []; for (let i = 0; i < 10000; i++) { const x = (Math.random() - 0.5) * 2000; const y = (Math.random() - 0.5) * 2000; const z = (Math.random() - 0.5) * 2000; starVertices.push(x, y, z); } starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); } // Create the Sun function createSun() { const sunGeometry = new THREE.SphereGeometry(5, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 2 }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); // Add sun glow effect const sunGlowGeometry = new THREE.SphereGeometry(5.2, 32, 32); const sunGlowMaterial = new THREE.MeshBasicMaterial({ color: 0xffff66, transparent: true, opacity: 0.5 }); const sunGlow = new THREE.Mesh(sunGlowGeometry, sunGlowMaterial); scene.add(sun); scene.add(sunGlow); return sun; } // Create planets function createPlanet(name, size, distance, speed, color, ring = false) { // Planet const planetGeometry = new THREE.SphereGeometry(size, 32, 32); const planetMaterial = new THREE.MeshPhongMaterial({ color: color, shininess: 5 }); const planet = new THREE.Mesh(planetGeometry, planetMaterial); // Add rotation to planet planet.rotationSpeed = speed; planet.orbitDistance = distance; planet.orbitSpeed = 0.005 * speed; const orbitRadius = distance; planet.orbitRadius = orbitRadius; // Create orbit path const orbitGeometry = new THREE.RingGeometry(orbitRadius - 0.1, orbitRadius + 0.1, 128); const orbitMaterial = new THREE.MeshBasicMaterial({ color: 0x444444, side: THREE.DoubleSide, transparent: true, opacity: 0.3 }); const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial); orbit.rotation.x = Math.PI / 2; scene.add(orbit); // Add rings if specified if (ring) { const ringGeometry = new THREE.RingGeometry(size * 1.8, size * 2.5, 64); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xddddaa, side: THREE.DoubleSide, transparent: true }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 3; planet.add(ring); } scene.add(planet); return planet; } // Add lighting const ambientLight = new THREE.AmbientLight(0x333333); scene.add(ambientLight); const sunLight = new THREE.PointLight(0xffffff, 2, 300); scene.add(sunLight); // Create celestial objects const sun = createSun(); // Create planets with different properties const planets = []; // Mercury planets.push(createPlanet("Mercury", 0.4, 10, 4, 0x8c7853)); // Venus planets.push(createPlanet("Venus", 0.9, 15, 1.6, 0xffc649)); // Earth planets.push(createPlanet("Earth", 1, 20, 1, 0x6b93d6)); // Mars planets.push(createPlanet("Mars", 0.5, 25, 0.5, 0xc1440e)); // Jupiter planets.push(createPlanet("Jupiter", 2.2, 35, 0.3, 0xd8ca9d, true)); // Saturn planets.push(createPlanet("Saturn", 1.8, 45, 0.2, 0xfad5a5, true)); // Uranus planets.push(createPlanet("Uranus", 1.2, 55, 0.1, 0x4fd0e7)); // Neptune planets.push(createPlanet("Neptune", 1.1, 65, 0.05, 0x4b70dd)); // Animation loop function animate() { requestAnimationFrame(animate); // Rotate sun sun.rotation.y += 0.002; // Update planet positions and rotations for (let i = 0; i < planets.length; i++) { const planet = planets[i]; // Rotate the planet on its axis planet.rotation.y += planet.rotationSpeed * 0.01; // Orbit around the sun planet.position.x = Math.sin(planet.orbitSpeed * Date.now() * 0.0001) * planet.orbitDistance; planet.position.z = Math.cos(planet.orbitSpeed * Date.now() * 0.0001) * planet.orbitDistance; } controls.update(); renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Start animation createStarfield(); animate(); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.