CODEWITHSUNDEEP
three.jsreact-three-fiber
coding rekt
coding rekt

Reputation: 1

ThreeJs OrbitControls is not working in ReactJs

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>
  );
}

This is the error I'm getting in the console Uncaught TypeError: Class constructor OrbitControls cannot be invoked without 'new'

Upvotes: 0

Views: 571

Answers (1)

openkmj
openkmj

Reputation: 26

OrbitControls from three/examples/jsm/controls/OrbitControls is not for React Components.

@react-three/drei can help you.

Example

or

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

Upvotes: 1

Related Questions