I have been experimenting withreact-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 inA-Frame.

The first thing that caught me off guard was that after the scene is setup by react-three-fiber, it callscamera.lookAt(0,0,0), even when passing a rotation to<Canvas camera={{ rotation: [x, y, z] }} />. I created aCamera component that takes the camera fromuseThree() and reset the camera rotation inside auseEffect() 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

typeMeshShape<Textendsnew(...args:any)=>any,P={}>=Overwrite<ReactThreeFiber.Object3DNode<THREE.Mesh,typeofTHREE.Mesh>,{args?:ConstructorParameters<T>;}&P>;// Box PropstypeIBox=MeshShape<typeofTHREE.BoxBufferGeometry,{color?:ReactThreeFiber.Color;}>;

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

My next exploration will be to create a HUD.