preface
In recent years, with the discovery of gravitational waves, the photographing of black holes, the discovery of evidence of water on Mars and other scientific breakthroughs, as well as the spread and popularization of literary and film works such as the Three-Body Problem, The Wandering Earth and Interstellar, things that used to be far away in the universe are getting closer and closer to us. People’s attention to unknown civilizations and curiosity about space have reached an unprecedented height. Standing on a higher footing, as members of the human species, it is natural for us to have some knowledge of the planet we live in, the solar system we live in, and the orbits, masses, resources and even topography of each of the eight planets.
This system uses Hightopo’s HT for Web products to construct lightweight 3D visual scenes.
The Solar System is mainly used in two scenarios:
1. As the carrier of scientific research achievements and new discoveries, 3D space data visualization is used to popularize the composition of the solar system and the organizational structure of planets to the general public. It can be placed on the large screen of museums and schools, and can also be used for Internet products, as the portal page and display page of aviation and aerospace websites.
2. As the cockpit of NASA and aerospace related research institutions, it can have an intuitive and fast understanding of the relative position of planets, star state, star weather and star topography in the 3D visualization interface. At present, with the increasing success of space exploration, after the breakthrough in speed and quality of data transmission technology, The system can even do real-time monitoring of the planet state, and online monitoring of the astronaut’s operation points and operations. The system can be used as a satellite system to describe coverage and present observation data after the configuration of satellite orbit and monitoring area data.
Preview address:www.hightopo.com/demo/solar-…
Interface introduction and effect preview
Topic 1: Solar System detection System
This system mainly displays the information of 8 planets’ orbits around the sun, their relative positions, mass and resource content.
The planet button in the upper right corner will trigger the perspective switch to the corresponding planet observation point
this.g3d.flyTo(data, {
animation: {
duration: 1000,
easing: function (t) {
return (2-t) * t;
}
},
distance: 2000
});Copy the codeEffect:
The theme offers two views, a bird ‘s-eye view and a squint view, while the other views can be rotated by mouse
The switch 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 - num */ triggerThemeCamera(num) {//... This.g3d.movecamera ([6742.5, 4625.6, -836.7], [0, 0, 0], {duration: 500, easing:function (t) {
return(2-t) * t; }}); }Copy the codeEffect:
By default, the message box rotates with the star, which can achieve a top view without the message box, looking cleaner.
If you want to see star details, you can click the Play button in the upper right corner, which triggers all the information boxes to face the screen.
This is done by changing the message panel shape3d.autorotate:
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); }}}}); }Copy the codeEffect:
Topic 2: Dyson star 3D topology
This system mainly displays the interaction between the planet selected by the user and other interstellar materials, and can also be used to display the distribution of satellites around the planet, as well as the topological structure of gravity and radiation range between stars.
Hovering over a star will trigger the selected state, and the right side will monitor the data related to the star.
Reset the pink border to the hovering node by listening to the Mousemove and calling the resetPinkOutside method:
/** * resetPinkOutside(node) {const pinkOutside = this.dm3d.getDatabyTag ('billboard4');
pinkOutside.setPosition3d(node.getPosition3d()[0],node.getPosition3d()[1],node.getPosition3d()[2]);
}Copy the codeEffect:
Topic three: astral weather, terrain detection system
This theme is mainly used to present the specific detection point on the selected star in scene 2. Contour lines around the point point automatically generate a 3D terrain and flashing point signal on the left, and correspond to the detection point on the right.
This function can be used for the presentation of terrain, also can be used to show the meteorological state of the star atmosphere.
At the lower left corner, geological heat and meteorological flow data at the point are monitored in real time.
Clicking the corresponding detection point on the right will trigger the zoom animation of the point on the right, and the corresponding 3D point on the left will change synchronically. For other points, setAnimation(NULL) will be called.
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); / /... }}}Copy the codeEffect:
Association: The association of three topics (systems)
The three systems are interrelated, and there are three ways to switch between them.
1. Click the toggle button in the upper left corner:
The upper left part is the response range of the navigation bar. When the mouse is hovering, the corresponding value of the animationFlags of the animation controller will be changed to trigger the navigation bar to fall. The hover and select buttons will set different backgrounds through the setImage method
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);Copy the codeEffect:
2. Click the ruler bar at the bottom, corresponding to three modules respectively:
3. Click the planet in theme 1 to jump to the topological structure of Theme 2. Click the star in theme 2 to jump to the terrain of theme 3.
Conclusion:
The system uses lightweight and efficient HT library, and the vector plane information is associated with 3D objects, and 3D topology visualization is adopted. The relative position is clear and intuitive, 3D terrain corresponds to contour map, and the relationship between altitude and mutual occlusion can be accurately grasped.
The system meets the most basic space scene and data presentation framework, more detailed data presentation and business functions are subject to the relevant staff according to the specific business scene more detailed requirements.