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.
Top comments (0)