每日见闻之 Three.js 创建一个平面环形并上面贴图

火柴就是我2025-07-25 15:24
js 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Three.js RingGeometry 示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <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();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // 创建环形几何体
        const geometry = new THREE.RingGeometry(
            1,          // 内半径
            3,          // 外半径
            32,         // 圆周分段（越多数值越光滑）
            8,          // 径向分段
            0,          // 起始角度
              Math.PI    // 角度范围（这里创建半圆环形）Math.PI * 2就是完整环形
        );
        
        // 加载纹理
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('https://qcloud.dpfile.com/pc/_vzQAXVr13f_7iwVuYMN-KZdECsM6WjeAFvnO_6J6g0hOLcGgiPlxc9FC8mAyrgC.jpg');
        
        // 创建材质（使用受光照影响的材质）
        const material = new THREE.MeshStandardMaterial({
            map: texture,
            side: THREE.DoubleSide, // 双面显示
            transparent: true,      // 允许透明
            alphaTest: 0.1          // 处理透明区域
        });
        
        // 创建网格并添加到场景
        const ring = new THREE.Mesh(geometry, material);
        scene.add(ring);
        
        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 5, 10);
        scene.add(directionalLight);
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            ring.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 创建一个平面环形并上面贴图
