Skip to main content

Interface: CameraSettings

Defines how the virtual camera behaves in the 3D scene.

The CameraSettings interface controls the "eye" through which users view the 3D scene, including its position, rotation, zoom limits, and behavioral properties. Camera settings significantly impact how users interact with and perceive products in the configurator.

Well-configured camera settings create an intuitive viewing experience that highlights product features while preventing disorienting perspectives or movements.

Example​

// Creating a camera focused on a product with restricted movement
const productCamera = {
  name: "MainProductView",
  position: [0, 1.7, 3.5],
  target: [0, 0.7, 0],
  radius: 3.5,
  alpha: Math.PI/4,  // 45 degrees
  beta: Math.PI/4,   // 45 degrees
  lowerRadiusLimit: 2,  // Can't zoom closer than 2 units
  upperRadiusLimit: 6,  // Can't zoom farther than 6 units
  lowerBetaLimit: 0.3,  // Can't look too far down
  upperBetaLimit: 1.5,  // Can't look too far up
  useAutoRotationBehavior: true
};

Properties​

alpha​

alpha: number

Horizontal rotation angle in radians.

This controls the camera's position around the horizontal circle centered on the target (like longitude on a globe).

beta​

beta: number

Vertical rotation angle in radians.

This controls how high or low the camera is positioned relative to the target (like latitude on a globe).

collision?​

optional collision: boolean

Defines whether the camera should check collision with the objects oh the scene.

collisionRadius?​

optional collisionRadius: number[]

Defines the collision radius of the camera. This simulates a sphere around the camera.

disableCameraControls?​

optional disableCameraControls: boolean

If true, camera controls are disabled.

When enabled, users cannot manually control the camera. The camera can only be positioned through code or predefined animations.

fov​

fov: number

Camera field of view angle in radians.

Controls how wide an area the camera sees. Wider angles (larger values) show more of the scene but with more perspective distortion.

fovMode​

fovMode: FovMode

Determines whether FOV is constrained by vertical or horizontal bounds.

This setting affects how the field of view behaves when the viewport dimensions change, such as during window resizing.

framingTime?​

optional framingTime: string | number

The transition time when framing the mesh, in milliseconds

id?​

optional id: string

Unique camera ID

idleRotationSpeed?​

optional idleRotationSpeed: string | number

Rotation speed during auto-rotation (degrees per second).

Controls how quickly the camera circles the product when in auto-rotation mode.

idleRotationSpinupTime?​

optional idleRotationSpinupTime: string | number

The time (milliseconds) to take to spin up to the full idle rotation speed.

idleRotationWaitTime?​

optional idleRotationWaitTime: string | number

Time in milliseconds before auto-rotation begins after user inactivity.

Determines how long the system waits after the user stops interacting before starting the automatic rotation.

inertia?​

optional inertia: number

Define the default inertia of the camera. This helps giving a smooth feeling to the camera movement.

isEnabled?​

optional isEnabled: boolean

If true, camera is enabled

isLocked?​

optional isLocked: boolean

If true, camera position will be locked at current state

isOrtho?​

optional isOrtho: boolean

When true, creates an orthographic (non-perspective) camera.

Orthographic cameras don't diminish object size with distance, creating a "flat" look useful for technical or architectural views.

limitTarget?​

optional limitTarget: number[]

Limit target

lowerAlphaLimit​

lowerAlphaLimit: number

Minimum allowed horizontal rotation angle.

Prevents the camera from rotating past this point, useful for restricting views to a specific range of angles.

lowerBetaLimit?​

optional lowerBetaLimit: number

Minimum allowed angle on the latitudinal axis. This can help limiting how the Camera is able to move in the scene.

lowerRadiusLimit?​

optional lowerRadiusLimit: number

Minimum allowed distance of the camera to the target (The camera can not get closer). This can help limiting how the Camera is able to move in the scene.

manualPanningSensibility?​

optional manualPanningSensibility: boolean

If true, it will disable manual panning sensitivity

maxZ?​

optional maxZ: number

Define the maximum distance the camera can see to. This is important to note that the depth buffer are not infinite and the further it end the more your scene might encounter depth fighting issue.

minZ?​

optional minZ: number

Define the minimum distance the camera can see from. This is important to note that the depth buffer are not infinite and the closer it starts the more your scene might encounter depth fighting issue.

name​

name: string

Identifying name for this camera.

Used to reference this specific camera in code and settings.

orthoBottom?​

optional orthoBottom: string | number

Define the current limit on the bottom side for an orthographic camera In scene unit

orthoLeft?​

optional orthoLeft: string | number

Define the current limit on the left side for an orthographic camera In scene unit

orthoRight?​

optional orthoRight: string | number

Define the current limit on the right side for an orthographic camera In scene unit

orthoTop?​

optional orthoTop: string | number

Define the current limit on the top side for an orthographic camera In scene unit

panningSensibility?​

optional panningSensibility: number

Panning sensitivity of the camera.

position​

position: number[]

3D coordinates of the camera in the scene [x, y, z].

This defines where the camera is positioned in 3D space.

preventScroll?​

optional preventScroll: boolean

If true it will prevent scroll on canvas

radius​

radius: string | number

Distance from the camera to the target point.

This represents how far the camera is from what it's looking at, effectively controlling the zoom level.

radiusScale?​

optional radiusScale: string | number

The scale applied to the radius (1 by default)

speed?​

optional speed: number

Define the current speed of the camera

target​

target: number[]

3D coordinates the camera is looking at [x, y, z].

This point is the focus of the camera's view and the center around which the camera rotates when orbiting.

type?​

optional type: "MAIN" | "GHOST"

Camera type

upperAlphaLimit​

upperAlphaLimit: number

Maximum allowed horizontal rotation angle.

Prevents the camera from rotating past this point, useful for restricting views to a specific range of angles.

upperBetaLimit?​

optional upperBetaLimit: number

Maximum allowed angle on the latitudinal axis. This can help limiting how the Camera is able to move in the scene.

upperRadiusLimit?​

optional upperRadiusLimit: number

Maximum allowed distance of the camera to the target (The camera can not get further). This can help limiting how the Camera is able to move in the scene.

useAlphaLimit?​

optional useAlphaLimit: boolean

If true, it will apply alpha limit

useAutoRotationBehavior?​

optional useAutoRotationBehavior: boolean

When true, enables automatic rotation when idle.

Creates a "showroom" effect where the product slowly rotates when the user isn't actively manipulating the view.

useBetaLimit?​

optional useBetaLimit: boolean

If true, it will apply beta limit

useBouncingBehavior?​

optional useBouncingBehavior: boolean

Enable Bouncing Behavior

useFramingBehavior?​

optional useFramingBehavior: boolean

Enalbe Framing Behavior

useNaturalPinchZoom?​

optional useNaturalPinchZoom: boolean

the pointer use natural pinch zoom to override the pinch precision and pinch delta percentage. When useNaturalPinchZoom is true, multi touch zoom will zoom in such that any object in the plane at the camera's target point will scale perfectly with finger motion.

zoomStopsAnimation?​

optional zoomStopsAnimation: boolean

If true, zooming will stop the auto-rotation.

Determines whether zoom actions from the user will interrupt the automatic rotation behavior.