Foreword
In recent years, with the discovery of gravitational waves, the shooting of black holes, the discovery of evidence of water on Mars, and other scientific breakthroughs, as well as the spread of literary and film works such as "Three Body", "Wandering Earth", "Interstellar Crossing" Popularization, those things in the universe that were originally out of reach are getting closer and closer to us, people's attention to unknown civilization and curiosity about the universe have reached an unprecedented height. Standing on a higher foothold, as a member of the human species, we should have a certain understanding of the planet we live in and the solar system in which we live, and the orbit, mass, and resource storage of the eight planets. Even the terrain has a certain understanding.
This system uses Hightopo's HT for Web product to construct a lightweight 3D visualization scene.
Solar System This system is mainly used in two scenarios:
1. As a carrier of scientific research achievements and new discoveries, do 3D space data visualization and display to the general public about the structure of the popular science solar system, the structure of each planet, etc., can be placed on the museum screen, school screen, and can also be used on the Internet Products, as the portal page and display page of aerospace websites.
2. As the cockpit of NASA and aerospace-related research institutions, in the 3D visualization interface, have an intuitive and fast understanding of the relative position of the planet, the state of the astral body, the astrological meteorology, and the astral topography. After the data transmission technology has achieved breakthroughs in speed and quality, the system can even be used for real-time monitoring and presentation of the planetary status, as well as online monitoring of astronauts' operating points and operating conditions. After configuring the data on artificial satellite orbits and monitoring areas, the system can be used as a satellite system to describe coverage and present observation data.
Preview address: www.hightopo.com/demo/solar-…
Interface introduction and effect preview
Theme 1: Solar system detection system
This system mainly displays information about the orbits, relative positions, mass of stars, and resource content of the eight major planets orbiting the sun.
The planet button in the upper right corner will trigger the switching of the view angle to the corresponding planet observation point
this.g3d.flyTo(data, {
animation: {
duration: 1000,
easing: function (t) {
return (2-t) * t;
}
},
distance: 2000
});
effect:
The theme provides two perspectives, bird's eye view and strabismus, other perspectives can be rotated by the mouse
The switching between the two viewing angles is triggered by the second and third round buttons in the upper right corner.
Call the moveCamera method to reset the camera position:
/**
* 切换镜头
* @param {Number} num - 主题编号
*/
triggerThemeCamera(num) {
//...
this.g3d.moveCamera(
[ 6742.5, 4625.6, -836.7],
[0, 0, 0],
{
duration: 500,
easing: function (t) {
return (2-t) * t;
}
}
);
}
effect:
By default, the information frame rotates along with the stars, which can achieve that the information frame does not appear when viewed from the top, and it looks more refreshing.
If you need to view the details of the star, you can click the play button in the upper right corner, which will trigger all the information boxes to face the screen.
By changing the message panel shape3d.autorotate to achieve:
setBillboardToCamera(flag) {
const list = this.dm3d.getDatas();
list.each( item => {
if (item instanceof ht.Node) {
if (/_board$/.test(item.getTag())) {
if (flag) {
item.s('shape3d.autorotate', true);
}
else {
item.s('shape3d.autorotate', false);
}
}
}
});
}
effect:
Theme 2: Dyson sphere 3D topology
This system mainly displays the interaction between the planet selected by the user and other interstellar matter, and can also be used to display the distribution of satellites around the planet, as well as the topology structure of the gravity and radiation range between the stars.
Hovering over a star will trigger the selected state, and the data on the star will be monitored on the right.
After listening to mousemove, call the resetPinkOutside method to reset the pink border to the hovering node position:
/**
* 重新设置边框
* @param node
*/
resetPinkOutside(node) {
const pinkOutside = this.dm3d.getDataByTag('billboard4');
pinkOutside.setPosition3d(node.getPosition3d()[0],node.getPosition3d()[1],node.getPosition3d()[2]);
}
effect:
Theme 3: Meteorological and Terrain Detection System
This theme is mainly used to present the specific detection points on the star selected in scene two. The contour lines around the points automatically generate a 3D terrain and blinking point indication on the left, and are related to the detection on the right. The points correspond to each other.
This function can be used for the presentation of terrain, and can also be used for the display of the meteorological state of the star's atmosphere.
The bottom left corner monitors the geological heat and meteorological flow data in real time.
Clicking the corresponding detection point on the right will trigger the zoom animation of the right point, and the corresponding 3D point on the left will also change synchronously, and other points will call setAnimation (null)
setTwinkleToPoints(flag) {
//...
if (flag) {
if (point1_3D && point1) {
if (this.animationFlags.twinklePointNum === 1) {
point1_3D.setAnimation({
change: {},
start: ["change"]
});
point1.setAnimation({
width: {},
height: {},
start: ["width", "height"]
});
} else {
SolarSystem.disableTwinkle(point1_3D, point1);
}
} else {
SolarSystem.disableTwinkle(point1_3D, point1);
//...
}
}
}
effect:
Correlation: linkage of three themes (systems)
The three systems are interrelated, and there are three ways to switch between them.
1. Click the switch button in the upper left corner:
The upper left corner is the response range of the navigation bar. When the mouse is hovered, the corresponding value of the animation controller animationFlags will be changed to trigger the navigation bar to fall.
this.g2d.getView().addEventListener('mousemove', event => {
const node = this.g2d.getDataAt(event);
let tag = '';
if (node) {
tag = node.getTag();
}
if('navigator' === tag){
if(!this.animationFlags.navigatorRotate && this.animationFlags.navAnimationDone){
this.animationFlags.navAnimationDone = false;
this.animationControl(0, true);
}
this.resetButtonStyle();
}
else if (/^navButton/.test(tag)) {
this.animationFlags.navButtonOnHover = true; // 防止动画过快导致无法点选按钮
this.resetButtonStyle();
if (!node.a('buttonOnClick')) {
node.setImage('buttonOnHover');
}
}
else {
this.resetButtonStyle();
this.animationFlags.navButtonOnHover = false;
if(this.animationFlags.navigatorRotate && this.animationFlags.navAnimationDone){
setTimeout(() => {
if(!this.animationFlags.navButtonOnHover){
this.animationFlags.navButtonOnHover = true;
this.animationFlags.navAnimationDone = false;
this.animationControl(0, false);
}
}, 500);
}
}
}, false);
effect:
2. Click the bottom ruler bar, corresponding to 3 modules:
3. Click on the topology of theme two to jump to the planet in theme one, and click on the stars of theme two to jump to the terrain of theme three. Theme three can't be connected forward, and you can only jump through the first two ways:
to sum up:
The system uses a lightweight and efficient ht library, vector plane information is associated with 3D objects, and is visualized by 3D topology, the relative position is clear and intuitive, the 3D terrain corresponds to the contour map, and the altitude and mutual occlusion relationship can be accurately grasped .
The system satisfies the most basic space scene and data presentation framework. More detailed data presentation and business functions need to be addressed by the relevant staff according to specific business scenarios.
