preface

With the expansion of the city scale, it is difficult to display the whole picture of the city thoroughly in the traditional way. However, with the application of 3D technology, 3D urban agglomeration has emerged to dynamically and interactively present the whole picture of the city. With the smart city system, through the way of Web visualization, the city manager can more timely understand the traffic situation, urban fire control, power management and other aspects of the operation of the situation, to deal with.

This demo uses the lightweight HTML5/WebGL modeling scheme of HT for Web products. Traditional smart buildings/Building automation/Building security/smart parks often use BIM (Building information Modeling) software. For example, Revit of Autodesk or Bentley are architectural and engineering software, but the data of these BIM modeling models are often too large and bloated, and most of the details are of little significance to building self-control, but affect the trend of industry Web SCADA or Web configuration monitoring. Therefore, we adopt Hightopo’s HT for Web product lightweight HTML5/WebGL modeling scheme to achieve a good effect of rapid modeling, runtime lightweight and even mobile terminal browser 3D visualization operation and maintenance.

Demo address: Smart city

Preview:

Code implementation

Loading 3d scenes

Create a new 3D scene and add it to the page.

const g3d = new ht.graph3d.Graph3dView();
const dm3d = g3d.dm();
g3d.addToDOM();
Copy the code

The addToDOM function loads the scene into the body and populates the window by default.

Next, deserialize the city scene JSON, and set the scene perspective, center location, sky box in the callback of deserialization function, and get the meta information, call startAnim function:

g3d.deserialize('scenes/ny.json', () => {g3d.seteye ([1132.8386351821287, 1916.836416970022, 1479.5345608290288]); G3d. SetCenter ([519.9741236104874, 273.4741921410557, 319.58669041297884]). g3d.setSkyBox(dm3d.getDataByTag('skyBox')); Scalelist.push (dm3d.getDatabyTag (scalelist.push (dm3d.getDatabyTag ('scaleBlue'),
      dm3d.getDataByTag('scaleRed')); ··· // Start animation startAnim(); });Copy the code

Animation to achieve

The city scene after loading is shown as follows:

We can see the blue and yellow water ripple effect, the flow effect of the road, the fire escape, the bobbing effect and the rotating logo and satellite.

All animations are implemented through HT.default. startAnim.

Ht.default. startAnim({// Animating frames: 12, // Animating frames in ms interval: 10, // Animating easing, using hT.default. animEasing easing by Default:function(t){ returnt * t; }, // call finishFunc after animation:function(){ console.log('Done! '}, // the action function must be provided to implement the property change action during animation:functionSetPosition (p1.x + (p2.x-p1.x) * v, p1.y + (p2.y-p1.y) * v); }});Copy the code

The above is frame-based animation, in which the user controls the animation effect by specifying the number of frames and the parameter of interval animation Frame interval.

Ht animation manual can be referred to: animation manual

The following describes the implementation of each effect in turn.

1. Ripple effect

Preview:

Code:

functionWaveScale (obj, DLT, Max, min) {obj.forEach(node => {// Diffusion radius increasedlets = node.getScaleX() + dlt; // If the diffusion radius is greater than the maximum value, reset to the minimum valueif(s >= max) s = min; // Set x,y,z scaling values node.setScale3d(s, s, s); }); }function startAnim() { ht.Default.startAnim({ frames: Infinity, interval: 20, action: () => {// waveScale(scaleList, dltScale, maxScale, minScale); }}); }Copy the code

2. Rotation effect

Preview:

Code:

functionRotateAction (obj, DLT) {// Get the rotation radian value of the pixelletrotation = obj.getRotation() || 0; // Increase the curvature of each frame by obj.setRotation(rotation + DLT); }function startAnim() {ht.default. startAnim({frames: Infinity, interval: 20, action: () => {// }}); }Copy the code

3. Flow effect

Preview:

Flow effect is a very common effect, and the implementation process is relatively simple, just need to dynamically change the UV map offset value. In this example, multiple flow effects are achieved by dynamically increasing and decreasing the U direction of the six maps of the model:

functionUvFlow (obj, DLT) {// Change map UV coordinates to achieve flow effectlet offset = obj.s('all.uv.offset') | | (0, 0), obj.s('all.uv.offset', [offset[0] + dlt, offset[1]]);
}
function startAnimHt.default. startAnim({frames: Infinity, interval: 20, action: () => {// uvFlow(roadSmall, dltRoadSmall); }}); }Copy the code

4. Floating effect

Preview:

Code:

function blockFloat(obj, dis, dlt) {
  obj.forEach(node => {
    let startE = node.a('startE');
    if(startE == null) // Get the y (height) value node.a(startE == null)'startE', startE = node.getElevation());
    let float = node.a('float') | | 0; // Set status to directionlet status = node.a('status') | | 1; node.setElevation(startE + dis *float);
    if (float> 1 | |float< 0) // Change direction when exceeding threshold node.a('status', status = -status);
    float+= dlt * status; // Reset the pixel height node.a('float'.float);
  });
}
function startAnim() { ht.Default.startAnim({ frames: Infinity, interval: 20, action: () => {// Fire symbol floating effect blockFloat(fireFloatList, fireFloadDis, fireFloatDlt)}}); }Copy the code

In this way, a basic effect is achieved.

HT’s 3D urban agglomeration scheme not only has good effect on the large screen, but also has good experience on the mobile terminal, which enables the city manager to obtain real-time monitoring information whenever and wherever he or she is. Here are two preview images on the mobile terminal browser to give you a taste:




HT contains hundreds of industrial Internet 2 d, 3 d visualization application case, click here to experience playing with: http://www.hightopo.com/demos/index.html