Camera Control
This documentation demonstrates how to use the Camera API. It allows you to control the camera behavior and positioning inside your scene.
How to position the camera
In this section, we look at the options for moving the camera using JavaScript.
Move camera
camera.animateTo(point, target, duration)
You can move the camera to a specific position using an animation. This ensures that the camera moves to a point at a selected time interval.
const position = {
x: x-value,
y: y-value,
z: z-value,
}
const lookAtPoint = {
x: x-value,
y: y-value,
z: z-value,
}
const durationInMs = 500;
twin.scene.camera.animateTo(position, lookAtPoint, durationInMs)
Parameters
position: This is the target position of the camera.lookAtPoint: This is the point where the camera is looking at.durationInMs: The duration in miliseconds for the transition.
Example animateToPosition()
This shows the animateToPosition() between two positions:
Set and get global position and rotation
You can get and set your camera position and looking point. This makes it possible for you to save and load scenes.
setGlobalPosition(position)
You can directly set the camera position:
const position = {
x: x-value,
y: y-value,
z: z-value,
}
twin.scene.camera.setGlobalPosition(position);
Parameters
position: This is the target position of the camera.
getGlobalPosition()
You can retrieve the current camera position:
let position = {
x: x-value,
y: y-value,
z: z-value,
}
position = twin.scene.camera.getGlobalPosition();
Return
point: This is the current position of the camera.
Look at
You can directly set the target, where the camera is looking at:
setGlobalLookAt(lookAtPoint)
const lookAtPoint = {
x: x-value,
y: y-value,
z: z-value,
}
twin.scene.camera.setGlobalLookAt(lookAtPoint)
Parameters
lookAtPoint: This is the target point where the camera is looking at.
getGlobalLookAt(point)
let point = {
x: x-value,
y: y-value,
z: z-value,
}
point = twin.scene.camera.getGlobalLookAt()
Return
point: This is the point where the camera is looking at.
Example for saving and loading scenes
Here is a simple example of a mirror with the functionality of saving and loading a desired position.
In this case the position and the looking point of the cameras are saves via getGlobalPosition() and getGlobalLookAt().
To move the camera to the saved location animateTo() is used.
<!DOCTYPE html>
<html>
<head>
<script src="./js/twin.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#twinMirror {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 4px;
}
#controls button {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="twinMirror"></div>
<div id="controls">
<button onclick="saveCameraPosition()">Save</button>
<button onclick="loadCameraPosition()">Load</button>
</div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
var cameraData;
function saveCameraPosition() {
const position = twin.scene.camera.getGlobalPosition();
const lookAt = twin.scene.camera.getGlobalLookAt();
cameraData = {
position: position,
lookAt: lookAt
};
alert('Kameraposition gespeichert.');
}
function loadCameraPosition() {
const data = localStorage.getItem('savedCamera');
twin.scene.camera.animateTo(
cameraData.position,
cameraData.lookAt,
1000
);
}
</script>
</body>
</html>
Zoom methods
You can zoom to fit all objects in the scene or a specific object by its guid.
zoomExtents()
The zoom fit to all objects ensures, that your can see your whole system centred on your screen:
twin.scene.camera.zoomExtents();
zoomToObject3D(guid, duration)
If you select a specific object by its guid, it will be displayed centered regardless of the rest of the system:
twin.scene.camera.zoomToObject3D(guid);
Parameters
guid: Type:string. This is guid of the object to zoom at.duration: Typedouble. This defines the time in ms, it need to animate the camera to the object3D. (optional)
Projection mode
setProjectionMode(mode)
You can change the projection mode from perspective to orthographic and vice versa:
A "perspective" camera simulates how the human eye sees the world. Objects that are farther away appear smaller, and those closer to the camera appear larger. This creates a realistic sense of depth and spatial relationships.
In contrast, an "orthographic" camera displays all objects at the same scale, regardless of their distance from the camera. There is no perspective distortion, so objects do not appear smaller as they move farther away. This results in a flat, uniform look.
twin.scene.camera.setProjectionMode(mode);
Parameters
mode: Type:stringperspective|orthographic. This is the selected camera mode.
Control camera interaction
The camera interaction can be restricted in various ways and even deactivated. This helps to prevent unwanted changes or to set static scenes.
Disables/Enable the camera control
enableCameraController(enable)
This enables/disables the camera control so that it can no longer be moved:
twin.scene.camera.enableCameraController(enable);
Parameters
enable: Type:bool. Enables/disables the camera control.
Enables/Disable certain actions
You can also restrict only certain user actions. These include rotating, panning and zooming.
enableRotation(enable)
This enables/disables the rotation:
twin.scene.camera.enableRotation(enable);
Parameters
enable: Type:bool. Enables/disables rotation.
enablePanning(enable)
This enables/disables panning:
twin.scene.camera.enablePanning(enable);
Parameters
enable: Type:bool. Enables/disables panning.
enableZoom(enable)
This enables/disables zooming:
twin.scene.camera.enableZoom(enable);
Parameters
enable: Type:bool. Enables/disables zooming.
Rotate and Zoom around mouse point
enableZoomAroundMousePoint(enable)
This option lets you enableZoomAroundMousePoint(enable). If enabled zooming will bring the view closer to your mouse cursor instead of the scene center.
twin.scene.camera.enableZoomAroundMousePoint(enable);
Parameters
enable: Type:bool. Enables/disables zooming around the mouse point.
enableRotateAroundMousePoint(enable)
With enableRotateAroundMousePoint(enable) you have the option to enable/disable rotating arround your moduse point. If enabled zooming will brin you near your cursor insted of the center.
twin.scene.camera.enableRotateAroundMousePoint(enable);
Parameters
enable: Type:bool. Enables/disables rotating around the mouse point.
Example
<!DOCTYPE html>
<html>
<head>
<script src="./js/twin.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.labelStyle {
color: #fff;
text-align: left;
background-color: #000;
}
.buttonStyle {
background-color: #3498db;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.buttonStyle:hover {
background-color: #2980b9;
}
#twinMirror {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="twinMirror"></div>
<script>
window.twin = new twinLibrary.Twin();
window.twin.start("twinMirror", "http://localhost:3000");
window.twin.host.notify = function (type, payload) {
if('sceneLoaded' === type){
var boxText = "My first label";
var htmlBox = `<div class="labelStyle">${boxText}</div>`;
var htmlIDBox = "myCustomLabel";
var labelBox = new twinLibrary.HtmlLabel2D(htmlBox, null, htmlIDBox);
labelBox.setPosition(0, 0, 0);
window.twin.scene.add(labelBox);
var buttonText = "Click Me";
var buttonHtml = `<button class="buttonStyle">${buttonText}</button>`;
var buttonId = "myCustomButton";
var buttonLabel = new twinLibrary.HtmlLabel2D(buttonHtml,null,buttonId);
buttonLabel.setPosition(1, 1, 1);
window.twin.scene.add(buttonLabel);}
};
</script>
</body>
</html>