Camera Setup
Add or replace any existing camera you have in your scene with the ZapparCamera
component, and setting its ref like this:
import { ZapparCamera } from "@zappar/zappar-react-three-fiber";
// ...
return (
<ZapparCanvas>
<ZapparCamera/>
</ZapparCanvas>
);
You don't need to change the position or rotation of the camera yourself - the Zappar library will do this for you, automatically.
User Facing Camera
Some experiences, e.g. face tracked experiences, require the use of the user-facing camera on the device. To activate the user-facing camera, provide the userFacing
prop to the ZapparCamera
component:
<ZapparCamera userFacing />
Mirroring the Camera
Users expect user-facing cameras to be shown mirrored, so by default the ZapparCamera
will mirror the camera view for the user-facing camera.
Configure this behavior with the following option:
<ZapparCamera userCameraMirrorMode="poses" />
The values you can pass to userCameraMirrorMode
are:
Camera Mirroring | Description |
---|---|
poses |
this option mirrors the camera view and makes sure your content aligns correctly with what you're tracking on screen. Your content itself is not mirrored - so text, for example, is readable. This option is the default. |
css |
this option mirrors the entire canvas. With this mode selected, both the camera and your content appear mirrored. |
none |
no mirroring of content or camera view is performed. |
There's also a rearCameraMirrorMode
prop that takes the same values should you want to mirror the rear-facing camera. The default rearCameraMirrorMode
is none
.
Camera Pose
The Zappar library provides multiple modes for the camera to move around in the scene. You can set this mode with the poseMode
prop of the ZapparCamera
component. There are the following options:
Camera Pose | Description |
---|---|
default |
in this mode the camera stays at the origin of the scene, pointing down the negative Z axis. Any tracked groups will move around in your scene as the user moves the physical camera and real-world tracked objects. |
attitude |
the camera stays at the origin of the scene, but rotates as the user rotates the physical device. When the Zappar library initializes, the negative Z axis of world space points forward in front of the user. |
anchor-origin |
the origin of the scene is the center of the group specified by the camera's poseAnchorOrigin prop. In this case the camera moves and rotates in world space around the group at the origin. |
The correct choice of camera pose will depend on your given use case and content. Here are some examples you might like to consider when choosing which is best for you:
- To have a light that always shines down from above the user, regardless of the angle of the device or anchors, use
attitude
and place a light shining down the negative Y axis is world space. - In an application with a physics simulation of stacked blocks, and with gravity pointing down the negative Y axis of world space, using
anchor-origin
would allow the blocks to rest on a tracked image regardless of how the image is held by the user, while usingattitude
would allow the user to tip the blocks off the image by tilting it.
Changing Default Camera
When mounted, the ZapparCamera
component sets itself as the default scene camera. You can toggle this with the makeDefault
prop:
<ZapparCamera makeDefault={false} />
With the camera set up, you can then create a tracked experience.