React中Three.js OrbitControls失效，报错类构造函数需用new调用

这个错误是因为OrbitControls是ES6类，直接通过extend({ OrbitControls })在react-three-fiber中注册为JSX组件时，没有正确处理类的实例化逻辑，导致组件调用时缺少new关键字初始化。

下面提供两种解决方案：

方案一：手动实例化OrbitControls（不依赖额外库） #

放弃把OrbitControls作为JSX组件使用，改用useEffect手动创建和管理实例，完全符合ES6类的调用规则：

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { useThree, useEffect } from "@react-three/fiber";

const Orbit = () => {
  const { camera, gl } = useThree();

  useEffect(() => {
    // 用new关键字创建OrbitControls实例
    const controls = new OrbitControls(camera, gl.domElement);
    // 可按需配置控件属性，比如开启阻尼效果
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    // 组件卸载时销毁控件，避免内存泄漏
    return () => controls.dispose();
  }, [camera, gl]);

  return null; // 该组件无需渲染可视化元素
};

方案二：使用@react-three/drei封装好的组件（推荐） #

@react-three/drei是react-three-fiber的官方工具库，已经把OrbitControls封装成了符合React范式的组件，无需手动处理实例化逻辑：

1. 先安装依赖：

npm install @react-three/drei
# 或使用yarn
yarn add @react-three/drei

2. 直接在项目中使用：

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

function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas style={{ background: "black" }} camera={{ position: [3, 3, 3] }}>
        <OrbitControls enableDamping /> {/* 直接通过props配置控件属性 */}
        <axesHelper args={[5]} />
      </Canvas>
    </div>
  );
}

这种方式更符合React的开发习惯，代码更简洁，还能自动处理控件的更新和销毁，是官方推荐的用法。

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