three.js:将外部纹理应用于glTF

基础概念

three.js 是一个广泛使用的 JavaScript 库，用于在浏览器中创建和显示 3D 图形。glTF（GL Transmission Format）是一种用于 3D 模型和场景的开放标准格式，旨在高效传输和加载 3D 内容。

纹理是将图像应用于 3D 模型表面的技术，可以增加模型的视觉细节和真实感。外部纹理是指纹理图像存储在模型文件之外，需要在加载模型时单独指定。

类型

外部纹理可以是以下几种类型：

漫反射纹理：定义物体表面的颜色和粗糙度。
法线纹理：用于模拟物体表面的微小细节，增加光照效果。
高光纹理：定义物体表面高光部分的亮度和范围。
环境光遮蔽纹理：模拟物体表面不同区域的阴影效果。

应用场景

外部纹理广泛应用于各种 3D 场景中，例如：

游戏开发：增强角色和环境的视觉效果。
虚拟现实：提供沉浸式的视觉体验。
建筑可视化：展示建筑物的细节和材质。
艺术创作：用于数字艺术和动画制作。

实现方法

以下是一个简单的示例代码，展示如何在 three.js 中将外部纹理应用于 glTF 模型：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.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 textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/your/texture.jpg', (texture) => {
    texture.encoding = THREE.sRGBEncoding; // 确保纹理颜色空间正确

    // 加载 glTF 模型
    const gltfLoader = new THREE.GLTFLoader();
    gltfLoader.load('path/to/your/model.glb', (gltf) => {
        const model = gltf.scene;

        // 应用纹理到模型
        model.traverse((child) => {
            if (child.isMesh) {
                child.material.map = texture;
                child.material.needsUpdate = true;
            }
        });

        scene.add(model);

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

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

可能遇到的问题及解决方法

纹理加载失败：
- 原因：纹理文件路径错误或网络问题。
- 解决方法：检查纹理文件路径是否正确，并确保网络连接正常。

纹理显示不正确：
- 原因：纹理坐标未正确设置或纹理格式不支持。
- 解决方法：确保模型包含正确的纹理坐标，并检查纹理格式是否为 three.js 支持的格式（如 JPG、PNG）。
性能问题：
- 原因：纹理图像过大或未优化。
- 解决方法：使用图像压缩工具优化纹理图像，并确保纹理图像大小适合目标平台。