Based on the wisdom of the tunnel roaming 3D inspection of HTML5 WebGL

Foreword

This is to show you by  HT for Web  flexible graphics editing tools to create the wisdom of tunnel monitoring system. Achieve a cross-platform desktop and mobile by the end of the HTML5 technology, but the reality visualization operation and maintenance.

The main share with you inside roaming inspection function, perfect to experience a first-person perspective overall structure of the environment, exactly like games like giving a real feel more intuitive than the flat, random free between virtual and reality.

Code

The whole scene 3D building components are formed, requires a lot of code, for simplicity, I ht.JSONSerializer HT encapsulated into a sequence of scenes to be json file. In the code, then the data model by DataModel deserialize json format is converted and added to the object data model. Refer to the sequence of the manual .

I have built a good scene, but which contains important point is that we must make a line in the build process as a route basis, we use this later.

First, let's look at the initial recording the whole scene perspective, so that we can recover at the end of roaming perspective:

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())

In order to avoid movement on the angle of view during roaming bug in our first interaction is switched off. What is it interactive 3D? The default Graph3dView provided around Graph3dView # getCenter () mode of operation of the center point of rotation will change Graph3dView # getEye when Drag operating in this mode () eye observation point, the mouse wheel or touch pinch zoom effect, in essence, also change the position of the eye, closer to or away from the center position of the center, and ultimately achieve visual zoom or away from the object and effect approached. Because other operations are not allowed to interfere when entering roaming conduct, it must first dispose of:

g3d.setInteractors(null)

To move certainly go hidden lines we draw in the scene to do the path:

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

This will create a first-person perspective effect through the control path set before and after two 3D scene and eye center,:

var distanceX = (point1.x - point2.x)
 var distanceY = (point1.y - point2.y)
 // distance between two points is calculated by the Pythagorean triangle 
var Distance = the Math.sqrt (distanceX * + distanceY distanceX * distanceY)
 // eye position 
g3d.setEye ([point2.x, 800 , point2.y])
 // "I" position 
g3d.setCenter ([point1.x, 800, point1.y ])

Here we will use a walk method, it is possible to change the position of the center of the eye and at the same time, is moved by the same eye and the center offset vector direction while in the established points. The first parameter is the value of the offset vector length, and the recovery at the end of emptying the Interactor Animation:

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

之前关闭交互器还有一个原因就是在漫游过程中我们还要有相关操作，先监听鼠标滚轮事件，通过滚动来改变速度，向上加速，向下减速：

g3d.getView().addEventListener('mousewheel', function (e) {
    if (anim) {
        let detail = 0
        if (!e) e = g3d.getView().e
        if (e.wheelDelta) {
            detail = e.wheelDelta/120
        } else if (e.detail) {
            detail = -e.detail/3
        }
        if (detail) // 改变速度
            if (detail < 0) { // 向下滚动
                if (anim.frames < 2000) {
                    anim.frames += 50
                }
            } else { // 向上滚动
                if (anim.frames > 100) {
                    anim.frames -= 50
                }
            }
    }
})

再监听点击事件来实现暂停、继续和退出：

g3d.getView().addEventListener('mousedown', function (e) {
    if (anim) {
        if (e.button === 0) { // 左键暂停
            anim.pause()
        }else if (e.button === 2){ // 右键继续
            anim.resume()
        }else if(e.button === 1){ // 中键退出
            anim.stop()
            anim = null
        }
    }
})

至此，漫游功能的实现代码解释完毕，很短的代码量，却做出了这么大的工程！

总结

同样也有很多包含这个功能模块的例子，都有着不错的效果：

机房（http://www.hightopo.com/demo/room-walkthrough/index.html）

地铁站（http://www.hightopo.com/demo/ht-subway/index.html）等都是很好的

这些都是跟我们生活紧密相连的，都可以用信息化的方式来表达，HT 的轻量化与之相结合更好的展现出数据可视化的优势。随着时代的进步和前端 HTML5、WebGL、WebVR 等技术的成熟，相信 Web 承担越来越重度的渲染呈现应用是不可逆的趋势！