I have been experimenting with react-three-fiber and also trying to use it to build virtual reality scenes. Starting form somewhere simple, I decided to rebuild the "Hello WebVR" example found in A-Frame.

The first thing that caught me off guard was that after the scene is setup by react-three-fiber, it calls camera.lookAt(0,0,0), even when passing a rotation to <Canvas camera={{ rotation: [x, y, z] }} />. I created a Camera component that takes the camera from useThree() and reset the camera rotation inside a useEffect() react hook.

I created some wrapper components for the basic shapes (Cylinder, Sphere, Box, Plane) and define a flat set of props that would be passed to <mesh /> and its corresponding geometry component. This caused some interesting TypeScript issues and took me a bit to figure out how to take react-three-fiber's types and merge them with additional props.

Using generics, I created a single type I could use for each of the shape components

type MeshShape<T extends new (...args: any) => any, P = {}> = Overwrite<
  ReactThreeFiber.Object3DNode<THREE.Mesh, typeof THREE.Mesh>,
  {
    args?: ConstructorParameters<T>;
  } & P
>;

// Box Props
type IBox = MeshShape<
  typeof THREE.BoxBufferGeometry,
  {
    color?: ReactThreeFiber.Color;
  }
>;

I ported some of the look-controls component from A-Frame to get drag mouse look working, excluding touch events.

My next exploration will be to create a HUD.