Prefacio
En los últimos años, el desarrollo de vehículos aéreos no tripulados se ha vuelto cada vez más rápido, tanto para uso civil en fotografía aérea, como para uso militar en reconocimiento, involucrando una amplia gama de industrias, también conocidas como "cámaras voladoras". Pero para uso militar, los requisitos de rendimiento de los UAV son más estrictos e importantes.
Este sistema es un sistema de visualización 3D de drones construido a través del producto HT for Web de Hightopo, que simula el monitoreo del estado del dron a través de la pantalla panorámica del dron y su información.
El sistema contiene 4 modos de visualización: modo físico, modo térmico, modo de estructura de alambre y modo interno. Los modos se pueden cambiar operando los botones debajo del avión.
Proceso de implementación
- La interfaz de carga está dibujada con componentes de topología 2D e íconos completamente vectorizados. En comparación con los formatos tradicionales png, jpg y otros, la interfaz de carga está perfectamente adaptada a pantallas de varios tamaños y resoluciones como móviles, PC y pantallas grandes, y no aparecerá Situación de distorsión.
- El dron y su panel de información circundante utilizan un motor 3D para construir la escena, y el usuario puede ver el dron desde cualquier posición en la escena.
- El proceso de animación utiliza la función de animación ht.Default.startAnim proporcionada por el producto para impulsar el cambio del valor del atributo de gráficos. Aplicando su enfoque basado en el tiempo, solo se especifica el número de milisegundos del período de animación y el sistema calcula el número de fotogramas o se llama a la función de acción El número de veces para garantizar un proceso de animación más eficiente y fluido.
interfaz
Dirección de vista previa de operación de caso dinámico: https://www.hightopo.com/demos/index.html
En la interfaz de carga, el progreso de la carga se muestra cambiando dinámicamente los valores de los atributos de los gráficos. Después de la carga, se llama al método hidden2d a través de la animación finishFunc para cambiar la transparencia de los gráficos. Después de eso, la perspectiva de la escena se amplía a través de moveCamera para lograr el efecto de desvanecimiento hacia adentro. (Es decir, salir de la interfaz de carga y entrar en la escena 3D). Al mismo tiempo, cambie la posición de los gráficos en la escena 3D para realizar la integración de varias formas de drones y la separación de los botones correspondientes.
La interfaz 2D se hace dibujando un dibujo, mientras que el logotipo se hace dibujando un ícono. Un ícono se puede usar varias veces en el dibujo y puede mostrar diferentes apariencias. Los cuatro logotipos de la derecha en la siguiente figura son el mismo ícono, que muestran respectivamente diferentes métodos de corte y transparencia. El efecto de barra de progreso del logotipo en el sistema se logra cambiando dinámicamente la proporción de corte del ícono, y la interfaz se desvanece. Es cambiar la transparencia. Todo el icono se realiza dibujando una combinación de diferentes gráficos, también podemos cambiar el color de estos gráficos para formar el estilo del logo de la izquierda.
Cambio de forma de drone
La forma principal del UAV se divide en tres tipos: modo de entidad, modo de estructura de alambre y modo térmico. Al hacer clic en el botón de abajo, puede cambiar al formulario correspondiente al botón. Durante el proceso de cambio, se muestra el formulario de destino, y el formulario de destino y el formulario original se mueven hacia arriba y hacia abajo respectivamente, de modo que el usuario pueda verlos simultáneamente durante un breve período de tiempo y luego volver a la posición original y ocultar el formulario original. El método de ocultación es diferente: el modo de estructura alámbrica es para cambiar el color de la estructura y los otros dos modos son para ajustar la transparencia del modelo. El wireframe aquí se genera de acuerdo con el contorno del modelo, y el motor 3D lo calcula y dibuja automáticamente, lo cual es muy conveniente.
A través del motor 3D, podemos generar gráficos tridimensionales, o agregar modelos importados. La posición de los gráficos es confirmada por las coordenadas de las direcciones x, y, z, y los puntos donde convergen los ejes de coordenadas son los puntos de anclaje de los gráficos. El anillo giratorio en la parte delantera de la máquina sirve para ajustar el punto de anclaje al centro del anillo y manipular el atributo de rotación para girar. El UAV en el estado de estructura alámbrica en el sistema se genera como la esfera de la izquierda en la figura. Si ajustamos la transparencia del gráfico a 0, solo se mostrará el estilo de estructura alámbrica.
Estructura interna
En el modo wireframe, encontrarás un pequeño botón encima del botón, haz clic en él para ingresar a otro estado del dron, donde no solo podemos ver el wireframe, sino también tocar el interior del dron. Estructura, mira cada parte de ella. El proceso de entrada ocultará otros gráficos en la escena y revelará la estructura interna.
// 内部模式
function moveToInternal(){
const width = background.getWidth(); // 获取背景当前宽度
const beginLeft = -(width / 2 - 960); // 计算两侧节点起始位置
const beginRight = width / 2 + 960;
ht.Default.startAnim({
duration: 2000,
easing: t => {
return t;
},
action: (v, t) => {
linePlane.s('wf.color', 'rgba(64,173,152,' + (1 - v) + ')');
hiddenRing(v);
},
finishFunc: () => {
dm3d.each(e => {
e.s('3d.visible', false)
})
linePlane_internal.each(e => {
e.s('3d.visible', true);
})
ht.Default.startAnim({
duration: 1000,
easing: t => {
return 1 - (--t) * t * t * t;
},
action: (v, t) => {
title.setY(-50 + (70 + 50) * v);
returnButton.setY(1095 + (1020 - 1095) * v);
leftShape.setX(beginLeft + 130 * v);
rightShape.setX(beginRight - 130 * v);
}
})
}
})
}A continuación, exploremos cómo se realizan los gráficos que se mueven lentamente hacia la ventana desde todas partes al ingresar al modo interno
Hoy en día, las resoluciones de la pantalla del terminal son diversas. Muchas páginas web eligen un diseño receptivo o un diseño adaptable en las primeras etapas de desarrollo. Además de la representación vectorial, el componente de topología 2D de HT for Web también proporciona un conjunto de Método de diseño. En la imagen de arriba, podemos ver que la parte en el marco rojo es la interfaz de carga inicial, y la parte alrededor del marco rojo es la parte movida en el modo interno. La página de carga en el sistema es diferente debido a la adición de Método de diseño.
Primero, seleccionamos la imagen de fondo en el cuadro rojo como el nodo raíz de toda la página, modificamos su propiedad de pantalla completa para llenar y le agregamos un método de bloqueo de pantalla completa. En segundo lugar, configure el nodo raíz como el nodo de adsorción de los nodos restantes y modifique el diseño apropiado para los nodos restantes. De esta manera, la imagen de fondo llenará toda la interfaz y las posiciones de los nodos circundantes siempre permanecerán fuera de la imagen de fondo y no se mostrarán en la interfaz de carga. El modo interno mueve los nodos circundantes a la interfaz, lo que también se logra modificando la posición, pero debido a que el modo de bloqueo de pantalla completa está configurado en vertical, se cambia el ancho del fondo y el movimiento de los nodos en los lados izquierdo y derecho debe obtenerse después de obtener el ancho de visualización de la interfaz actual Para calcular la posición de movimiento.
para resumir
Hoy en día, con el rápido desarrollo de la informatización, las herramientas inteligentes se han convertido en nuevas fuerzas productivas y aparecen en nuestras vidas. Al mismo tiempo, nació el concepto de Internet industrial, que vincula personas, datos y equipos, y la interfaz visual puede mostrar bien los datos y los equipos, lo que es conveniente para la gestión y más seguro y eficiente.
HT for Web proporciona métodos de visualización en 2D y 3D. Es potente y fácil de aprender y usar. Los estudiantes interesados también pueden venir y experimentarlo.