Learn 3D visual cameras from scratch

The camera in the digital twin visualization is used to determine the point of view from which the 3D scene is viewed, similar to the function of a camera when you take a picture. The camera contains two important position parameters: lens position and target (also known as target point).

1. Set the camera position

Enter the following code into the project file and obtain the position and target properties of the current camera camera to obtain the position information of the camera in the digital twin visual scene, and also 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; var target = app.Camera. // Get the location of the camera target console.log(pos); console.log(target);

After running the project, the digital twin visualization created can be displayed in the preview window, as shown in the figure 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) {/* Parameter: Selector */ var campus = ev.campus; Selector */ var campus = ev.campus; console.log('after load ' + campus.id); app.camera.fit({ position: [100, 100, 100], target: [0, 0, 0] }); });

After running the project, the digital twin visualization created can be displayed in the preview window, as shown in the figure below.



2. Set the camera for flight

Using the camera’s flyTo() method, you can fly the camera to a position or object.

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

You can determine whether the camera is flying by app.camera.flying property. The camera can be stopped by app.camera.stopflying (). Using the camera’s RotateSound () method, the camera can be rotated around a point or object

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

ThingJS cameras offer default panning, rotation, and zooming interactions. You can use the following script to add different interactive controls to the camera, according to your own needs to choose.

// Disables all default interactions (rotation, panning, scaling); app.camera.inputEnabled = false; // turn off the default panning operation; app.camera.enablePan=false; // turn off the default rotation operation; app.camera.enableRotate=false; // turn off the default zoom action; app.camera.enableZoom=false; // Set the speed of moving camera when mouse input app.Camera. MousePanSpeed = 10; // Set the speed of moving camera when keyboard input 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]; App. Camera. Move (10, 0); // App. Camera. Move (0, 10); // The camera moves forward 10m app.camera.zoom(10); // Set the target of the camera to the increment app.camera. Rotatey (20) of the horizontal rotation of the center of the circle; // Set the target of the camera to the increment app.camera. Rotatex (20) of the vertical rotation of the center of the circle; // Switch to 3D mode app.Camera. ViewMode = Thing.CameraView.Normal; // Switch to 2D mode app.camera. ViewMode = Thing.cameraview.topView;

— — — — — — — –, digital twin visualization: https://www.thingjs.com/