three.js 图片

Three.js是一个基于WebGL的JavaScript库，用于创建动态、交互式的3D图形和动画，特别是在浏览器中。如果你想要在Three.js中使用图片，主要有两种方式：

1. **加载图片作为纹理**：首先，你需要创建一个`TextureLoader`实例，然后使用`.load()`方法从URL加载图片。加载完成后，你可以将这个纹理应用到3D模型的材质上，比如`MeshBasicMaterial`或`MeshStandardMaterial`。

const textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/image.jpg', function(texture) {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

2. **动态纹理**：如果你想在运行时更改3D模型的纹理，你可以创建一个`THREE.SpriteMaterial`，它可以直接使用HTML元素（包含图片）作为纹理。

const spriteMaterial = new THREE.SpriteMaterial({
    map: texture,
    useScreenCoordinates: true
});

const sprite = new THREE.Sprite(spriteMaterial);
// 更新纹理
sprite.material.map = new THREE.Texture(imageElement);