星星 html

Source: Dev.to

渲染器设置

// 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 < 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 < 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 < 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();