3D solar system · llama-3.1-8b-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.
<write>{"content": "<!DOCTYPE html>\n<html>\n<head>\n\t<title>Solar System Simulator</title>\n\t<style>\n\t\tbody {\n\t\t\tbackground-color: #000;\n\t\t}\n\n\t\t#canvas {\n\t\t\twidth: 800px;\n\t\t\theight: 600px;\n\t\t}\n\n\t\t.star {\n\t\t\tposition: absolute;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-radius: 50%;\n\t\t\ttransition: opacity 0.1s;\n\t\t}\n\t</style>\n</head>\n<body>\n\t<div id=\"canvas\"></div>\n\t<script src=\"three.min.js\"></script>\n\t<script>\n\t\tpixiLoader.init({\n\t\t\t\tresourceUrl: \"/\",\n\t\t\t});\n\t\tvar camera, scene, renderer, stars, planets, controls;\n\t\tinit();\n\t\tfunction init() {\n\t\t\t// Canvas and renderer\n\t\t\trenderer = new PIXI.autoDetectRenderer(800, 600, {\n\t\t\t\t\ttransparent: true,\n\t\t\t\t\tresolution: 1\n\t\t\t\t});\n\t\t\tdocument.getElementById(\"canvas\").appendChild(renderer.view);\n\t\t\t\n\t\t\t// Scene and camera\n\t\t\tscene = new THREE.Scene();\n\t\t\tnavigator.geolocation.getCurrentPosition(function(position) {\n\t\t\t\tposition.coords.latitude > 0\n\t\t\t\t\t? (camera = new THREE.PerspectiveCamera(45, 800 / 600, 1, 10000))\n\t\t\t\t\t: (camera = new THREE.PerspectiveCamera(45, 600 / 800, 1, 10000));\n\t\t\t\tposition.coords.longitude > 0\n\t\t\t\t\t? (camera.position.x = -800)\n\t\t\t\t\t: (camera.position.x = +800);\n\t\t\t\tcamera.position.z = 3000;\n\t\t\t\tcamera.lookAt(new THREE.Vector3(0, 0, 0));\n\t\t\t\ncamera.rotateY(0.03);\n\t\t\t\t// camera.position.set(0, 0, -1000);\n\t\t\t\t// camera.lookAt(new THREE.Vector3(0, 0, 400));\n\t\t\t\t});\n\t\t\t\n\t\t\t// Controls\n\t\t\tcontrols = new THREE.TrackballControls(camera);\n\t\t\tcontrols.target.set(0, 0, 0);\n\t\t\tcontrols.maxDistance = 10000;\n\t\t\tparameters.rotation.x = 0;\tparameters.rotation.y = 0;\tparameters.rotation.z = 0;\tparameters.rotation order = THREE.XZY Rotation order;\n\t\t\tvar animate;\n\t\t\t\n\t\t\t// Starfield\n\t\t\tstars = new THREE.Group();\n\t\t\tfor (var i = 0; i < 2000; i++) {\n\t\t\t\t\t//var star = new THREE.Mesh(new THREE.SphereGeometry(0.1, 3, 3), new Three.ShaderMaterial( { uniforms: { color: 0xffffff }} ));\n\t\t\t\t\tvar star = new PIXI.DisplayObjectContainer();\n\t\t\t\t\tstar.position.set((Math.random() * 400 + 400) - 200,\n\t\t\t\t\t\t(Math.random() * 300 + 300) - 150,\n\t\t\t\t\t\t200);\n\t\t\t\t\tvar light = new THREE.PointLight(0xffffff, 1, 0);\n\t\t\t\t\tscene.add(light);\n\t\t\t\t\tscene.add(star);\n\t\t\t\t\tstars.add(star);\n\t\t\t\t}\n\t\t\tscene.add(stars);\n\t\t\t\n\t\t\t// Planets\n\t\t\tparticles = new THREEx.ParticlesSystem();\n\t\t\tplanetSystem = new THREEx.ParticlesSystem();\n\t\t\tparticles.position.set(500, 0, 0);\n\t\t\tparticles.update = updateParticles;\n\t\t\tplanetSystem.position.set(-500, 0, 0);\n\t\t\tplanetSystem.update = updatePlanetSystem;\n\t\t\tscene.add(particles);\n\t\t\tscene.add(planetSystem);\n\t\t\t\n\t\t\t// Add planets\n\t\t\taddPlanet('Mercury', -800, 300, 500, 500);\n\t\t\taddPlanet('Venus', +800, -300, 500, 500);\n\t\t\taddPlanet('Earth', -600, 0, 0, 0);\n\t\t\taddPlanet('Mars', +600, 0, 0, 0);\n\t\t\taddPlanet('Jupiter', -1000, 200, 1200, 200);\n\t\t\taddPlanet('Saturn', +1000, -200, 1200, 300);\n\t\t\t\n\t\t\t// Animate\n\t\t\tanimate = function() {\n\t\t\t\trequestAnimationFrame(animate);\n\t\t\t\trenderer.render(scene, camera);\n\t\t\t\tcontrols.update();\n\t\t\t\t};\n\t\t\tanimate();\n\t\t}\n\t\tfunction updateParticles( particles ) {\n\t\t\t// particles.update();\n\t\t\t// var time = Date.now() * 0.001;\n\t\t\tparticles.position.x = Math.cos(time) * 500 + 500;\n\t\t\tparticles.position.y = Math.sin(time) * 500;\n\t\t\t};\n\t\tfunction updatePlanetSystem( planetSystem ) {\n\t\t\tvar time = Date.now() * 0.001;\n\t\t\tparticles.material.uniforms.time.value = time;\n\t\t\tplanetSystem.position.x = Math.cos(time) * 500 + 500;\n\t\t\t};\n\t\tparameters.rotation.y += 0.03;\n\t\tfunction addPlanet(name, x, y, speed, size) {\n\t\t\t\t// var geometry = new THREE.SphereGeometry(size, 60, 30);\n\t\t\t\t// var material = new THREE.MeshPhongMaterial({map: THREE.TextureLoader.load('textures/planets/' + name + '.jpg'),shading: THREE.SmoothShading});\n\t\t\t\t// var sphere = new THREE.Mesh(geometry, material);\n\t\t\t\t// scene.add(sphere);\n\t\t\t\t\t\t// sphere.position.set(x, y, 0);\n\t\t\t\tvar particle = particles.particles[ 0 ];\n\t\t\t\tparticles.particles[ 0 ].position.set(x, y, 0);\n\t\t\t\t\tparticles.particles[ 0 ].velocity.multiplyScalar(0);\n\t\t\t\t\tparticles.particles[ 0 ].velocity.x += Math.cos(Date.now() * 0.001 + speed * 3.5) * 0.1;\n\t\t\t\tparticles.particles[ 0 ].velocity.y += Math.sin(Date.now() * 0.001 + speed * 3.5) * 0.1;\n\t\t\t\tvar planet = planetSystem.particles[ 0 ];\n\t\t\t\tparticleSystem.particles[ 0 ].position.set(x, y, 0);\n\t\t\t\tplanet.velocity.multiplyScalar(0);\n\t\t\t\tplanets.velocity.x += Math.cos(Date.now() * 0.001 + speed * 3.5) * 0.1;\n\t\t\t\tplanets.velocity.y += Math.sin(Date.now() * 0.001 + speed * 3.5) * 0.1;\n\t\t\t\t// console.log(x, y, speed, size);\n\t\t\t\t\n\t\t\t}\n\t\tfunction orbitDragCamera() {\n\t\t\t\tparameters.rotation.order = THREE.XZY Rotation order;\n\t\t\t\tvar animate = function() {\n\t\t\t\t\tparameters.rotation.order = THREE.XZY Rotation order;\n\t\t\t\t\trequestAnimationFrame(animate);\n\t\t\t\t\trenderer.render(scene, camera);\n\t\t\t\t\t};\n\t\t\t\tanimate();\n\t\t\t};\n\t\t</script>\n\t<script>\n\t\tTHREE.loadTexture('planets/Mercury-2.png', TextureLoader, function(texture) {\n\t\t\tTHREE.ImageUtils.crossOrigin = \"anonymous\";\n\t\t\tTHREE.ImageUtils.loadTexture('planets/Mars-2.png', TextureLoader, function(texture) {\n\t\t\t\tTHREE.ImageUtils.loadTexture('planets/Mars-2.png', TextureLoader, function(texture) {\n\t\t\t}, null);\n\t\t\t\tTHREE.ImageUtils.loadTexture('planets/Venus-2.png', TextureLoader, function(texture) {\n\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tparameters.crossOrigin = \"anonymous\";\n\t\t\tTHREE.loadTexture('planets/Earth-2.png', TextureLoader, function(texture) {\n\t\t\t\tTHREE.loadTexture('planets/Saturn-2.png', TextureLoader, function(texture) {\n\t\t\t\t\tparameters.crossOrigin = \"anonymous\";\n\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t}, null);\n\t\t\t\t}, null);\n\t\t\t\n\t\t\t};\n\t\t</script>\n\n\t<noscript>Sorry, it looks like your browser doesn't support JavaScript!</noscript>\n</body>\n</html>"}</function>
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.