three.js贴图

Three.js是一个用于在Web上创建和显示3D图形的JavaScript库。要在Three.js中添加纹理（贴图），可以按照以下步骤进行操作：

1. 导入所需的库文件和模型文件。确保你已经导入了Three.js的核心库以及其他所需的扩展库（如OrbitControls.js）。

2. 创建一个场景（Scene），相机（Camera）和渲染器（Renderer）。

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

3. 创建一个几何体（Geometry）并为其添加材质（Material）。

var geometry = new THREE.BoxGeometry(1, 1, 1);
var texture = new THREE.TextureLoader().load('path/to/texture.jpg');
var material = new THREE.MeshBasicMaterial({ map: texture });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

在这个例子中，我们创建了一个立方体几何体，并使用`TextureLoader`加载一个纹理图片。然后，我们使用`MeshBasicMaterial`将纹理应用到立方体上。

4. 设置相机位置并添加交互控制（可选）。

camera.position.z = 5;

var controls = new THREE.OrbitControls(camera, renderer.domElement);

这将设置相机的位置并添加鼠标和触摸交互控制。

5. 渲染场景。

function animate() {
    requestAnimationFrame(animate);

    // 进行一些动画或交互操作

    renderer.render(scene, camera);
}
animate();

以上是一个基本的例子，它演示了如何在Three.js中添加纹理。你可以根据自己的需求进行更多的定制和扩展。记得将`'path/to/texture.jpg'`替换为你自己的纹理图片路径。