Prólogo
En los últimos años, con el descubrimiento de ondas gravitacionales, el disparo de agujeros negros, el descubrimiento de evidencia de agua en Marte y otros avances científicos, así como la difusión de obras literarias y cinematográficas como "Tres cuerpos", "Tierra errante", "Cruce interestelar" La popularización, esas cosas en el universo que originalmente estaban fuera del alcance se están acercando cada vez más a nosotros, la atención de la gente a la civilización desconocida y la curiosidad sobre el universo han alcanzado una altura sin precedentes. Parados en un punto de apoyo más alto, como miembro de la especie humana, deberíamos tener una cierta comprensión del planeta en el que vivimos y del sistema solar en el que vivimos, y la órbita, la masa y el almacenamiento de recursos de los ocho planetas. Incluso el terreno tiene una cierta comprensión.
Este sistema utiliza el producto HT para Web de Hightopo para construir una escena de visualización 3D ligera.
Sistema solar Este sistema se utiliza principalmente en dos escenarios:
1. Como portador de logros de investigación científica y nuevos descubrimientos, la visualización de datos espaciales en 3D y la visualización al público en general sobre la estructura del popular sistema solar científico, la estructura de cada planeta, etc., se pueden colocar en la pantalla del museo, en la pantalla de la escuela, y también se pueden usar en Internet Productos, como la página del portal y la página de visualización de sitios web aeroespaciales.
2. Como la cabina de la NASA y las instituciones de investigación relacionadas con el sector aeroespacial, en la interfaz de visualización 3D, tienen una comprensión intuitiva y rápida de la posición relativa del planeta, el estado del cuerpo astral, la meteorología astrológica y la topografía del cuerpo astral. Después de que la tecnología de transmisión de datos haya logrado avances en velocidad y calidad, el sistema incluso puede usarse para el monitoreo en tiempo real y la presentación del estado planetario, así como el monitoreo en línea de los puntos de operación y las condiciones de operación de los astronautas. Después de configurar los datos en órbitas satelitales artificiales y áreas de monitoreo, el sistema se puede usar como un sistema satelital para describir la cobertura y presentar los datos de observación.
Dirección de vista previa: www.hightopo.com/demo/solar-…
Introducción a la interfaz y vista previa de efectos
Tema 1: sistema de detección del sistema solar
Este sistema muestra principalmente información sobre las órbitas, las posiciones relativas, la masa de estrellas y el contenido de recursos de los ocho planetas principales que orbitan alrededor del sol.
El botón de planeta en la esquina superior derecha activará el cambio del ángulo de visión al punto de observación del planeta correspondiente
this.g3d.flyTo(data, {
animation: {
duration: 1000,
easing: function (t) {
return (2-t) * t;
}
},
distance: 2000
});
Efecto:
El tema proporciona dos perspectivas, vista de pájaro y estrabismo, otras perspectivas se pueden girar con el mouse
El cambio entre los dos ángulos de visión se activa mediante los botones redondos segundo y tercero en la esquina superior derecha.
Llame al método moveCamera para restablecer la posición de la cámara:
/**
* 切换镜头
* @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;
}
}
);
}
Efecto:
De manera predeterminada, el marco de información gira junto con las estrellas, lo que puede lograr que el marco de información no aparezca cuando se ve desde la parte superior, y se ve más refrescante.
Si necesita ver los detalles de la estrella, puede hacer clic en el botón de reproducción en la esquina superior derecha, lo que activará todos los cuadros de información para mirar hacia la pantalla.
Al cambiar el panel de mensajes shape3d.autorotate para lograr:
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);
}
}
}
});
}
Efecto:
Tema 2: topología 3D de esfera Dyson
Este sistema muestra principalmente la interacción entre el planeta seleccionado por el usuario y otra materia interestelar, y también puede usarse para mostrar la distribución de satélites alrededor del planeta, así como la estructura de topología de la gravedad y el rango de radiación entre las estrellas.
Al pasar el cursor sobre una estrella, se activará el estado seleccionado y los datos de la estrella se controlarán a la derecha.
Después de escuchar mousemove, llame al método resetPinkOutside para restablecer el borde rosa a la posición del nodo flotante:
/**
* 重新设置边框
* @param node
*/
resetPinkOutside(node) {
const pinkOutside = this.dm3d.getDataByTag('billboard4');
pinkOutside.setPosition3d(node.getPosition3d()[0],node.getPosition3d()[1],node.getPosition3d()[2]);
}
Efecto:
Tema 3: Sistema de detección meteorológica y del terreno.
Este tema se utiliza principalmente para presentar los puntos de detección específicos en la estrella seleccionada en la escena 2. Las líneas de contorno alrededor de los puntos generan automáticamente un terreno 3D y una indicación de punto de parpadeo a la izquierda, y están relacionados con la detección a la derecha. Los puntos se corresponden entre sí.
Esta función se puede usar para la presentación del terreno y también para mostrar el estado meteorológico de la atmósfera de la estrella.
La esquina inferior izquierda controla los datos de calor geológico y flujo meteorológico en tiempo real.
Al hacer clic en el punto de detección correspondiente a la derecha, se activará la animación de zoom del punto derecho, y el punto 3D correspondiente a la izquierda también cambiará sincrónicamente, y otros puntos llamarán setAnimation (nulo)
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);
//...
}
}
}
Efecto:
Correlación: vinculación de tres temas (sistemas)
Los tres sistemas están interrelacionados, y hay tres formas de cambiar entre ellos.
1. Haga clic en el botón de cambio en la esquina superior izquierda:
La esquina superior izquierda es el rango de respuesta de la barra de navegación. Cuando se pasa el mouse, se cambia el valor correspondiente de la animación del controlador animationFlags, lo que activa la caída de la barra de navegación. Los botones de desplazamiento y clic establecerán diferentes fondos a través del método setImage.
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);
Efecto:
2. Haga clic en la barra de la regla inferior, correspondiente a 3 módulos:
3. Haga clic en la topología del tema dos para saltar al planeta en el tema uno, y haga clic en las estrellas del tema dos para saltar al terreno del tema 3. El tema tres no puede conectarse hacia adelante, y solo puede saltar a través de las dos primeras formas:
Resumen:
El sistema utiliza una biblioteca ht liviana y eficiente, la información del plano vectorial está asociada con objetos 3D y se visualiza mediante una topología 3D, la posición relativa es clara e intuitiva, el terreno 3D corresponde al mapa de contorno y la altitud y la relación de oclusión mutua se pueden captar con precisión .
El sistema satisface la escena espacial más básica y el marco de presentación de datos. El personal relevante debe abordar la presentación de datos más detallada y las funciones comerciales de acuerdo con los escenarios comerciales específicos.
