Developer

Appearance

Camera

rooomProducts Viewer API camera controls for optimal product presentation. Get/set camera position, rotation, target, transitions, and field of view for 3D product viewing and photography.

Control the camera to create optimal product viewing experiences. These camera functions are designed for product photography, e-commerce displays, and interactive product demonstrations where precise camera control is essential.

getCameraTarget ​

getCameraTarget(callback: Function)

Get the camera target.

js
api.getCameraTarget(function(target){
  console.log(target); // Result: [x, y, z]
});

setCameraTarget ​

setCameraTarget(target: [x: number, y: number, z: number], [duration: number], [callback: Function])

Sets the camera target position. The duration is the time for the transition from the current target to the new target (a number in seconds; defaults to 2).

js
api.setCameraTarget([0, 0, 0], 2.5, function(camera){
  console.log('Camera target changed');
});

getCameraPosition ​

getCameraPosition(callback: Function)

Gets the camera position.

js
api.getCameraPosition(function(position){
  console.log(position); // Result: [x, y, z]
});

setCameraPosition ​

setCameraPosition(position: [x: number, y: number, z: number], [duration: number], [callback: Function])

Sets the camera position. The duration is the time for the transition from the current position to the new position (a number in seconds; defaults to 2).

js
api.setCameraPosition([5, 5, 5], 2.5, function(camera){
  console.log('Camera position changed');
});

getCameraLookAt ​

getCameraLookAt(callback: Function)

Returns the current camera position and target.

js
api.getCameraLookAt(function(camera){
  console.log(camera.position); // Result: [x, y, z]
  console.log(camera.target); // Result: [x, y, z]
});

setCameraLookAt ​

setCameraLookAt(position: [x: number, y: number, z: number], target: [x: number, y: number, z: number], [duration: number], [callback: Function])

Sets the camera position and target. The duration is the time for the transition from the current camera to the new camera (a number in seconds; defaults to 2).

js
api.setCameraLookAt([0, 10, 0], [0, 0 ,0], 2.5, function(camera){
  console.log('Camera moved');
});

startRotateCamera ​

startRotateCamera(direction: 1 | -1, [callback: Function])

Start the rotation of the camera around the target on the objects x-axis. Set the direction +1 (clockwise) or -1 (counterclockwise).

js
api.startRotateCamera(1, function(){
  console.log('Camera rotation started');
});

stopRotateCamera ​

stopRotateCamera([callback: Function])

Stop the rotation of the camera.

js
api.stopRotateCamera(function(){
  console.log('Camera rotation stopped');
});

recenterCamera ​

recenterCamera([callback: Function])

Centers the camera around the objects bounding box, taking portrait/landscape mode into account.

js
api.recenterCamera(function(){
  console.log('Camera recentered');
});

focusOnVisibleGeometries ​

focusOnVisibleGeometries([callback: Function])

Centers the camera around the objects visible geometries, taking portrait/landscape mode into account.

js
api.focusOnVisibleGeometries(function(){
  console.log('Camera Recentered');
});

setFov ​

setFov(angle: number, [callback: Function])

Defines the camera field of view (FoV). The angle is a number, in degrees, between 1 and 179.

js
api.setFov(80, function(){
  console.log('Camera Fov changed');
});

getFov ​

getFov(callback: Function)

Returns the cameras current field of view (FoV) in degrees.

js
api.getFov(function(fov){
  console.log('Camera Fov is', fov); // Result: 80
});

Best Practices ​

  • Performance: Use getCameraLookAt() before complex movements to avoid jarring transitions
  • UX: Limit camera transitions to 2-3 seconds for optimal user experience
  • Mobile: Test field of view settings on mobile devices for proper product visibility

Related Topics

📚 📚 Essential Reading

🎯 🎯 Use Cases & Tutorials

🔧 🔧 Related APIs