drei库<ScrollControls>与<Html>位移异常求助（OrbitControls禁用缩放）

架构老林

2026-7-10

问题：ScrollControls导致Html标签滚动时错误位移

添加<ScrollControls>后，即使未操控相机，原本应固定在3D场景特定位置、随相机移动的<Html>标签，在滚动时会出现错误位移。期望<Html>标签仅相对相机位移，不随<ScrollControls>滚动而移动。

解决方案

问题根源在于<Html>被嵌套在<ScrollControls>内部，会继承其滚动变换逻辑。只需调整组件层级并修正样式即可解决：

将<Html>移出<ScrollControls>的子节点范围，避免受到滚动控制的变换影响
移除<Html>样式中的position: fixed，该样式会干扰Three.js的相机坐标定位逻辑，drei的<Html>组件本身已通过3D坐标实现定位

修改后的代码

import { Html, ScrollControls, OrbitControls } from "@react-three/drei";

export default function App() {
  return (
    <>
      <OrbitControls enableZoom={false} />
      {/* Html组件移出ScrollControls，独立跟随相机 */}
      <Html
        position={[-8.5, 12.9, 1.43]}
        distanceFactor={4}
        style={{
          height: 784,
          width: 1698,
          backgroundColor: "#03b6fc",
          borderRadius: "60px"
        }}
        transform
      ></Html>
      <ScrollControls>
        <mesh rotation-x={Math.PI * 1.5} position={[0, -2, 0]}>
          <planeGeometry args={[100, 100, 1, 1]} />
          <meshBasicMaterial color="#00ff00" />
        </mesh>
      </ScrollControls>
    </>
  );
}