Three.js(R3F)中解决相机旋转时全景图像畸变问题

你的代码存在几个关键问题，导致相机旋转时全景图出现畸变，以下是修正方案：

1. 修正纹理与材质配置 #

全景图属于等矩形贴图，需要正确设置纹理映射模式，同时调整材质的渲染面（相机处于球体内部，应渲染背面）：

import { useLoader } from '@react-three/fiber';
import * as THREE from 'three';

const Sphere = ({ url }) => {
  const texture = useLoader(THREE.TextureLoader, url);
  
  // 适配等矩形全景图的纹理设置
  texture.mapping = THREE.EquirectangularReflectionMapping;
  texture.wrapS = THREE.ClampToEdgeWrapping;
  texture.wrapT = THREE.ClampToEdgeWrapping;
  texture.encoding = THREE.sRGBEncoding;

  return (
    <mesh>
      <sphereGeometry args={[500, 60, 40]} />
      {/* 相机在球内，使用BackSide渲染球面内侧 */}
      <meshStandardMaterial
        map={texture}
        side={THREE.BackSide}
        roughness={0}
        metalness={0}
      />
    </mesh>
  );
};

2. 配置OrbitControls避免相机移出球体 #

OrbitControls默认让相机绕目标旋转，你需要限制相机的移动范围，确保它始终在球内，同时固定目标点在球心：

import { OrbitControls } from '@react-three/drei';

const Wrapper = () => {
  return (
    <>
      <ambientLight intensity={1} />
      <OrbitControls
        enableZoom={false} // 全景场景通常不需要缩放
        minDistance={490}
        maxDistance={500}
        target={[0, 0, 0]} // 保持旋转目标在球心
      />
      <Sphere url="你的全景图地址" />
    </>
  );
};

关于你尝试的lookAt无效的原因 #

你之前用useFrame调用sphereRef.current.lookAt(camera.position)没用，是因为全景球面是作为环境存在的，不需要跟随相机转动——OrbitControls控制的是相机围绕球心旋转，球体保持静止即可，只要纹理映射正确，就不会出现畸变。

额外注意事项 #

• 确保你的全景图是标准的等矩形格式（宽高比2:1），这是避免畸变的基础；
• 如果不需要光照效果，可改用meshBasicMaterial，渲染更高效，也不会因光照干扰误以为是畸变。

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