嘿，这两个问题本质上都是围绕Three.js中纹理UV坐标变换的核心操作，我给你一步步拆解具体实现方式：

问题1：如何使用Three.js实现纹理沿球体水平滑动？ #

球体的纹理映射依赖UV坐标，水平滑动其实就是在UV的**U轴（水平方向）**上持续偏移坐标值。具体步骤如下：

• 首先确保你的球体使用支持纹理的材质（比如MeshStandardMaterial、MeshBasicMaterial），并且已经加载好目标纹理。
• 核心操作是修改纹理的offset.x属性——这个属性直接控制UV的水平偏移量，值越大，纹理越往右滑（负数则向左）。
• 如果要实现持续滑动效果，配合requestAnimationFrame动画循环更新偏移值即可，记得循环重置偏移量避免数值无限增大。

代码示例：

// 假设你已经创建好球体几何体、场景、相机和渲染器
const textureLoader = new THREE.TextureLoader();
const sphereTexture = textureLoader.load('your-texture.jpg');

// 设置纹理水平循环，避免滑动时出现空白
sphereTexture.wrapS = THREE.RepeatWrapping;

const sphereMaterial = new THREE.MeshStandardMaterial({ map: sphereTexture });
const sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 64, 64), sphereMaterial);
scene.add(sphere);

// 动画循环实现滑动
function animate() {
  requestAnimationFrame(animate);
  
  // 控制滑动速度，这里每次偏移0.005，可根据需求调整
  sphereTexture.offset.x += 0.005;
  // 偏移量超过1时重置，保证纹理循环显示
  if (sphereTexture.offset.x > 1) {
    sphereTexture.offset.x = 0;
  }
  
  renderer.render(scene, camera);
}
animate();

如果只需要单次滑动到指定位置，直接给offset.x设置目标值即可，不用循环更新。

问题2：360查看器中旋转纹理指定角度/Y轴单位，不影响其他显示效果 #

360查看器通常是把全景纹理贴在球体内部（所以材质要设side: THREE.BackSide），这里的旋转需求可以通过两种方式实现，都不会影响纹理本身的显示质量：

方式1：旋转指定角度 #

直接使用纹理的rotation属性，不过要记得设置旋转中心为纹理中点，否则会围绕左上角旋转导致偏移：

const panoramaTexture = textureLoader.load('your-360-panorama.jpg');
// 水平循环纹理，旋转后不会出现空白
panoramaTexture.wrapS = THREE.RepeatWrapping;
// 垂直方向保持 clamp，避免顶部底部拉伸
panoramaTexture.wrapT = THREE.ClampToEdgeWrapping;

// 设置旋转中心为纹理中心（必须！）
panoramaTexture.center.set(0.5, 0.5);
// 旋转90度（把90换成你需要的角度，用degToRad转成弧度）
panoramaTexture.rotation = THREE.MathUtils.degToRad(90);

// 创建内部可见的球体
const panoramaMaterial = new THREE.MeshBasicMaterial({ 
  map: panoramaTexture, 
  side: THREE.BackSide 
});
const panoramaSphere = new THREE.Mesh(new THREE.SphereGeometry(50, 64, 64), panoramaMaterial);
scene.add(panoramaSphere);

方式2：按Y轴单位（水平偏移）旋转 #

全景图的U轴对应经度，每偏移1个单位的offset.x，对应360度的旋转。所以要旋转N度，直接计算offset.x = N / 360即可：

// 示例：旋转45度
const targetRotateDeg = 45;
panoramaTexture.offset.x = targetRotateDeg / 360;

// 如果需要持续按Y轴单位旋转（比如每次旋转10度）
function rotateByYUnit(deg) {
  panoramaTexture.offset.x += deg / 360;
  // 取模保证偏移量在0-1之间，循环生效
  panoramaTexture.offset.x = panoramaTexture.offset.x % 1;
}
// 调用：rotateByYUnit(10) 即可让全景向右旋转10度

两种方式都不会改变纹理本身的像素，只是调整UV映射的位置，完全不影响其他显示效果。

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