Learn 3D visualization of camera free flight from scratch

I’ve been studying digital twin visualization for a while, and my first goal was to implement a free-flying camera in a digital twin visualization scene. Use the WSAD button to control the camera moving forward and backward, and use QE to control the camera moving up and down. This function is relatively simple, the code is clear at a glance, do not explain too much, directly on the code.

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); // Execute app.on('load', function () {// Create Button new Thing.Widget.button (' add control ', add_control); New Thing. Widget. Button(' remove control ', remove_control); }); /** * Add control */ var Ctrl = null; function add_control() { if (! ctrl) { ctrl = app.addControl(new THING.FlyControl()); InitThingJstip (" Control added successfully! <br> keyboard W A S D control flight, Q E control up and down "); Function remove_control() {if (Ctrl) {app.removeControl(Ctrl); ctrl = null; InitThingJsTip (" This routine shows the controls for camera interaction controlled by the built-in keyboard of the platform. After adding the controls, you can control the flight through the keyboard W A S D, control the rise and fall through Q E, and click the left button to experience "); }}

Not just for video cameras, but also for digital twinning visualizations.

The method I adopted was to use the built-in keyboard of the platform to control the controls for camera interaction. After adding the controls, the flight could be controlled by the keyboard W A S D, and the rise and fall could be controlled by the keyboard Q E. Clicking the left button would trigger Thing.FlyControl event, and the camera Angle could be controlled by the keyboard. Simply add the controls to make the camera fly freely, and if you’re new to digital twinning visualization, like me, you can give it a try.

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