Stars html

#html #javascript #showdev

<!DOCTYPE html>

3D Moon Scene

 
body { 
margin: 0; 
overflow: hidden; 
background-color: #111827; 
} 
canvas { 
display: block; 
} 

 
// 1. Scene Setup 
const scene = new THREE.Scene(); 
scene.background = new THREE.Color(0x111827); // Dark gray background as requested
<div class="highlight"><pre class="highlight plaintext"><code> // 2. Camera Setup
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 15;

// 3. Renderer Setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// 4. Procedural Moon Texture Generation
// We generate a texture programmatically to avoid loading external assets/CORS issues.
function createMoonTexture() {
    const size = 1024;
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Base color
    ctx.fillStyle = '#cccccc'; 
    ctx.fillRect(0, 0, size, size);

    // Draw random craters
    for (let i = 0; i &amp;lt; 600; i++) {
        const x = Math.random() * size;
        const y = Math.random() * size;
        const radius = Math.random() * 15 + 2;

        // Crater shade
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(100, 100, 100, ${Math.random() * 0.5 + 0.2})`;
        ctx.fill();
    }

    // Add some noise for surface roughness
    const imageData = ctx.getImageData(0, 0, size, size);
    const data = imageData.data;
    for (let i = 0; i &amp;lt; data.length; i += 4) {
        const noise = (Math.random() - 0.5) * 20;
        data[i] = Math.max(0, Math.min(255, data[i] + noise));     // R
        data[i+1] = Math.max(0, Math.min(255, data[i+1] + noise)); // G
        data[i+2] = Math.max(0, Math.min(255, data[i+2] + noise)); // B
    }
    ctx.putImageData(imageData, 0, 0);

    const texture = new THREE.CanvasTexture(canvas);
    return texture;
}

const moonTexture = createMoonTexture();

// 5. Create the Moon Object
const moonGeometry = new THREE.SphereGeometry(3, 64, 64);
const moonMaterial = new THREE.MeshStandardMaterial({
    map: moonTexture,
    roughness: 0.8,
    metalness: 0.1,
    bumpMap: moonTexture,
    bumpScale: 0.05,
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
scene.add(moon);

// 6. Create Stars (Particle System)
const starsGeometry = new THREE.BufferGeometry();
const starsCount = 2000;
const posArray = new Float32Array(starsCount * 3);

for(let i = 0; i &amp;lt; starsCount * 3; i++) {
    // Random position spread far out
    posArray[i] = (Math.random() - 0.5) * 100; 
}

starsGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const starsMaterial = new THREE.PointsMaterial({
    size: 0.05,
    color: 0xffffff,
    transparent: true,
    opacity: 0.8
});
const starMesh = new THREE.Points(starsGeometry, starsMaterial);
scene.add(starMesh);

// 7. Lighting
// Ambient light for the dark side details
const ambientLight = new THREE.AmbientLight(0xffffff, 0.05);
scene.add(ambientLight);

// Directional light (The Sun)
const sunLight = new THREE.DirectionalLight(0xffffff, 1.5);
sunLight.position.set(10, 5, 10);
scene.add(sunLight);

// 8. Handle Window Resize
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// 9. Animation Loop
function animate() {
    requestAnimationFrame(animate);

    // Rotate the moon
    moon.rotation.y += 0.001;

    // Slowly rotate stars background
    starMesh.rotation.y -= 0.0002;

    renderer.render(scene, camera);
}

animate();

</script>
</code></pre></div>
</body> 
</html>

DEV Community

Stars html

Top comments (0)