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

Questions
, ,
1

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 (
    <pointerLockControlsImpl
      ref={controls}
      args={[camera, gl.domElement]}
      {...props}
    />

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

2

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
3

/cc

4

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