每日见闻之Three.js 绘制球体两个球体

火柴就是我2025-07-24 17:02
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(0xf0f0f0);
        
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 10;
        
        // 开启抗锯齿
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const pointLight = new THREE.PointLight(0xffffff, 0.8);
        pointLight.position.set(5, 5, 5);
        scene.add(pointLight);

        // 1. 外层球体（双面渲染）只绘制一半 后面四个参数决定绘制的角度
        const outerGeometry = new THREE.SphereGeometry(3, 64, 32,0,Math.PI,0,Math.PI);
        const outerMaterial = new THREE.MeshStandardMaterial({
            color: 0x0099ff,
            metalness: 0.7,
            roughness: 0.3,
            side: THREE.DoubleSide // 关键：同时渲染内外表面
        });
        const outerSphere = new THREE.Mesh(outerGeometry, outerMaterial);
        scene.add(outerSphere);

        // 2. 内层小球（模拟实心填充，可选）
        const innerGeometry = new THREE.SphereGeometry(2.9, 64, 32); // 半径略小于外层
        const innerMaterial = new THREE.MeshStandardMaterial({
            color: 0x0099ff, // 与外层同色
            metalness: 0.5,
            roughness: 0.5
        });
        const innerSphere = new THREE.Mesh(innerGeometry, innerMaterial);
        scene.add(innerSphere); // 添加内层小球，增强实心感

        // 动画
        function animate() {
            requestAnimationFrame(animate);
            outerSphere.rotation.x += 0.01;
            outerSphere.rotation.y += 0.01;
            innerSphere.rotation.x += 0.01; // 同步旋转
            innerSphere.rotation.y += 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>
每日见闻之Three.js 绘制 球体 两个球体

每日见闻之Three.js 绘制球体两个球体
