JIT
creating a 3d solar system simulation with three.js
import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); const createPlanet = (size, color, distance, rotationSpeed) => { const geometry = new THREE.SphereGeometry(size, 32, 32); const material = new THREE.MeshBasicMaterial({ color }); const planet = new THREE.Mesh(geometry, material); planet.position.x = distance; planet.rotationSpeed = rotationSpeed; return planet; }; const sun = createPlanet(2, 0xffff00, 0, 0); scene.add(sun); const earth = createPlanet(0.5, 0x0000ff, 5, 0.01); scene.add(earth); const mars = createPlanet(0.3, 0xff0000, 7, 0.008); scene.add(mars); camera.position.z = 10; const animate = () => { requestAnimationFrame(animate); sun.rotation.y += 0.01; earth.rotation.y += earth.rotationSpeed; earth.position.x = 5 * Math.cos(Date.now() * 0.001); earth.position.z = 5 * Math.sin(Date.now() * 0.001); mars.rotation.y += mars.rotationSpeed; mars.position.x = 7 * Math.cos(Date.now() * 0.0015); mars.position.z = 7 * Math.sin(Date.now() * 0.0015); controls.update(); renderer.render(scene, camera); }; animate(); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

I'll help you set up a complete Three.js solar system simulation with proper project structure and dependencies.

Updated files
v1
show the planets motion around sun

I'll enhance the solar system simulation to show proper orbital motion around the sun with better visuals and realistic orbits.

Updated files
v2