three.js texture2D

### 如何在Three.js中使用Texture2D

为了在Three.js项目里加载并应用纹理(Texture)，通常会采用`THREE.TextureLoader`来完成这一操作。由于纹理加载属于异步过程，在初始化材质或对象之前应当确保所有必要的纹理已经成功加载完毕，否则可能会遇到诸如颜色不正常等问题[^1]。

#### 加载纹理
下面是一段用于加载图片作为纹理的例子：

const loader = new THREE.TextureLoader();
// 使用Promise处理异步加载逻辑
async function initTextures() {
    try {
        const texture = await new Promise((resolve, reject) => {
            loader.load(
                'path/to/image.jpg',
                resolve,
                undefined,
                reject
            );
        });
        console.log("Texture loaded successfully");
        applyTexture(texture);
    } catch (error) {
        console.error('An error happened.', error);
    }
}

一旦纹理被正确加载之后就可以将其应用于几何体上:

function applyTexture(tex){
    var material = new THREE.MeshBasicMaterial({ map: tex });
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var cube = new THREE.Mesh(geometry, material);

    scene.add(cube);
}

对于更复杂的场景比如水面效果，则可能涉及到更多参数配置以及特殊类型的纹理如法线贴图(normal maps), 这时候可以参照具体案例中的实现方式[^3]。