THREE.JS旋转模型变化纹理

在THREE.js中，旋转模型并改变其纹理通常涉及到几个步骤：

1. **创建场景、相机和渲染器**：首先初始化Three.js的核心组件，包括一个场景、一个透视相机和一个WebGL渲染器。

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);

2. **加载模型和纹理**：加载一个3D模型（比如`.obj`或`.gltf`文件），以及对应的纹理图片。例如，你可以使用`three.GLTFLoader`加载模型，`THREE.ImageLoader`加载纹理。

const loader = new THREE.GLTFLoader();
loader.load('model.obj', function(gltf) {
    const model = gltf.scene;
    // 加载纹理
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load('texture.jpg', function(texture) {
        model.material.map = texture; // 将纹理应用到模型上
    });
});

3. **添加到场景**：将加载完成的模型加入场景。

4. **设置旋转动画**：通过修改模型的`rotation`属性或创建一个`THREE.AnimationAction`来实现模型的旋转。

function rotateModel() {
    model.rotation.x += 0.01;
    model.rotation.y += 0.01;
}

// 每帧更新旋转
function animate() {
    requestAnimationFrame(animate);
    rotateModel();
    renderer.render(scene, camera);
}
animate();

5. **纹理变化**：如果你想在旋转过程中改变纹理，可以在旋转动画内动态切换纹理。可以创建多个纹理，并在适当的时间点切换它们。

let currentTextureIndex = 0;

rotateModel = function() {
    model.rotation.x += 0.01;
    model.rotation.y += 0.01;
    
    if (currentTextureIndex < textures.length - 1) {
        currentTextureIndex++;
        model.material.map = textures[currentTextureIndex];
    }
};

记得在项目开始时，还需要处理事件监听和窗口大小调整等细节。