ThreeJs OrbitControls 在 ReactJs 中不起作用答案

【问题标题】：ThreeJs OrbitControls is not working in ReactJsThreeJs OrbitControls 在 ReactJs 中不起作用
【发布时间】：2023-02-03 15:06:23
【问题描述】：

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
extend({ OrbitControls });

const Orbit = () => {
  const { camera, gl } = useThree();
  return <OrbitControls args={[camera, gl.domElement]} />;
};

function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas style={{ background: "black" }} camera={{ position: [3, 3, 3] }}>
        <Orbit />
      
        <axesHelper args={[5]} />
      </Canvas>
    </div>
  );
}

这是我在控制台中遇到的错误未捕获的 TypeError：如果没有“new”，则无法调用类构造函数 OrbitControls

【问题讨论】：

标签： three.js react-three-fiber

【解决方案1】：

来自 three/examples/jsm/controls/OrbitControls 的 OrbitControls 不适用于 React 组件。

@react-three/drei可以帮到你。

Example

或者

const { camera, gl } = useThree();
useEffect(
  () => {
    const controls = new OrbitControls(camera, gl.domElement);
      return () => {
        controls.dispose();
      };
  },
  [camera, gl]
);

【讨论】：