The camera in a digital twin visualization is used to determine the Angle of view of a 3D scene, similar to what you would use a camera to take a picture. The camera contains two important position parameters: position of the lens and target (also known as target point) of the object being photographed.

1. Set the camera position

Enter the following code into the project file to obtain the position and target properties of the current camera to obtain the position information of the camera in the digital twin visual scene, or print it in the console.

/ var/loading scenarios code app = new THING. The app ({url: "https://www.thingjs.com/static/models/storehouse" / / scene address}); var pos = app.camera.position; Var target = app.camera. Target; Console. log(pos); console.log(target);Copy the code

After running the project, in the preview window, you can display the digital twin visualizations you created, as shown below.

The camera position can also be set using the camera’s fit() method.

Var app = new THING. The app ({url: "https://www.thingjs.com/static/models/storehouse" / / scene address}); App. on('load', function (ev) { Ev. campus, type: campus ev.buildings, type :Selector */ var campus = ev.campus; console.log('after load ' + campus.id); app.camera.fit({ position: [100, 100, 100], target: [0, 0, 0] }); });Copy the code

After running the project, in the preview window, you can display the digital twin visualizations you created, as shown below.

2. Set up the camera to fly

By using the camera’s flyTo() method, the camera can be flown to a certain location or object.

app.camera.flyTo({
 name: value,
})
Copy the code

You can use the app.camera. Flying attribute to determine whether the camera is flying.

You can stop camera flight by calling app.camera.stopflying ().

3. Set camera rotation

Use the camera’s rotateAround() method to rotate the camera around a point or object

app.camera.rotateAround({
 name: value,
})
Copy the code

4. Control camera interaction

The ThingJS camera provides default pan, rotate, and zoom interactions.

You can use the following script to add different interaction controls for the camera.

// Turn off all default interactions (rotate, pan, zoom); app.camera.inputEnabled = false; // Turn off the default pan operation; app.camera.enablePan=false; // Turn off the default rotation operation; app.camera.enableRotate=false; // Turn off the default zoom operation; app.camera.enableZoom=false; // Set the speed of camera movement app.camera. MousePanSpeed = 10; // Set the speed of moving the camera app.camera. KeyPanSpeed = 10; / / set the camera Angle/minimum and maximum range app. Camera. YAngleLimitRange = [30, 60]; / / set the camera to pitch Angle range/minimum and maximum app. Camera. XAngleLimitRange = [30, 60]; // move the camera horizontally 10m app.camera. Move (10, 0); // Move the camera vertically 10m app.camera. Move (0, 10); // Push the camera forward 10m app.camera.zoom(10); // Set camera target to app.camera. RotateY (20); // Set camera target to app.camera. App.camera.rotatex (20); Cameraviewmode = thing.cameraView. Normal; App.camera. viewMode = thing.cameraView. TopView;Copy the code

— — — — — — — — –

Digital Twin visualization: www.thingjs.com/