React Three Fiber旋转相机/场景失效，求翻转灯具且保留OrbitControls的方案

核心问题分析 #

你之前尝试旋转相机或整个场景的思路不对——OrbitControls会持续维护相机的状态，直接修改相机旋转会被控制器的帧更新覆盖；旋转整个场景会影响所有对象（包括灯光、环境），这既不是你要的效果，也容易和r3f的渲染机制冲突。正确的做法是直接针对灯具对象本身做旋转，这样既不会破坏OrbitControls的交互，也能精准实现灯具倒置的需求。

解决方案1：给灯具组件添加旋转属性 #

如果可以修改LampLoader组件，直接在加载的模型上设置旋转参数即可。比如要让灯具绕X轴倒置（上下翻转），可以在组件内给模型添加rotation：

// 修改LampLoader组件示例
function LampLoader({ index }) {
  // 假设这里是你的模型加载逻辑
  const lampModel = useLoader(/* 你的加载器和模型路径 */);
  
  return (
    <primitive 
      object={lampModel.scene} 
      rotation={[Math.PI, 0, 0]} // 绕X轴旋转180度实现倒置
    />
  );
}

解决方案2：用Group包裹灯具统一旋转 #

如果不想修改LampLoader组件，在Canvas中把灯具放在一个<group>容器里，给容器设置旋转即可，这样整个灯具组会被统一翻转，不影响其他场景元素和OrbitControls：

// 你的Canvas代码修改后
<Canvas>
  <OrbitControls maxDistance={900} minDistance={30} enablePan={true} />
  {/* 用group包裹灯具并设置旋转 */}
  <group rotation={[Math.PI, 0, 0]}>
    {(props.socketType == constants.socketNames.leroyMerlin) && <LampLoader index={0} />}
    {(props.socketType == constants.socketNames.e27) && <LampLoader index={1} />}
  </group>
  <pointLight position={[0, 200, 200]} intensity={0.5} />
  <ambientLight intensity={0.3} />
  <Environment near={1} far={1000} resolution={256} preset="warehouse" />
  <mesh>
    <sphereBufferGeometry />
    <meshStandardMaterial color="hotpink" />
  </mesh>
  {props.meshObject != undefined ? <primitive object={props.meshObject} position={[0, 0, 0]} /> : <></>}
</Canvas>

额外注意事项 #

如果加载的外部模型 pivot（轴心点）不在中心，翻转后可能出现偏移，需要先将模型几何中心对齐：

// 在LampLoader中添加模型居中逻辑
import { useEffect } from 'react';

function LampLoader({ index }) {
  const gltf = useLoader(GLTFLoader, index === 0 ? '/path-to-lm-lamp.glb' : '/path-to-e27-lamp.glb');
  
  useEffect(() => {
    // 遍历模型子对象，将几何中心对齐
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.geometry.center();
      }
    });
    // 设置旋转
    gltf.scene.rotation.x = Math.PI;
  }, [gltf]);
  
  return <primitive object={gltf.scene} />;
}

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