Three.js Core Setup

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n\\n/* =========================================================\\n 1. INITIALIZATION (CORE SETUP)\\n ---------------------------------------------------------\\n Setup the fundamental components required for rendering:\\n - Canvas (DOM target)\\n - Scene (3D world)\\n - Camera (viewpoint)\\n - Renderer (draws to screen)\\n========================================================= */\\n\\n// Canvas: HTML element where WebGL renders the scene\\nconst canvas = document.getElementById(\\\"webgl\\\");\\n\\n// Scene: container for all 3D objects, lights, and cameras\\nconst scene = new THREE.Scene();\\n\\n// Camera: defines the perspective view\\n// Parameters: (FOV, Aspect Ratio, Near, Far)\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 1000,\\n);\\n\\n// Position camera so objects are visible\\ncamera.position.z = 5;\\n\\n// Renderer: responsible for drawing the scene to the canvas\\nconst renderer = new THREE.WebGLRenderer({\\n canvas: canvas,\\n antialias: true, // smoother edges\\n});\\n\\n// Match renderer size with viewport\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\n\\n// Improve rendering quality on high-DPI screens\\nrenderer.setPixelRatio(window.devicePixelRatio);\\n\\n/* =========================================================\\n 2. OBJECT CREATION (MESH)\\n ---------------------------------------------------------\\n Create a renderable object using:\\n - Geometry (shape)\\n - Material (appearance)\\n - Mesh (combination)\\n========================================================= */\\n\\n// Geometry: defines the structure (cube)\\nconst geometry = new THREE.BoxGeometry();\\n\\n// Material: defines visual appearance\\nconst material = new THREE.MeshBasicMaterial({\\n color: 0x00ff00,\\n wireframe: true,\\n});\\n\\n// Mesh: combines geometry + material into a renderable object\\nconst cube = new THREE.Mesh(geometry, material);\\n\\n// Add object to the scene (now part of the world)\\nscene.add(cube);\\n\\n/* =========================================================\\n 3. RENDER LOOP (ANIMATION SYSTEM)\\n ---------------------------------------------------------\\n Continuously updates and renders the scene.\\n This loop runs every frame using requestAnimationFrame.\\n========================================================= */\\n\\nfunction animate() {\\n // Schedule next frame\\n requestAnimationFrame(animate);\\n\\n // Update object (example: rotate cube)\\n cube.rotation.x += 0.01;\\n cube.rotation.y += 0.01;\\n\\n // Render scene from camera perspective\\n renderer.render(scene, camera);\\n}\\n\\n// Start animation loop\\nanimate();\\n\\n/* =========================================================\\n 4. RESPONSIVE HANDLING\\n ---------------------------------------------------------\\n Ensures the scene adapts to screen size changes.\\n========================================================= */\\n\\nwindow.addEventListener(\\\"resize\\\", () => {\\n // Update camera aspect ratio\\n camera.aspect = window.innerWidth / window.innerHeight;\\n\\n // Apply updated projection\\n camera.updateProjectionMatrix();\\n\\n // Resize renderer to match viewport\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n\\n // Adjust for device pixel ratio\\n renderer.setPixelRatio(window.devicePixelRatio);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"e90e9a65-2dac-48e0-ac2d-04551277a8c1","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n}\\n\\nbody {\\n overflow: hidden;\\n background: #000;\\n font-family: Arial, sans-serif;\\n}\\n\\n#webgl {\\n display: block;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\nThree.js Core Setup\\n \\n\\n\\n

\\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n\\n/* =========================================================\\n 1. INITIALIZATION (CORE SETUP)\\n========================================================= */\\n\\n// Canvas\\nconst canvas = document.getElementById(\\\"webgl\\\");\\n\\n// Scene\\nconst scene = new THREE.Scene();\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 1000,\\n);\\ncamera.position.set(0, 1, 5); // slightly higher for better view\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({\\n canvas: canvas,\\n antialias: true,\\n});\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(window.devicePixelRatio);\\n\\n/* =========================================================\\n 2. LIGHTING (IMPORTANT FOR REALISM)\\n========================================================= */\\n\\n// Ambient light (soft global light)\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\n// Directional light (like sun)\\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 1);\\ndirectionalLight.position.set(5, 5, 5);\\nscene.add(directionalLight);\\n\\n/* =========================================================\\n 3. OBJECTS (SPHERE + GROUND)\\n========================================================= */\\n\\n// Sphere (main object)\\nconst sphereGeometry = new THREE.SphereGeometry(1, 32, 32);\\nconst sphereMaterial = new THREE.MeshStandardMaterial({\\n color: 0x3399ff,\\n roughness: 0.4,\\n metalness: 0.2,\\n});\\nconst sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);\\nscene.add(sphere);\\n\\n// Ground (plane)\\nconst planeGeometry = new THREE.PlaneGeometry(10, 10);\\nconst planeMaterial = new THREE.MeshStandardMaterial({\\n color: 0x222222,\\n});\\nconst plane = new THREE.Mesh(planeGeometry, planeMaterial);\\n\\n// Rotate plane to be horizontal\\nplane.rotation.x = -Math.PI / 2;\\nplane.position.y = -1.5;\\nscene.add(plane);\\n\\n/* =========================================================\\n 4. ANIMATION LOOP\\n========================================================= */\\n\\nfunction animate() {\\n requestAnimationFrame(animate);\\n\\n const time = Date.now() * 0.001;\\n\\n // Move camera in circle\\n camera.position.x = Math.sin(time) * 5;\\n camera.position.z = Math.cos(time) * 5;\\n\\n // Always look at the center (object)\\n camera.lookAt(0, 0, 0);\\n\\n renderer.render(scene, camera);\\n}\\n\\nanimate();\\n\\n/* =========================================================\\n 5. RESPONSIVE HANDLING\\n========================================================= */\\n\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n renderer.setPixelRatio(window.devicePixelRatio);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"a6c93e6b-0062-4bd9-b5d3-273b41ffb86f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]