每日见闻之Three.js 创建一个四边形并双面贴图

js 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Three.js PlaneGeometry 示例</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(0x87CEEB); // 天空蓝色背景
        
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 2, 5); // 相机位置：x=0, y=2, z=5
        camera.lookAt(0, 0, 0); // 相机看向原点
        
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // 创建平面几何体（地面）
        const planeGeometry = new THREE.PlaneGeometry(
            5,  // 宽度
            5,  // 高度
            10,  // 宽度分段
            10   // 高度分段
        );
        
        // 加载地面纹理
        const textureLoader = new THREE.TextureLoader();
        const groundTexture = textureLoader.load('https://qcloud.dpfile.com/pc/_vzQAXVr13f_7iwVuYMN-KZdECsM6WjeAFvnO_6J6g0hOLcGgiPlxc9FC8mAyrgC.jpg');
        
        // 设置纹理重复 可以设置平铺的次数
        groundTexture.wrapS = THREE.RepeatWrapping;
        groundTexture.wrapT = THREE.RepeatWrapping;
        groundTexture.repeat.set(3, 5); // 重复5x5次
        
        // 创建材质
        const groundMaterial = new THREE.MeshStandardMaterial({
            map: groundTexture,
            side: THREE.DoubleSide
        });
        
        // 创建地面网格并旋转（默认平面沿XZ轴，这里旋转后沿XY轴作为地面）
        const ground = new THREE.Mesh(planeGeometry, groundMaterial);

        ground.position.y = 0; // 放置在y=0位置
        scene.add(ground);
        
        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 10, 7.5); // 光源位置
        scene.add(directionalLight);
        
        // 动画循环
        function animate() {
          ground.rotation.x += 0.001;
            requestAnimationFrame(animate);
            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 创建一个四边形并双面贴图
