Set up your camera controller

When navigating in a three-dimensional virtual world, users perceive the world through a virtual camera, similar to those used in real life. Discover the basics to configure the camera settings and the controls of your web app.

Create a Camera Entity

The first step is to create the equivalent of a real-life camera in the 3D world.

A camera entity is just a classic entity with the

Camera

Entity Component

Camera camera

Virtual camera.

Schema

dataJSON

JSON

Input values as described in the referenced render graph in their original JSON format.

renderGraphRef

Asset UUID

UUID of the referenced render graph this camera should use.

renderTargetIndex

Integer

Default: -1

Index of the render target to blit.

View in reference

component and a lens component, which the rendering engine uses as parameters to render frames.

You can create a new camera entity for your user when he joins a session directly from your web app by calling the React hook useCameraEntity().

Camera Settings

By default, your new camera spawns at world origin with basic render settings. If you learned how to set up an environment, you can directly pass new rendering settings on camera creation.

import { useCameraEntity } from "@3dverse/livelink-react";

const { cameraEntity } = useCameraEntity({
    position: [0, 0, 10],
    settings: { skybox: true },
});

The logic behind the camera in your web app is the same as the logic used by the 3dverse editor — it means the camera settings available in the editor are the same as those you define in your web application.

See through your Camera

The next step is to set this camera as your user's viewpoint.

When you set up your Canvas and your Viewport in your web app, you need to pass the camera entity to the Viewport.

import { Canvas, Viewport, useCameraEntity } from "@3dverse/livelink-react";

const { cameraEntity } = useCameraEntity();

return (
    <Canvas>
        <Viewport cameraEntity={cameraEntity}></Viewport>
    </Canvas>
);

Add Controls to the Camera

Use the built-in Camera Controller

3dverse livelink-react package proposes a default camera controller React component to facilitate the implementation of common controls such as fly-mode or orbital view.

Configure the Default Controller

The CameraControllerPreset object allows you to configure control settings such as bindings or sensitivity.

You can select a default controller mode among these CameraControllerPresets and pass it to the CameraControllerPreset.

To change properties like bindings, more information are available in the 3dverse camera controls package documentation.

import { Livelink, Canvas, Viewport, CameraController, useCameraEntity } from "@3dverse/livelink-react";

import { CameraControllerPresets, CameraControllerPreset } from "@3dverse/livelink";

const { cameraEntity } = useCameraEntity();
const [cameraControllerPreset, setCameraControllerPreset] =
    useState < CameraControllerPreset > CameraControllerPresets.orbital;

<Canvas>
    <Viewport cameraEntity={cameraEntity}>
        <CameraController preset={cameraControllerPreset} />
    </Viewport>
</Canvas>;

You can find a full setup of the default camera controller in the following sample.

Sample

Default Camera Controller

Shows how to use the default camera controllers and get a reference to them.

Create a Custom Controller in your web app

Alternatively, you can also create your own controller React component to fit more specific needs. The following sample illustrates how to affect the camera entity position directly in your web app.

Sample

Custom Camera Controller

Shows how to create a custom camera controller.

Advanced Custom Controller Alternatives

For some more complex needs, you may want to handle your camera control logic in server side Asset Scripts. This approach can be more convenient when the movement must be synchronized with the movement or the animations of a 3D asset — similarly to the third person character controller.

In this case, the flow is slightly different. When a new user joins a session of your application, a scene containing your character controller is instantiated. The camera entity is already part of the instantiated subscene and the role of the web application becomes to retrieve the camera entity and pass it to the Viewport React component.

Sample

Third Person Character Controller

A character controller via a third person camera setup.