每日见闻之Three.js 给球体贴个纹理图

火柴就是我2025-07-24 17:39
js 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Three.js 月球模型</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000); // 黑色背景模拟太空

        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 10;
        camera.position.x = -3;

        // 创建渲染器（开启抗锯齿）
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 加载纹理（使用示例图片替代实际月球纹理）
        const textureLoader = new THREE.TextureLoader();
        // 月球表面纹理（使用灰色纹理模拟月球表面）
        const moonTexture = textureLoader.load('https://qcloud.dpfile.com/pc/_vzQAXVr13f_7iwVuYMN-KZdECsM6WjeAFvnO_6J6g0hOLcGgiPlxc9FC8mAyrgC.jpg');


        // 创建月球模型
        const moon = new THREE.Mesh(
            new THREE.SphereGeometry(3, 32, 32), // 高分段数让表面更平滑
            new THREE.MeshStandardMaterial({
              
                map: moonTexture,       // 表面纹理
                metalness: 0,           // 非金属质感
                roughness: 0.8          // 粗糙表面，符合月球特性
            })
        );
        scene.add(moon);

        // 添加光源
        // 环境光（基础照明）
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
        scene.add(ambientLight);

        // 定向光（模拟太阳光，产生阴影和明暗对比）
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 3, 5); // 从斜上方照射
        scene.add(directionalLight);

        // 动画循环（月球自转）
        function animate() {
            requestAnimationFrame(animate);
            moon.rotation.y += 0.01; // 缓慢自转
            moon.rotation.x += 0.01; // 缓慢自转
            renderer.render(scene, camera);
        }
        animate();

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>