How to import classes from three/examples/jsm in a React Typescript app?

I recently cloned the code of a very cool mineraft game built with react and three-fiber.

I’m currently trying to transition the original js code into typescript but I’m failing miserably to make the compiler undertand the import of this class from the three/examples/jsm folder.

while it works perfectly with JS, it breaks miserably in my typescript version…

// ...
import { PointerLockControls as PointerLockControlsImpl } from 'three/examples/jsm/controls/PointerLockControls';

extend({ PointerLockControlsImpl });

export const FPVControls = (props) => {
  const { camera, gl } = useThree();
  const controls = useRef();

  return (
      args={[camera, gl.domElement]}

Would anyone know how to properly import classes from this /examples folder into a typescript react app?

I’m using Anuglar Ionic with TypeScript and all I have to do is:

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';

I’m not sure if this is going to be helpful but maybe that’s all you need to do?

1 Like


you can use the drei abstraction of these controls: GitHub - pmndrs/drei: 🌭 useful helpers for react-three-fiber it takes care of typescript and some boilerplate. and a real world example: Minecraft - CodeSandbox