ThingJS The official example of the camera introduces a new function to realize the action of the lens following the object.

Before understanding that the camera moves with the object, we need to understand the camera first. As a very important object in ThingJS, the camera needs to be carefully understood and studied.

The camera contains two important position parameters: lens position and target (also known as target point) of the photographed object. (see for details) https://www.thingjs.com/guide/cn/tutorial_Introduce/Camera.html) In terms of image, the lens is like a mobile phone camera. The positioning of the camera determines the shooting angle, and the position of the photographed object is better understood. The object can be stationary or mobile. Therefore, ThingJS has launched a new function of the camera moving with the object. How to realize it step by step?

Before following the object, we need to know how the object moves in the program language, such as moving to or moving the object along different paths. The paths include square paths and circular paths, which can be switched by clicking the button on the web page.

The lens follows the object

For example, if you need to change the position of an object in the front coordinate system or the position of the camera, you can imagine that you need to change the position of the object in the front coordinate system. ThingJS default position [0, 5, -10] means that the camera position is "above the back of the mobile car", which means that it moves backward to 10m and upward to 5m to form top view positioning, which is the calculation method of camera position in the world coordinate system.

The path used to follow the movement of an object is mainly to design an arc movement path for the object, which is composed of coordinate points in the world coordinate system. Therefore, it is necessary to obtain an array of coordinate points, update the position of the camera through each frame to move along the path, and finally use the stop moving interface to terminate the movement.

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/simplebuilding'
});

// Execute after loading the scene
app.on('load', function () {
    // Query the cars in the scene through name
    var car = app.query('car01')[0];

    // An array of coordinate points in the world coordinate system. You can use "tools" - > "pick scene coordinates" to obtain coordinates
    // Take one more point at the corner for smoother steering interpolation calculation
    var path = [[0, 0, 0], [2, 0, 0], [20, 0, 0], [20, 0, 2], [20, 0, 10], [18, 0, 10], [0, 0, 10], [0, 0, 8], [0, 0, 0]];
    car.position = path[0];

    car.movePath({
        path: path,
        orientToPath: true,
        loopType: THING.LoopType.Repeat,
        time: 10 * 1000
    })

    new THING.widget.Button('The camera follows the object', function () {
        // Set the camera position and target point for each frame
        car.on('update', function () {
            // The camera position is above the back of the mobile car
            // For the convenience of calculation, coordinate conversion is used here to convert the position relative to the trolley into world coordinates
            app.camera.position = car.selfToWorld([0, 5, -10]);
            // The target point of the camera is the coordinate of the mobile car
            app.camera.target = car.position
        }, 'Custom camera follow');
    });

    new THING.widget.Button('stop it', function () {
        car.off('update', null, 'Custom camera follow');
    });
});

It is important to understand the basic knowledge of object movement and lens position, ThingJS Welcome to the collection of relevant documents.