3D solar system · qwen-2.5-72b-instruct
Output saved · Timed out Cost / run $0.0213 Runtime 900.1s
The 15-minute session limit cut this run off. The output is the HTML saved at that point.
Prompt for this run
Build a 3D solar-system visualization using the provided Three.js library. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. Use the provided `three.min.js` (global `THREE`) through a plain local script tag; the runner will inline it into the final artifact. Required behavior: - Show the Sun and all eight planets, with distinguishable colors, readable labels, and orbital paths against a procedural starfield. - Animate planets orbiting the Sun at different speeds. Use schematic sizes and distances for visibility; scientific scale accuracy is not required. Inner planets should generally orbit faster than outer planets. - Initially frame the complete system. Dragging orbits the camera around the Sun, and the mouse wheel changes camera distance within usable bounds. - Provide Pause/Resume and Reset view. Pause freezes planetary motion while leaving camera controls usable; Reset view restores the initial camera framing. - Generate materials and geometry procedurally. Only core global THREE is available; do not import additional controls or texture files. Verify: Inspect the initial planet labels and sample orbital motion. Orbit the camera and check that the system stays visible. Pause the simulation while adjusting the camera, then use Reset view and compare the initial framing.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
METRICS
Transcript · 14 messages
Build a 3D solar-system visualization using the provided Three.js library. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. Use the provided `three.min.js` (global `THREE`) through a plain local script tag; the runner will inline it into the final artifact. Required behavior: - Show the Sun and all eight planets, with distinguishable colors, readable labels, and orbital paths against a procedural starfield. - Animate planets orbiting the Sun at different speeds. Use schematic sizes and distances for visibility; scientific scale accuracy is not required. Inner planets should generally orbit faster than outer planets. - Initially frame the complete system. Dragging orbits the camera around the Sun, and the mouse wheel changes camera distance within usable bounds. - Provide Pause/Resume and Reset view. Pause freezes planetary motion while leaving camera controls usable; Reset view restores the initial camera framing. - Generate materials and geometry procedurally. Only core global THREE is available; do not import additional controls or texture files. Verify: Inspect the initial planet labels and sample orbital motion. Orbit the camera and check that the system stays visible. Pause the simulation while adjusting the camera, then use Reset view and compare the initial framing.
index.html (6903 bytes)
{"action":"inspect"}Successfully wrote to index.html
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.","error: THREE.OrbitControls is not a constructor","warning: [.WebGL-0xc1c00179e00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels"],"dom":"","images":"model does not support images"}
It looks like there's an issue with the `OrbitControls` not being defined. This is because `OrbitControls` is not part of the core `three.js` library; it needs to be included separately. However, since we cannot load external resources, we need to define the `OrbitControls` class directly in our `index.html` file. Let's add the `OrbitControls` code to the `index.html` file and then re-run the browser to verify the changes. ```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; } canvas { display: block; } #controls { position: absolute; top: 20px; left: 20px; } .button { padding: 8px 12px; margin: 5px; font-size: 16px; cursor: pointer; } </style> </head> <body> <script src="three.min.js"></script> <script> // Define OrbitControls THREE.OrbitControls = function (object, domElement) { this.object = object; this.domElement = (domElement !== undefined) ? domElement : document; this.enabled = true; this.target = new THREE.Vector3(); this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.ZOOM, RIGHT: THREE.MOUSE.PAN }; this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.ZOOM }; this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; this.enableDamping = false; this.dampingFactor = 0.25; this.enableZoom = true; this.minDistance = 0; this.maxDistance = Infinity; this.enableKeys = true; this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; this.enablePan = true; var scope = this; var changeEvent = { type: 'change' }; var startEvent = { type: 'start' }; var endEvent = { type: 'end' }; var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 }; var state = STATE.NONE; this.getPolarAngle = function () { return spherical.phi; }; this.getSpherical = function () { return spherical; }; this.saveState = function () { scope.target0.copy(scope.target); scope.position0.copy(scope.object.position); scope.zoom0 = scope.object.zoom; }; this.reset = function () { scope.target.copy(scope.target0); scope.object.position.copy(scope.position0); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent(changeEvent); scope.update(); state = STATE.NONE; }; var EPS = 0.000001; var rotateStart = new THREE.Vector2(); var rotateEnd = new THREE.Vector2(); var rotateDelta = new THREE.Vector2(); var dollyStart = new THREE.Vector2(); var dollyEnd = new THREE.Vector2(); var dollyDelta = new THREE.Vector2(); var panStart = new THREE.Vector2(); var panEnd = new THREE.Vector2(); var panDelta = new THREE.Vector2(); var mouseDomElement = (scope.domElement === document) ? scope.domElement.body : scope.domElement; var touches = {}; touches.ROTATE = 2; touches.DOLLY = 2; touches.PAN = 2; this.domElement.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false); this.domElement.addEventListener('mousedown', function (event) { if (scope.enabled === false) return; if (mouseDomElement !== document) mouseDomElement.setPointerCapture(event.pointerId); var mouseButtons = {}; mouseButtons.LEFT = 0; mouseButtons.MIDDLE = 1; mouseButtons.RIGHT = 2; switch (event.button) { case mouseButtons.LEFT: if (event.ctrlKey || event.metaKey) { if (scope.enablePan === true) { state = STATE.PAN; panStart.set(event.clientX, event.clientY); } } else { if (scope.enableRotate === true) { state = STATE.ROTATE; rotateStart.set(event.clientX, event.clientY); } } break; case mouseButtons.MIDDLE: if (scope.enableZoom === true) { state = STATE.DOLLY; dollyStart.set(event.clientX, event.clientY); } break; case mouseButtons.RIGHT: if (scope.enablePan === true) { state = STATE.PAN; panStart.set(event.clientX, event.clientY); } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { document.body.style.touchAction = 'none'; // disable touch scroll scope.dispatchEvent(startEvent); } }, false); this.domElement.addEventListener('mousemove', function (event) { if (scope.enabled === false) return; event.preventDefault(); var element = scope.domElement; if (state === STATE.ROTATE) { if (scope.enableRotate === true) { rotateEnd.set(event.clientX, event.clientY); rotateDelta.subVectors(rotateEnd, rotateStart); var elementCenter = new THREE.Vector2(); var offset = elementCenter.subVectors(rotateEnd, elementCenter); sphericalDelta.theta -= 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed; sphericalDelta.phi -= 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed; rotateStart.copy(rotateEnd); scope.update(); } } else if (state === STATE.DOLLY) { if (scope.enableZoom === true) { dollyEnd.set(event.clientX, event.clientY); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyOut(dollyDelta.y); } else { dollyIn(-dollyDelta.y); } dollyStart.copy(dollyEnd); scope.update(); } } else if (state === STATE.PAN) { if (scope.enablePan === true) { panEnd.set(event.clientX, event.clientY); panDelta.subVectors(panEnd, panStart); scope.pan(new THREE.Vector2(-panDelta.x, panDelta.y)); panStart.copy(panEnd); scope.update(); } } }, false); this.domElement.addEventListener('mouseup', function (event) { if (scope.enabled === false) return; event.preventDefault(); mouseDomElement.releasePointerCapture(event.pointerId); scope.dispatchEvent(endEvent); state = STATE.NONE; }, false); this.domElement.addEventListener('wheel', function (event) { if (scope.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (scope.enableZoom === true) { if (event.deltaY < 0) { dollyIn(-event.deltaY); } else { dollyOut(event.deltaY); } } scope.update(); scope.dispatchEvent(changeEvent); }, { passive: false }); this.domElement.addEventListener('touchstart', function (event) { if (scope.enabled === false) return; switch (event.touches.length) { case touches.ROTATE: if (scope.enableRotate === true) { rotateStart.set(event.touches[0].pageX, event.touches[0].pageY); rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY); state = STATE.TOUCH_ROTATE; } break; case touches.DOLLY: if (scope.enableZoom === true) { var dx = event.touches[0].pageX - event.touches[1].pageX; var dy = event.touches[0].pageY - event.touches[1].pageY; var distance = Math.sqrt(dx * dx + dy * dy); dollyStart.set(0, distance); dollyEnd.set(0, distance); state = STATE.TOUCH_DOLLY; } break; case touches.PAN: if (scope.enablePan === true) { panStart.set(event.touches[0].pageX, event.touches[0].pageY); panEnd.set(event.touches[0].pageX, event.touches[0].pageY); state = STATE.TOUCH_PAN; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(startEvent); } }, false); this.domElement.addEventListener('touchend', function (event) { if (scope.enabled === false) return; scope.dispatchEvent(endEvent); state = STATE.NONE; }, false); this.domElement.addEventListener('touchmove', function (event) { if (scope.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (state === STATE.TOUCH_ROTATE) { if (scope.enableRotate === true) { rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY); rotateDelta.subVectors(rotateEnd, rotateStart); var elementCenter = new THREE.Vector2(); var offset = elementCenter.subVectors(rotateEnd, elementCenter); sphericalDelta.theta -= 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed; sphericalDelta.phi -= 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed; rotateStart.copy(rotateEnd); scope.update(); } } else if (state === STATE.TOUCH_DOLLY) { if (scope.enableZoom === true) { var dx = event.touches[0].pageX - event.touches[1].pageX; var dy = event.touches[0].pageY - event.touches[1].pageY; var distance = Math.sqrt(dx * dx + dy * dy); dollyEnd.set(0, distance); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyOut(dollyDelta.y); } else { dollyIn(-dollyDelta.y); } dollyStart.copy(dollyEnd); scope.update(); } } else if (state === STATE.TOUCH_PAN) { if (scope.enablePan === true) { panEnd.set(event.touches[0].pageX, event.touches[0].pageY); panDelta.subVectors(panEnd, panStart); scope.pan(new THREE.Vector2(-panDelta.x, panDelta.y)); panStart.copy(panEnd); scope.update(); } } }, false); this.domElement.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false); this.update = function () { var zoomChanged = scope.updateZoom(); var positionChanged = scope.updatePan(); var rotateChanged = scope.updateRotate(); if (zoomChanged || positionChanged || rotateChanged) { scope.dispatchEvent(changeEvent); } }; this.updateZoom = function () { return false; }; this.updatePan = function () { return false; }; this.updateRotate = function () { var thetaWrapped = (sphericalDelta.theta + 2 * Math.PI) % (2 * Math.PI); if (thetaWrapped < -Math.PI) { thetaWrapped += 2 * Math.PI; } else if (thetaWrapped > Math.PI) { thetaWrapped -= 2 * Math.PI; } sphericalDelta.theta = thetaWrapped; var theta = THREE.MathUtils.clamp(sphericalDelta.theta, -Math.PI, Math.PI); sphericalDelta.theta = theta; sphericalDelta.phi = THREE.MathUtils.clamp(sphericalDelta.phi, 0, Math.PI); var targetDistance = scope.object.position.distanceTo(scope.target); targetDistance += sphericalDelta.r; if (targetDistance < scope.minDistance) { targetDistance = scope.minDistance; } else if (targetDistance > scope.maxDistance) { targetDistance = scope.maxDistance; } sphericalDelta.makeSafe(); sphericalDelta.radius = targetDistance; var position = sphericalDelta.toVector3().add(scope.target); scope.object.position.copy(position); return true; }; this.updatePan = function () { return false; }; this.updateRotate = function () { return false; }; this.update = function () { var zoomChanged = scope.updateZoom(); var positionChanged = scope.updatePan(); var rotateChanged = scope.updateRotate(); if (zoomChanged || positionChanged || rotateChanged) { scope.dispatchEvent(changeEvent); } }; this.updateZoom = function () { return false; }; this.updatePan = function () { return false; }; this.updateRotate = function () { var thetaWrapped = (sphericalDelta.theta + 2 * Math.PI) % (2 * Math.PI); if (thetaWrapped < -Math.PI) { thetaWrapped += 2 * Math.PI; } else if (thetaWrapped > Math.PI) { thetaWrapped -= 2 * Math.PI; } sphericalDelta.theta = thetaWrapped; var theta = THREE.MathUtils.clamp(sphericalDelta.theta, -Math.PI, Math.PI); sphericalDelta.theta = theta; sphericalDelta.phi = THREE.MathUtils.clamp(sphericalDelta.phi, 0, Math.PI); var targetDistance = scope.object.position.distanceTo(scope.target); targetDistance += sphericalDelta.r; if (targetDistance < scope.minDistance) { targetDistance = scope.minDistance; } else if (targetDistance > scope.maxDistance) { targetDistance = scope.maxDistance; } sphericalDelta.makeSafe(); sphericalDelta.radius = targetDistance; var position = sphericalDelta.toVector3().add(scope.target); scope.object.position.copy(position); return true; }; this.updatePan = function () { var v = getPanVector(); scope.object.position.add(v); scope.target.add(v); return true; }; this.updateRotate = function () { var thetaWrapped = (sphericalDelta.theta + 2 * Math.PI) % (2 * Math.PI); if (thetaWrapped < -Math.PI) { thetaWrapped += 2 * Math.PI; } else if (thetaWrapped > Math.PI) { thetaWrapped -= 2 * Math.PI; } sphericalDelta.theta = thetaWrapped; var theta = THREE.MathUtils.clamp(sphericalDelta.theta, -Math.PI, Math.PI); sphericalDelta.theta = theta; sphericalDelta.phi = THREE.MathUtils.clamp(sphericalDelta.phi, 0, Math.PI); var targetDistance = scope.object.position.distanceTo(scope.target); targetDistance += sphericalDelta.r; if (targetDistance < scope.minDistance) { targetDistance = scope.minDistance; } else if (targetDistance > scope.maxDistance) { targetDistance = scope.maxDistance; } sphericalDelta.makeSafe(); sphericalDelta.radius = targetDistance; var position = sphericalDelta.toVector3().add(scope.target); scope.object.position.copy(position); return true; }; this.update = function () { var zoomChanged = scope.updateZoom(); var positionChanged = scope.updatePan(); var rotateChanged = scope.updateRotate(); if (zoomChanged || positionChanged || rotateChanged) { scope.dispatchEvent(changeEvent); } }; this.pan = function (pan) { var v = new THREE.Vector3(); if (scope.object.isPerspectiveCamera) { v.setFromMatrixColumn(scope.object.matrix, 0).multiplyScalar(-pan.x); v.setFromMatrixColumn(scope.object.matrix, 1).multiplyScalar(pan.y); } else if (scope.object.isOrthographicCamera) { v.set(pan.x, pan.y, 0); } return v; }; this.dollyIn = function (dollyScale) { if (scope.object.isPerspectiveCamera) { scope.dolly(dollyScale); } else if (scope.object.isOrthographicCamera) { scope.camera.orthographicDolly(dollyScale); } }; this.dollyOut = function (dollyScale) { if (scope.object.isPerspectiveCamera) { scope.dolly(-dollyScale); } else if (scope.object.isOrthographicCamera) { scope.camera.orthographicDolly(-dollyScale); } }; this.dolly = function (dollyScale) { if (dollyScale > 0) { scope.object.position.add(scope.target.sub(scope.object.position).multiplyScalar(dollyScale)); } else { scope.object.position.add(scope.target.sub(scope.object.position).multiplyScalar(-dollyScale)); } }; this.getKeyCode = function (key) { return scope.keys[key.toUpperCase()]; }; this.dispose = function () { scope.domElement.removeEventListener('contextmenu', onContextMenu, false); scope.domElement.removeEventListener('mousedown', onMouseDown, false); scope.domElement.removeEventListener('wheel', onMouseWheel, { passive: false }); scope.domElement.removeEventListener('touchstart', onTouchStart, false); scope.domElement.removeEventListener('touchend', onTouchEnd, false); scope.domElement.removeEventListener('touchmove', onTouchMove, false); document.removeEventListener('pointerdown', onPointerDown, false); document.removeEventListener('pointermove', onPointerMove, false); document.removeEventListener('pointerup', onPointerUp, false); }; thisPan = function (pan) { var v = new THREE.Vector3(); if (scope.object.isPerspectiveCamera) { v.setFromMatrixColumn(scope.object.matrix, 0).multiplyScalar(-pan.x); v.setFromMatrixColumn(scope.object.matrix, 1).multiplyScalar(pan.y); } else if (scope.object.isOrthographicCamera) { v.set(pan.x, pan.y, 0); } scope.target.add(v); scope.object.position.add(v); }; thisTarget = function () { return scope.target; }; this disposal = function () { scope.domElement.removeEventListener('contextmenu', onContextMenu, false); scope.domElement.removeEventListener('mousedown', onMouseDown, false); scope.domElement.removeEventListener('wheel', onMouseWheel, { passive: false }); scope.domElement.removeEventListener('touchstart', onTouchStart, false); scope.domElement.removeEventListener('touchend', onTouchEnd, false); scope.domElement.removeEventListener('touchmove', onTouchMove, false); document.removeEventListener('pointerdown', onPointerDown, false); document.removeEventListener('pointermove', onPointerMove, false); document.removeEventListener('pointerup', onPointerUp, false); }; var spherical = new THREE.Spherical(); var sphericalDelta = new THREE.Spherical(); var scale = 1; var panOffset = new THREE.Vector3(); var zoomChanged = false; var positionChanged = false; var rotateChanged = false; var rotateStart = new THREE.Vector2(); var rotateEnd = new THREE.Vector2(); var rotateDelta = new THREE.Vector2(); var panStart = new THREE.Vector2(); var panEnd = new THREE.Vector2(); var panDelta = new THREE.Vector2(); var dollyStart = new THREE.Vector2(); var dollyEnd = new THREE.Vector2(); var dollyDelta = new THREE.Vector2(); var touchZoomDistanceStart = 0; var touchZoomDistanceEnd = 0; var touchZoomDelta = 0; var lastPosition = scope.object.position.clone(); function getAutoRotationAngle() { return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow(0.95, scope.zoomSpeed); } function onMouseDown(event) { if (scope.enabled === false) return; event.preventDefault(); if (event.button === scope.mouseButtons.LEFT) { if (scope.enableRotate === true) { state = STATE.ROTATE; rotateStart.set(event.clientX, event.clientY); } } else if (event.button === scope.mouseButtons.MIDDLE) { if (scope.enableZoom === true) { state = STATE.DOLLY; dollyStart.set(event.clientX, event.clientY); } } else if (event.button === scope.mouseButtons.RIGHT) { if (scope.enablePan === true) { state = STATE.PAN; panStart.set(event.clientX, event.clientY); } } if (state !== STATE.NONE) { document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('mouseup', onMouseUp, false); mouseDomElement.setPointerCapture(event.pointerId); mouseDomElement.addEventListener('pointermove', onPointerMove, false); mouseDomElement.addEventListener('pointerup', onPointerUp, false); scope.dispatchEvent(startEvent); } } function onMouseMove(event) { if (scope.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (state === STATE.ROTATE) { if (scope.enableRotate === false) return; rotateEnd.set(event.clientX, event.clientY); rotateDelta.subVectors(rotateEnd, rotateStart); sphericalDelta.theta -= 2 * Math.PI * rotateDelta.x / mouseDomElement.clientWidth * scope.rotateSpeed; sphericalDelta.phi -= 2 * Math.PI * rotateDelta.y / mouseDomElement.clientHeight * scope.rotateSpeed; sphericalDelta.makeSafe(); spherical.cop </script> <script> // Initialize scene, camera, and renderer var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create a starfield var starGeometry = new THREE.SphereGeometry(2000, 32, 32); var starMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); var starfield = new THREE.Mesh(starGeometry, starMaterial); scene.add(starfield); // Create the Sun var sunGeometry = new THREE.SphereGeometry(5, 32, 32); var sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 }); var sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // Create the planets var planets = [ { name: 'Mercury', radius: 0.5, orbit: 15, color: 0x7b7680, speed: 0.05 }, { name: 'Venus', radius: 0.8, orbit: 18, color: 0xdea057, speed: 0.03 }, { name: 'Earth', radius: 1, orbit: 21, color: 0x5584ac, speed: 0.02 }, { name: 'Mars', radius: 0.7, orbit: 25, color: 0xb24926, speed: 0.015 }, { name: 'Jupiter', radius: 2, orbit: 30, color: 0xd08852, speed: 0.01 }, { name: 'Saturn', radius: 1.5, orbit: 35, color: 0xb38a4c, speed: 0.008 }, { name: 'Uranus', radius: 1.2, orbit: 40, color: 0x8fbfca, speed: 0.005 }, { name: 'Neptune', radius: 1.3, orbit: 45, color: 0x3e6ecb, speed: 0.003 } ]; planets.forEach(planet => { var planetGeometry = new THREE.SphereGeometry(planet.radius, 32, 32); var planetMaterial = new THREE.MeshBasicMaterial({ color: planet.color }); var planetMesh = new THREE.Mesh(planetGeometry, planetMaterial); planetMesh.position.set(planet.orbit, 0, 0); planetMesh.angle = 0; planetMesh.orbit = planet.orbit; planetMesh.speed = planet.speed; scene.add(planetMesh); // Create labels var label = new THREE.Mesh( new THREE.PlaneGeometry(2, 1), new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }) ); label.position.set(planet.orbit + 1.5, 0, 0); label.material.map = new THREE.CanvasTexture(createLabel(planet.name)); label.material.needsUpdate = true; scene.add(label); }); // Create orbit lines planets.forEach(planet => { var orbitGeometry = new THREE.RingGeometry(planet.orbit, planet.orbit + 0.1, 32); var orbitMaterial = new THREE.LineBasicMaterial({ color: 0x444444, transparent: true, opacity: 0.5 }); var orbit = new THREE.Line(orbitGeometry, orbitMaterial); scene.add(orbit); }); // Camera controls var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.enableZoom = true; controls.minDistance = 10; controls.maxDistance = 100; camera.position.set(0, 0, 50); // Animation controls var isPaused = false; var resetView = false; // Add controls to the DOM var controlsDiv = document.createElement('div'); controlsDiv.id = 'controls'; document.body.appendChild(controlsDiv); var pauseButton = document.createElement('button'); pauseButton.className = 'button'; pauseButton.textContent = 'Pause'; pauseButton.onclick = function() { isPaused = !isPaused; if (isPaused) { pauseButton.textContent = 'Resume'; } else { pauseButton.textContent = 'Pause'; } }; controlsDiv.appendChild(pauseButton); var resetButton = document.createElement('button'); resetButton.className = 'button'; resetButton.textContent = 'Reset View'; resetButton.onclick = function() { resetView = true; camera.position.set(0, 0, 50); controls.reset(); }; controlsDiv.appendChild(resetButton); // Function to create labels function createLabel(text) { var canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 100; var context = canvas.getContext('2d'); context.font = '20px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillStyle = 'black'; context.fillText(text, canvas.width / 2, canvas.height / 2); return canvas; } // Animation loop function animate() { requestAnimationFrame(animate); if (!isPaused) { planets.forEach(planet => { planetMesh = scene.children.find(child => child === planetMesh); planetMesh.angle += planet.speed; planetMesh.position.set( planet.orbit * Math.cos(planetMesh.angle), 0, planet.orbit * Math.sin(planetMesh.angle) ); label = scene.children.find(child => child.material.map.image.src.includes(planet.name)); label.position.set( planet.orbit * Math.cos(planetMesh.angle) + 1.5, 0, planet.orbit * Math.sin(planetMesh.angle) ); }); } if (resetView) { resetView = false; camera.position.set(0, 0, 50); controls.reset(); } controls.update(); renderer.render(scene, camera); } animate(); // Handle window resizing window.addEventListener('resize', function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html> ``` Now, let's re-run the browser to verify the changes.
{"action":"inspect"}{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.","error: THREE.OrbitControls is not a constructor","warning: [.WebGL-0xc1c00179e00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels"],"dom":"","images":"model does not support images"}
It seems that the `OrbitControls` implementation is still not recognized as a constructor. This might be due to the way the code is structured or some missing parts in the implementation. Let's simplify the `OrbitControls` implementation to ensure it works correctly. Here's a more concise version of the `OrbitControls` class that should work: ```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; } canvas { display: block; } #controls { position: absolute; top: 20px; left: 20px; } .button { padding: 8px 12px; margin: 5px; font-size: 16px; cursor: pointer; } </style> </head> <body> <script src="three.min.js"></script> <script> // Define OrbitControls THREE.OrbitControls = function (object, domElement) { this.object = object; this.domElement = (domElement !== undefined) ? domElement : document; this.enabled = true; this.target = new THREE.Vector3(); this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.ZOOM, RIGHT: THREE.MOUSE.PAN }; this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }; this.enableZoom = true; this.minDistance = 0; this.maxDistance = Infinity; this.enablePan = true; this.enableDamping = true; this.dampingFactor = 0.05; this.rotateSpeed = 1.0; this.zoomSpeed = 1.2; this.panSpeed = 0.3; this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; this.mouse = { x: 0, y: 0 }; this每次都重置这些变量以确保每次都能正确初始化。 this.state = { last: {} }; this.update = function () { if (this.enableDamping) { this.object.position.lerp(this.target, this.dampingFactor); } }; this.domElement.addEventListener('mousedown', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (event.button === this.mouseButtons.LEFT) { this.state.last.mouseX = event.clientX; this.state.last.mouseY = event.clientY; this.state = { rotate: true }; } else if (event.button === this.mouseButtons.RIGHT) { this.state.last.mouseX = event.clientX; this.state.last.mouseY = event.clientY; this.state = { pan: true }; } }.bind(this), false); this.domElement.addEventListener('mousemove', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (this.state.rotate) { var dx = (event.clientX - this.state.last.mouseX) * this.rotateSpeed; var dy = (event.clientY - this.state.last.mouseY) * this.rotateSpeed; this.object.rotation.y -= dx; this.object.rotation.x -= dy; this.state.last.mouseX = event.clientX; this.state.last.mouseY = event.clientY; } else if (this.state.pan) { var dx = (event.clientX - this.state.last.mouseX) * this.panSpeed; var dy = (event.clientY - this.state.last.mouseY) * this.panSpeed; this.target.x -= dx; this.target.y += dy; this.state.last.mouseX = event.clientX; this.state.last.mouseY = event.clientY; } }.bind(this), false); this.domElement.addEventListener('mouseup', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); this.state = {}; }.bind(this), false); this.domElement.addEventListener('wheel', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (this.enableZoom) { var factor = Math.pow(0.95, event.deltaY * this.zoomSpeed); this.object.position.sub(this.target).multiplyScalar(factor).add(this.target); } }.bind(this), false); this.domElement.addEventListener('touchstart', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (event.touches.length === 1) { this.state.last.touchX = event.touches[0].pageX; this.state.last.touchY = event.touches[0].pageY; this.state = { rotate: true }; } else if (event.touches.length === 2) { this.state.last.touches = [ { x: event.touches[0].pageX, y: event.touches[0].pageY }, { x: event.touches[1].pageX, y: event.touches[1].pageY } ]; this.state.last.distance = Math.hypot( this.state.last.touches[1].x - this.state.last.touches[0].x, this.state.last.touches[1].y - this.state.last.touches[0].y ); this.state = { dolly: true }; } }.bind(this), false); this.domElement.addEventListener('touchmove', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); if (this.state.rotate) { var dx = (event.touches[0].pageX - this.state.last.touchX) * this.rotateSpeed; var dy = (event.touches[0].pageY - this.state.last.touchY) * this.rotateSpeed; this.object.rotation.y -= dx; this.object.rotation.x -= dy; this.state.last.touchX = event.touches[0].pageX; this.state.last.touchY = event.touches[0].pageY; } else if (this.state.dolly) { var currentDistance = Math.hypot( event.touches[1].pageX - event.touches[0].pageX, event.touches[1].pageY - event.touches[0].pageY ); var factor = currentDistance / this.state.last.distance; this.object.position.sub(this.target).multiplyScalar(factor).add(this.target); this.state.last.touches = [ { x: event.touches[0].pageX, y: event.touches[0].pageY }, { x: event.touches[1].pageX, y: event.touches[1].pageY } ]; this.state.last.distance = currentDistance; } }.bind(this), false); this.domElement.addEventListener('touchend', function (event) { if (this.enabled === false) return; event.preventDefault(); event.stopPropagation(); this.state = {}; }.bind(this), false); this.reset = function () { this.target.set(0, 0, 0); this.object.position.set(0, 0, 50); this.object.rotation.set(0, 0, 0); }; }; // Initialize scene, camera, and renderer var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create a starfield var starGeometry = new THREE.SphereGeometry(2000, 32, 32); var starMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); var starfield = new THREE.Mesh(starGeometry, starMaterial); scene.add(starfield); // Create the Sun var sunGeometry = new THREE.SphereGeometry(5, 32, 32); var sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 }); var sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // Create the planets var planets = [ { name: 'Mercury', radius: 0.5, orbit: 15, color: 0x7b7680, speed: 0.05 }, { name: 'Venus', radius: 0.8, orbit: 18, color: 0xdea057, speed: 0.03 }, { name: 'Earth', radius: 1, orbit: 21, color: 0x5584ac, speed: 0.02 }, { name: 'Mars', radius: 0.7, orbit: 25, color: 0xb24926, speed: 0.015 }, { name: 'Jupiter', radius: 2, orbit: 30, color: 0xd08852, speed: 0.01 }, { name: 'Saturn', radius: 1.5, orbit: 35, color: 0xb38a4c, speed: 0.008 }, { name: 'Uranus', radius: 1.2, orbit: 40, color: 0x8fbfca, speed: 0.005 }, { name: 'Neptune', radius: 1.3, orbit: 45, color: 0x3e6ecb, speed: 0.003 } ]; planets.forEach(planet => { var planetGeometry = new THREE.SphereGeometry(planet.radius, 32, 32); var planetMaterial = new THREE.MeshBasicMaterial({ color: planet.color }); var planetMesh = new THREE.Mesh(planetGeometry, planetMaterial); planetMesh.position.set(planet.orbit, 0, 0); planetMesh.angle = 0; planetMesh.orbit = planet.orbit; planetMesh.speed = planet.speed; scene.add(planetMesh); // Create labels var label = new THREE.Mesh( new THREE.PlaneGeometry(2, 1), new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }) ); label.position.set(planet.orbit + 1.5, 0, 0); label.material.map = new THREE.CanvasTexture(createLabel(planet.name)); label.material.needsUpdate = true; scene.add(label); }); // Create orbit lines planets.forEach(planet => { var orbitGeometry = new THREE.RingGeometry(planet.orbit, planet.orbit + 0.1, 32); var orbitMaterial = new THREE.LineBasicMaterial({ color: 0x444444, transparent: true, opacity: 0.5 }); var orbit = new THREE.Line(orbitGeometry, orbitMaterial); scene.add(orbit); }); // Camera controls var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.enableZoom = true; controls.minDistance = 10; controls.maxDistance = 100; camera.position.set(0, 0, 50); // Animation controls var isPaused = false; var resetView = false; // Add controls to the DOM var controlsDiv = document.createElement('div'); controlsDiv.id = 'controls'; document.body.appendChild(controlsDiv); var pauseButton = document.createElement('button'); pauseButton.className = 'button'; pauseButton.textContent = 'Pause'; pauseButton.onclick = function() { isPaused = !isPaused; if (isPaused) { pauseButton.textContent = 'Resume'; } else { pauseButton.textContent = 'Pause'; } }; controlsDiv.appendChild(pauseButton); var resetButton = document.createElement('button'); resetButton.className = 'button'; resetButton.textContent = 'Reset View'; resetButton.onclick = function() { resetView = true; camera.position.set(0, 0, 50); controls.reset(); }; controlsDiv.appendChild(resetButton); // Function to create labels function createLabel(text) { var canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 100; var context = canvas.getContext('2d'); context.font = '20px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillStyle = 'black'; context.fillText(text, canvas.width / 2, canvas.height / 2); return canvas; } // Animation loop function animate() { requestAnimationFrame(animate); if (!isPaused) { planets.forEach(planet => { planetMesh = scene.children.find(child => child === planetMesh); planetMesh.angle += planet.speed; planetMesh.position.set( planet.orbit * Math.cos(planetMesh.angle), 0, planet.orbit * Math.sin(planetMesh.angle) ); label = scene.children.find(child => child.material.map.image.src.includes(planet.name)); label.position.set( planet.orbit * Math.cos(planetMesh.angle) + 1.5, 0, planet.orbit * Math.sin(planetMesh.angle) ); }); } if (resetView) { resetView = false; camera.position.set(0, 0, 50); controls.reset(); } controls.update(); renderer.render(scene, camera); } animate(); // Handle window resizing window.addEventListener('resize', function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html> ``` Let's write this updated `index.html` file and re-run the browser to verify the changes.
index.html (13756 bytes){"action":"inspect"}Successfully wrote to index.html
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.","error: THREE.OrbitControls is not a constructor","warning: [.WebGL-0xc1c00179e00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels"],"dom":"","images":"model does not support images"}
It seems that the `OrbitControls` class is still not being recognized as a constructor. This might be due to a small oversight in the implementation. Let's simplify and ensure that the `OrbitControls` class is correctly defined and used. Here's a more concise and corrected version of the `OrbitControls` class: ```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; } canvas { display: block; } #controls { position: absolute; top: 20px; left: 20px; } .button { padding: 8px 12px; margin: 5px; font-size: 16px; cursor: pointer; } </style> </head> <body> <script src="three.min.js"></script> <script> // Define OrbitControls THREE.OrbitControls = function (object, domElement) { this.object = object; this.domElement = (domElement !== undefined) ? domElement : document; this.enabled = true; this.target = new THREE.Vector3(); this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.ZOOM, RIGHT: THREE.MOUSE.PAN }; this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }; this.enableKeys = true; this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; this.enableRotate = true; this.rotateSpeed = 1.0; this.enableZoom = true; this.zoomSpeed = 1.2; this.enablePan = true; this.panSpeed = 0.3; this.enableDamping = true; this.dampingFactor = 0.05; this.minDistance = 0; this.maxDistance = Infinity; this.update = function () { if (this.enableDamping) { this.object.position.lerp(this.target, this.dampingFactor); this.object.quaternion.slerp(new THREE.Quaternion(), this.dampingFactor); } }; this.domElement.addEventListener('mousedown', function (event) { if (this.enabled === false) return; switch (event.button) { case 0: this.state = 'rotate'; break; case 2: this.state = 'pan'; break; } this.mouseX = event.clientX; this.mouseY = event.clientY; this.domElement.setPointerCapture(event.pointerId); }.bind(this), false); this.domElement.addEventListener('mousemove', function (event) { if (this.enabled === false) return; if (this.state === 'rotate') { this.object.rotation.y -= (event.clientX - this.mouseX) * this.rotateSpeed; this.object.rotation.x -= (event.clientY - this.mouseY) * this.rotateSpeed; } else if (this.state === 'pan') { this.object.position.x -= (event.clientX - this.mouseX) * this.panSpeed; this.object.position.z -= (event.clientY - this.mouseY) * this.panSpeed; } this.mouseX = event.clientX; this.mouseY = event.clientY; }.bind(this), false); this.domElement.addEventListener('mouseup', function (event) { if (this.enabled === false) return; this.state = null; this.domElement.releasePointerCapture(event.pointerId); }.bind(this), false); this.domElement.addEventListener('wheel', function (event) { if (this.enabled === false || !this.enableZoom) return; var factor = Math.pow(0.95, event.deltaY * this.zoomSpeed); this.object.position.sub(this.target).multiplyScalar(factor).add(this.target); this.object.position.clampLength(this.minDistance, this.maxDistance); }.bind(this), false); this.domElement.addEventListener('keydown', function (event) { if (this.enabled === false || !this.enableKeys) return; switch (event.keyCode) { case this.keys.UP: this.object.position.y += this PAN_SPEED; break; case this.keys.BOTTOM: this.object.position.y -= this.PAN_SPEED; break; case this.keys.LEFT: this.object.position.x -= this.PAN_SPEED; break; case this.keys.RIGHT: this.object.position.x += this.PAN_SPEED; break; } }.bind(this), false); this.reset = function () { this.object.position.set(0, 0, 50); this.object.rotation.set(0, 0, 0); }; }; // Initialize scene, camera, and renderer var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create a starfield var starGeometry = new THREE.SphereGeometry(2000, 32, 32); var starMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); var starfield = new THREE.Mesh(starGeometry, starMaterial); scene.add(starfield); // Create the Sun var sunGeometry = new THREE.SphereGeometry(5, 32, 32); var sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 }); var sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // Create the planets var planets = [ { name: 'Mercury', radius: 0.5, orbit: 15, color: 0x7b7680, speed: 0.05 }, { name: 'Venus', radius: 0.8, orbit: 18, color: 0xdea057, speed: 0.03 }, { name: 'Earth', radius: 1, orbit: 21, color: 0x5584ac, speed: 0.02 }, { name: 'Mars', radius: 0.7, orbit: 25, color: 0xb24926, speed: 0.015 }, { name: 'Jupiter', radius: 2, orbit: 30, color: 0xd08852, speed: 0.01 }, { name: 'Saturn', radius: 1.5, orbit: 35, color: 0xb38a4c, speed: 0.008 }, { name: 'Uranus', radius: 1.2, orbit: 40, color: 0x8fbfca, speed: 0.005 }, { name: 'Neptune', radius: 1.3, orbit: 45, color: 0x3e6ecb, speed: 0.003 } ]; planets.forEach(planet => { var planetGeometry = new THREE.SphereGeometry(planet.radius, 32, 32); var planetMaterial = new THREE.MeshBasicMaterial({ color: planet.color }); var planetMesh = new THREE.Mesh(planetGeometry, planetMaterial); planetMesh.position.set(planet.orbit, 0, 0); planetMesh.angle = 0; planetMesh.orbit = planet.orbit; planetMesh.speed = planet.speed; scene.add(planetMesh); // Create labels var label = new THREE.Mesh( new THREE.PlaneGeometry(2, 1), new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }) ); label.position.set(planet.orbit + 1.5, 0, 0); label.material.map = new THREE.CanvasTexture(createLabel(planet.name)); label.material.needsUpdate = true; scene.add(label); }); // Create orbit lines planets.forEach(planet => { var orbitGeometry = new THREE.RingGeometry(planet.orbit, planet.orbit + 0.1, 32); var orbitMaterial = new THREE.LineBasicMaterial({ color: 0x444444, transparent: true, opacity: 0.5 }); var orbit = new THREE.Line(orbitGeometry, orbitMaterial); scene.add(orbit); }); // Camera controls var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.enableZoom = true; controls.minDistance = 10; controls.maxDistance = 100; camera.position.set(0, 0, 50); // Animation controls var isPaused = false; var resetView = false; // Add controls to the DOM var controlsDiv = document.createElement('div'); controlsDiv.id = 'controls'; document.body.appendChild(controlsDiv); var pauseButton = document.createElement('button'); pauseButton.className = 'button'; pauseButton.textContent = 'Pause'; pauseButton.onclick = function() { isPaused = !isPaused; if (isPaused) { pauseButton.textContent = 'Resume'; } else { pauseButton.textContent = 'Pause'; } }; controlsDiv.appendChild(pauseButton); var resetButton = document.createElement('button'); resetButton.className = 'button'; resetButton.textContent = 'Reset View'; resetButton.onclick = function() { resetView = true; camera.position.set(0, 0, 50); controls.reset(); }; controlsDiv.appendChild(resetButton); // Function to create labels function createLabel(text) { var canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 100; var context = canvas.getContext('2d'); context.font = '20px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillStyle = 'black'; context.fillText(text, canvas.width / 2, canvas.height / 2); return canvas; } // Animation loop function animate() { requestAnimationFrame(animate); if (!isPaused) { planets.forEach(planet => { planetMesh = scene.children.find(child => child === planetMesh); planetMesh.angle += planet.speed; planetMesh.position.set( planet.orbit * Math.cos(planetMesh.angle), 0, planet.orbit * Math.sin(planetMesh.angle) ); label = scene.children.find(child => child.material.map.image.src.includes(planet.name)); label.position.set( planet.orbit * Math.cos(planetMesh.angle) + 1.5, 0, planet.orbit * Math.sin(planetMesh.angle) ); }); } if (resetView) { resetView = false; camera.position.set(0, 0, 50); controls.reset(); } controls.update(); renderer.render(scene, camera); } animate(); // Handle window resizing window.addEventListener('resize', function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html> ``` Let's write this updated `index.html` file and re-run the browser to verify the changes.
index.html (11158 bytes){"action":"inspect"}Successfully wrote to index.html
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.","error: THREE.OrbitControls is not a constructor","warning: [.WebGL-0xc1c00179e00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels"],"dom":"","images":"model does not support images"}
10 minutes have elapsed. At most 5 minutes remain. Finalize the output as soon as possible: save index.html now, fix only essential issues, and finish.