[SOURCE CODE FOR NEBULA] How to use: - New Project: Copy all sections into three files named index.html, style.css, and script.js. - Existing Project: Only copy the [JS] logic and the [HTML] div into your own files. - If your files are named differently (e.g., main.js or global.css), make sure to update the and x--------- --------- --------- ---------x [2. CSS] body { background-color: rgb(0, 1, 7); margin: 0; overflow: hidden; } #nebula-canvas { width: 100vw; height: 100vh; } x--------- --------- --------- ---------x [3. JS] function createScene(containerId) { const container = document.getElementById(containerId); if (!container) return null; const width = container.clientWidth; const height = container.clientHeight; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.z = 3; const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(width, height); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); return {scene, camera, renderer}; } function initNebula(containerId) { const s = createScene(containerId); if (!s) return; const {scene, camera, renderer} = s; const count = 3000; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); for (let i =0; i < count; i++) { const i3 = i * 3; positions[i3] = (Math.random() - 0.5) * 5; positions[i3 + 1] = (Math.random() - 0.5) * 5; positions[i3 + 2] = (Math.random() - 0.5) * 5; colors[i3] = Math.random() * 0.5 + 0.3; colors[i3 + 1] = Math.random() * 0.3; colors[i3 + 2] = Math.random() * 0.5 + 0.5; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 0.05, vertexColors: true, transparent: true, opacity: 0.85 }); const nebula = new THREE.Points(geometry, material); scene.add(nebula); const light = new THREE.PointLight(0x9933ff, 2, 10); scene.add(light); function animate () { requestAnimationFrame(animate); nebula.rotation.y += 0.002; nebula.rotation.x += 0.001; renderer.render(scene, camera); } animate(); } initNebula("nebula-canvas");