三维纹理贴图入门：在 Three.js 中应用纹理

在三维图形编程中，纹理贴图是一种技术，用于在模型表面添加图像，从而模拟更真实的材质和细节。Three.js 提供了强大的纹理处理能力，允许开发者轻松地为三维模型添加丰富多彩的纹理效果。

纹理贴图的基本概念

纹理贴图通常包含颜色信息，可以应用于模型的表面，模拟不同的材质和图案。在 Three.js 中，纹理通过 Texture 对象表示，可以通过 TextureLoader 加载图像文件来创建。

纹理加载和应用

使用 Three.js 的 TextureLoader 加载纹理，并将其应用到材质上。

// 创建几何体
const geometry = new THREE.PlaneGeometry(200, 100);

// 创建纹理加载器
const loader = new THREE.TextureLoader();

// 加载纹理图像，并创建纹理对象
const texture = loader.load('path/to/your/texture.jpg');

// 创建材质，并设置纹理
const material = new THREE.MeshLambertMaterial({
  map: texture
});

纹理和颜色属性的混合

在设置了纹理贴图后，材质的 color 属性将与纹理的 RGB 值混合。通常，如果使用了纹理，就不需要设置 color 属性。

不同几何体的纹理映射

纹理映射的效果会受到几何体的 UV 坐标影响。不同的几何体，如平面、长方体、球体等，会有不同的 UV 坐标，从而影响纹理的映射方式。

纹理颜色空间

从 Three.js 的 r125 版本开始，默认的纹理编码方式已经改变。为避免色差，你可能需要将纹理对象的编码方式设置为 THREE.SRGBColorSpace。

texture.colorSpace = THREE.SRGBColorSpace;

完整实例代码

以下是一个完整的例，展示如何在 Three.js 中加载纹理并应用到平面几何体上：

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建平面几何体
        const geometry = new THREE.PlaneGeometry(200, 100);

        // 创建纹理加载器并加载纹理
        const loader = new THREE.TextureLoader();
        const texture = loader.load('path/to/your/texture.jpg');
        texture.colorSpace = THREE.SRGBColorSpace; // 设置纹理颜色空间

        // 创建材质并应用纹理
        const material = new THREE.MeshLambertMaterial({
            map: texture
        });

        // 创建网格模型并添加到场景中
        const plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

        // 设置相机位置
        camera.position.z = 5;

        // 渲染循环
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

请将 'path/to/your/texture.jpg' 替换为您要加载的纹理图像的实际路径。此示例创建了一个简单的平面，并为其应用了纹理贴图，然后将其添加到场景中进行渲染。