a3d-camera

Description

Description

The <a3d-camera> web component allows you to manipulate the default viewer camera. This camera is an ArcRotateCamera from Babylon.js, defined by its position (alpha, beta, radius) and a target. You can access to it through document.querySelector('a3d-viewer').viewerDetails.camera.

Installation

Using npm :

npm install @a3d-viewer/viewer

Importing the a3d-camera :

import '@a3d-viewer/viewer'

Usage

<a3d-viewer>
  <a3d-camera orbit="0 0 2" target="0.2 0 0"></a3d-camera>
  <!-- .... -->
</a3d-viewer>

Attributes

orbit

The orbit attribute defines the camera’s position relative to the target. It consists of three parameters:

• alpha (radians): Longitudinal rotation (between 0 and π).
• beta (radians): Latitudinal rotation (between 0 and π).
• radius: Distance from the target (between camera.lowerRadiusLimit and camera.upperRadiusLimit).

<a3d-viewer>
  <a3d-camera orbit="0 0 2" target="0.2 0 0"></a3d-camera>
  <!-- .... -->
</a3d-viewer>

target

The target attribute sets the target position in world space using x, y, and z coordinates.

<a3d-viewer>
  <a3d-camera orbit="0 0 2" target="0.2 -2 0"></a3d-camera>
  <!-- .... -->
</a3d-viewer>

camera-name

The camera-name attribute set camera with a camera name that is present in the scene. Cameras can come from a model imported in the scene.

<a3d-viewer>
  <a3d-model
    src="https://cdn.substance3d.com/v2/files/public/crystal-camera.glb"
  ></a3d-model>
  <!-- in this example the model have a camera "test2" baked into it so it can be used here -->
  <a3d-camera camera-name="test2"></a3d-camera>
</a3d-viewer>

model-index

The model-index attribute indicates which model the camera-name should be associated with. The index to used is the from @A3dViewer/loadedModels method.

If no model-index is provided, the first camera found in the loaded models will be used.

<a3d-viewer>
  <a3d-model
    src="https://cdn.substance3d.com/v2/files/public/BoomBox.glb"
    position="0 0.85 0"
  ></a3d-model>
  <a3d-model
    src="https://cdn.substance3d.com/v2/files/public/Table.glb"
  ></a3d-model>
  <!-- If both imported model have a camera named "renderCamera" -->
  <!-- the model from which the camera is selected can be given -->
  <a3d-camera model-index="1" camera-name="renderCamera"></a3d-camera>
</a3d-viewer>

Functions

updateCamera()

The updateCamera() function updates the viewer’s default camera with the current orbit and target values of the web component. This method is useful for synchronizing the camera’s state with the component’s attributes.

const cameraComponent = document.querySelector('a3d-camera')
cameraComponent.updateCamera()

API