[Click here to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.]
With the enlargement of city size, it is difficult to thoroughly display the city panorama in traditional ways, but with the application of 3D technology, the way of 3D city group appears to present the city panorama dynamically and interactively. With the smart city system, through the way of Web visualization, city managers can more timely understand the traffic conditions, urban fire control, power management and other aspects of operation, and make processing.
This demo uses "HT for Web" graphic engine, a lightweight HTML5/WebGL modelling scheme. Traditional smart buildings/building automation/building security/smart parks often use BIM (Building information modelling) software, such as Revit or Bentley for Autodesk, but these BIM modelling data are often too bulky, with most of the detailed information on the building. Universal self-control has little meaning, but it affects the trend of industry Web SCADA or Web configuration monitoring. So we use the scheme of lightweight HTML5/WebGL modelling with Hightopo’s HT for Web products to achieve fast modelling, runtime lightweight and even mobile terminal browser to visualize operation and maintenance in 3D.
demo address: https://www.hightopo.com/demo/city/
Preview :
Code Implementation
Load 3d Scene
Create a new 3d scene and add it to the page.
const g3d = new ht.graph3d.Graph3dView();
const dm3d = g3d.dm();
g3d.addToDOM();
The addToDOM function loads the scene into the HTML body by default and fills the window.
Next, the city scene json is deserialized, and the scene’s perspective, center position, sky box are set in the callback of the deserialization function, and each meta-information is obtained, calling the 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'));
// Primitives for obtaining diffusion effects
scaleList.push(
dm3d.getDataByTag('scaleBlue'),
dm3d.getDataByTag('scaleRed')
);
···
// Start animation
startAnim();
});
Animation Implementation
The loaded city scene is as follows:
We can see the blue and yellow water ripple effect in the scene, the flow effect of roads, fire passages, the effect of floating up and down, and the rotating logo and satellite.
Animations are all implemented through ht.Default.startAnim. Let’s start by understanding:
ht.Default.startAnim({
// Number of animation frames
frames: 12,
// Animation Frame Interval Milliseconds
interval: 10,
// Animation Slow Function, default to ht.Default.animEasing
easing: function(t){ return t * t; },
// Functions called after the animation ends
finishFunc: function(){ console.log('Done!') },
// The action function must be provided to implement property changes during animation
action: function(v, t){
// This example shows animating a node node from position p1 to position p2
node.setPosition(
p1.x + (p2.x - p1.x) * v,
p1.y + (p2.y - p1.y) * v
);
}
});
These are Frame-Based animations, in which the user controls the animation effect by specifying the number of frames in the frame animation and the interval animation frame interval parameter.
ht’s Animation Manual can be consulted: Animation Manual
The following describes the implementation of each effect in turn.
Ripple effect
Preview:
Code:
function waveScale(obj, dlt, max, min) {
obj.forEach(node => {
// Increase in diffusion radius
let s = node.getScaleX() + dlt;
// Reset to minimum when diffusion radius is greater than maximum
if (s >= max) s = min;
// Set zoom values in x,y,z direction
node.setScale3d(s, s, s);
});
}
function startAnim() {
ht.Default.startAnim({
frames: Infinity,
interval: 20,
action: () => {
// Diffuse Blue and Diffuse Red
waveScale(scaleList, dltScale, maxScale, minScale);
}
});
}
Rotation effect
Preview:
Code:
function rotateAction(obj, dlt) {
// Gets the value of the radius of rotation of the primitive, without zeroing it
let rotation = obj.getRotation() || 0;
// Radian increase per frame
obj.setRotation(rotation + dlt);
}
function startAnim() {
ht.Default.startAnim({
frames: Infinity,
interval: 20,
action: () => {
// Satellite Rotation
rotateAction(star, dltRoattion);
}
});
}
Flow effect
Preview map:
Flow effect is a very common effect, and the process of implementation is relatively simple, just need to change the offset value of the uv map dynamically. In this example, multiple flow effects are achieved by dynamically increasing or decreasing the U direction of the map on the six sides of the model:
function uvFlow(obj, dlt) {
// Change map uv coordinates for flow effect
let offset = obj.s('all.uv.offset') || [0, 0];
obj.s('all.uv.offset', [offset[0] + dlt, offset[1]]);
}
function startAnim() {
ht.Default.startAnim({
frames: Infinity,
interval: 20,
action: () => {
// Trail Flow Effect
uvFlow(roadSmall, dltRoadSmall);
}
});
}
Floating effect
Preview map:
Code:
function blockFloat(obj, dis, dlt) {
obj.forEach(node => {
let startE = node.a('startE');
if (startE == null)
// Gets the value of the primitive in the y (height) direction
node.a('startE', startE = node.getElevation());
let float = node.a('float') || 0;
// Set status as direction
let status = node.a('status') || 1;
node.setElevation(startE + dis * float);
if (float > 1 || float < 0)
// Change direction beyond threshold
node.a('status', status = -status);
float += dlt * status;
// Reset Primitive Height
node.a('float', float);
});
}
function startAnim() {
ht.Default.startAnim({
frames: Infinity,
interval: 20,
action: () => {
// Floating effect of fire sign
blockFloat(fireFloatList, fireFloadDis, fireFloatDlt)
}
});
}
In this way, a basic effect is achieved.
HT’s 3D urban agglomeration scheme not only works well on the big screen, but also has a good experience on the mobile side, which enables city managers to get real-time monitoring information anytime and anywhere. Here are two preview maps on the mobile browser for you to experience:
HT contains hundreds of industrial Internet 2D 3D visualization applications. Click here to check more demos:
https://www.hightopo.com/demos/en-index.html
Top comments (0)