Developer

Appearance

Product Camera Controls ​

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

Built with ❤️ by rooom AG

Copyright © 2025 rooom AG. All rights reserved.