Three.js中如何在球体几何体上旋转纹理而非物体？

完全可以实现，核心是直接操作纹理对象的变换属性，不需要修改几何体或网格的旋转参数。以下是具体实现方法和代码示例：

基础纹理平面旋转（绕物体Z轴视觉效果） #

这是最常用的场景，让纹理在自身平面内旋转，视觉上相当于绕球体的Z轴转动：

// 1. 创建球体几何体
const sphereGeometry = new THREE.SphereGeometry(5, 32, 32);

// 2. 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('你的纹理文件路径');

// 3. 设置旋转中心（关键：默认旋转中心在纹理左上角，需改为中心避免偏移）
texture.center.set(0.5, 0.5);

// 4. 设置旋转角度（将角度转为弧度，示例为45度）
texture.rotation = THREE.MathUtils.degToRad(45);

// 5. 创建材质并应用纹理
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(sphereGeometry, material);

scene.add(sphere);

模拟绕物体X/Y轴的纹理旋转 #

如果需要实现类似绕球体X/Y轴旋转纹理的效果，需要通过纹理的matrix属性构建2D变换矩阵：

// 加载纹理（步骤同上，略过）
const texture = textureLoader.load('你的纹理文件路径');
texture.center.set(0.5, 0.5);

// 定义旋转角度（转为弧度）
const xRotateDeg = 30; // 绕X轴旋转30度
const yRotateDeg = 20; // 绕Y轴旋转20度
const xRad = THREE.MathUtils.degToRad(xRotateDeg);
const yRad = THREE.MathUtils.degToRad(yRotateDeg);

// 构建变换矩阵，组合X/Y轴的旋转效果
const euler = new THREE.Euler(xRad, yRad, 0);
texture.matrix.makeRotationFromEuler(euler);

// 关闭自动矩阵更新（手动修改matrix时必须设置）
texture.matrixAutoUpdate = false;

// 创建材质和网格（步骤同上）
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);

注意事项 #

• 若旋转后纹理出现空白或拉伸，检查纹理的wrapS/wrapT属性，可设置为THREE.RepeatWrapping确保纹理重复显示。
• 所有材质类型（包括MeshStandardMaterial等PBR材质）都适用此方法，只需修改对应纹理对象的属性即可。

内容的提问来源于stack exchange，提问作者siwakw7