preface

This time, we show the intelligent tunnel monitoring system built by HT for Web’s flexible graphical editing tool. Through HTML5 technology to achieve desktop and mobile terminal cross-platform, at the same time the reality of visual operation and maintenance.

This time, I would like to share with you the roaming inspection function inside, which can perfectly experience the overall structure environment from the first-person perspective, giving people a real feeling just like the game, which is more intuitive than the plane, and can wander freely between the virtual and the reality.

Code implementation

The whole scene is built by 3D components, which requires a lot of code. In order to simplify, I used HT. JSONSerializer wrapped in HT to serialize the scene into a JSON file. In code, deserialization through the DataModel DataModel converts the json format into an object and adds it to the DataModel. Refer to the serialization manual.

I’ve built the scene, but it’s important that we make a line as a path base during the build process, which we’ll use later.

First of all, we recorded the initial view of the overall scene, so that we could recover the view after the tour:

var dm = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dm)
var aEye = ht.Default.clone(g3d.getEye())
var aCenter = ht.Default.clone(g3d.getCenter())Copy the code

In order to avoid bugs in perspective movement during roaming, we first turn off the interactive device. What is a 3D interactor? By default, Graph3dView provides a rotation mode around the center point of Graph3dView#getCenter(). Drag operations in this mode change the position of the eye observation point of Graph3dView#getEye(). The effect of a mouse wheel or touch screen pinch is essentially to change the position of the eye to move closer to or away from the center of the object, and finally achieve the effect of visual zoom or move closer to or away from the object. Because other operations are not allowed to interfere when entering roaming, it should be disposed of first:

g3d.setInteractors(null)Copy the code

To move, be sure to follow the hidden lines we drew in the scene to make paths:

var point1 = path.getPoints().toArray()[0]
var point2 = path.getPoints().toArray()[3]Copy the code

Setting the eye and Center in the 3D scene by controlling the front and back points of the path creates a first-person view effect:

Var distanceX = (point1.x-point2.x) var distanceY = (point1.y-point2.y) var distance = (point1.y-point2.y Math.sqrt(distanceX * distanceX + distanceY * distanceY) // Eye position g3d.seteye ([point2.x, 800, point2.y]) //"我"SetCenter ([point1.x, 800, point1.y])Copy the code

Here we will use a walk method, which can change the position of eye and center at the same time, that is, eye and center move the same offset in the vector direction established by the two points at the same time. The first argument is the offset vector length value, and the end is to restore the interactor and empty the animation:

var anim = g3d.walk(distance, {
    frames:700,
    finishFunc: function () {
        g3d.setEye(aEye)
        g3d.setCenter(aCenter)
        g3d.setInteractors([
            mapInteractor
        ])
        anim = null
    }
}, true)Copy the code

Another reason for closing the interactive before is that we need to perform related operations in the roaming process. Firstly, we need to monitor the mouse wheel event, change the speed by scrolling, accelerate up and decelerate down:

g3d.getView().addEventListener('mousewheel'.function (e) {
    if (anim) {
        let detail = 0
        if(! e) e = g3d.getView().eif (e.wheelDelta) {
            detail = e.wheelDelta/120
        } else if (e.detail) {
            detail = -e.detail/3
        }
        if// Change the speedif// Scroll downif (anim.frames < 2000) {
                    anim.frames += 50
                }
            } else{// Scroll upif (anim.frames > 100) {
                    anim.frames -= 50
                }
            }
    }
})Copy the code

Listen for click events to pause, continue, and exit:

g3d.getView().addEventListener('mousedown'.function (e) {
    if (anim) {
        if(e.button === 0) {// Left click to pause im.pause()}else if(e.button === 2){// right-click to continue im.resume()}else if(e.b utton = = = 1) {/ / the key to exit the anim. Stop () anim = null}}})Copy the code

At this point, the roaming function of the implementation of the code to explain the end, a very short amount of code, but made such a big project!

conclusion

There are also many examples that include this function module, all with good results:

Room (www.hightopo.com/demo/room-w.)

Metro station (www.hightopo.com/demo/ht-sub…) And so on are all very good.

From industry to industry to the Internet, Internet more and more intelligent monitoring system, operational system, charge management system, and other business system with the emergence of these are closely linked with our life, can use information way to express, HT lightweight combined with better show the advantage of data visualization. For example, the tunnel we introduced this time is an obvious example, as well as Bridges and roads, high-speed rail bullet trains, and even transportation, which are widely used. With the progress of The Times and the maturity of front-end HTML5, WebGL, WebVR and other technologies, I believe that Web assumes more and more heavy rendering rendering application is an irreversible trend!