prefacio
Más voluminosa maquinaria industrial, altos costos de transporte, al asistir a ferias o ventas a clientes en el extranjero, si no hay una pantalla física, la mera estática, sencillas instrucciones gráficas de presentación no permiten a los clientes plenamente entender el producto, no sólo el personal de causar problemas, véase también los clientes más exigentes. Si usted puede hacer dispositivo de visualización 3D en la Web, el personal de ventas no puede introducir la plataforma en cualquier momento para la presentación al cliente. Además, no condiciones realistas, equipo de presentación dividida y proceso de montaje, que muestra el efecto de la estructura interna y el funcionamiento dinámico, lo que permite la comprensión clientes más intuitiva de los componentes de la composición del producto, comprensión más precisa y completa de las características y características del producto, reduciendo en gran medida los costes de comunicación. Para hacer frente a estos puntos de dolor de la industria, este artículo utiliza Hightopo de HT para los productos web para lograr un caso de equipos de motor de visualización 3D.
Vista preliminar del sistema
Vista previa de Dirección: HTML5 WebGL motor de sistema de visualización en 3D basado ( http://www.hightopo.com/demo/engine/ )
Escena estableció
Modelo diseñador de motores de 3ds Max modelado, y luego exportar los archivos mtl obj, al analizar el archivo obj mtl generación de modelo de escena 3D disponibles (consulte el manual de obj "en el HT por JSON carga " sección), ya que los componentes individuales requeridos operación separada, por lo que después de introducir el modelo de dispositivo obj dividido en varios archivos.
2D es parte del panel de dibujo vectorial HT, necesitamos crear ht.graph.GraphView y ht.graph3d.Graph3dView para representar el contenido 2D y 3D. código relacionado es el siguiente:
nuevo nuevo ht.graph.GraphView G2D = var (); var = new nuevo ht.graph3d.Graph3dView G3D) (; componente de cuerpo // El 3D se añade a la g3d.addToDOM (); // El componente 3D 2D se añade a la raíz conjunto la div g2d.addToDOM (g3d.getView ());
Función para lograr
animación desmontaje equipos
Cuando hacemos clic en el botón de "ampliar", a cada conjunto diferente de retardo animación, la animación se tambaleó ejecución, a fin de lograr mejores efectos visuales, planos 2D y 3D escena mejor unidos entre sí.
Si corremos una velocidad constante de cada animación, parece inevitable que algunos monótona. Luego añade a la animación diferente Aliviar diferentes funciones, facilitando datos fórmula función por medio de diferentes curvas definidas para describir los parámetros necesarios para cambiar el patrón de atributo cuando la amplitud de cada devolución de llamada marco, para lograr un uniforme, más despacio después, la primera lenta después del ayuno, incluso antes de que restauró lentamente una variedad de efectos de animación más allá de los valores inicial y final y después. También hay un ejemplo que puede ayudarnos a sentir la función más intuitiva de diferente efecto de suavizado: " la de atenuarse ."
miembro seguidor central, tales como hojas de desmontar el anillo giratorio ampliada, que establece I Easing.backBoth efecto de suavizado, como sigue:
// anular animación
animCenter (Data) {
ht.Default.startAnim ({
DURACIÓN: 4500,
// función de aceleración proporcionado
que la relajación: Easing.backBoth,
// Animate retardo de un segundo
de retardo: 1000,
Acción: función (V, T) {
// primitivas modificados valor de escalado de
data.setScale (1 + 0,9 * V *, V + 0,9 1);..
// primitivas rotación modificado ángulo
data.setRotation (Math.PI V *);
},
});
}
// función de aceleración
Easing.easeOutStrong = función (T) {
var BACK_CONST = 1,70158;
IF (. (T * = 2) <1) {
retorno 0.5 * (T * T * (((BACK_CONST * = (1,525) ) + 1) * t - BACK_CONST ));
}
volver 0.5 * ((t - = 2) * t * (((BACK_CONST * = (1.525)) + 1) * t + BACK_CONST) + 2);
};
Animación desmantelamiento de los componentes del equipo, se consigue cambiando el ángulo de rotación y las coordenadas de los nodos, como sigue:
// targetP3 coordenadas después del desmontaje, corriente p3 coordinar
var node.p3 P3 = ();
.. compensar var = [targetP3 [0] - P3 [0], targetP3 [1] - P3 [1], [2 targetP3 ] - P3 [2]];
// ángulo de rotación targetR3 después del desmontaje, r3 es la corriente del ángulo de giro
var node.r3 R3 = ();
. compensar var = [targetR3 [0] - R3 [0], targetR3 [1 ] - R3 [1], targetR3 [2] - R3 [2]];.
// desmantelamiento animación
ht.Default.startAnim ({
DURACIÓN: 2000,
// función de aceleración proporcionado
que la relajación: Easing.easeOutStrong,
Delay: 1000,
Acción: función (V, T) {
// cambiar el nodo de coordenadas
node.p3 (p3 [0] + offset [0] * v, p3 [1] + offset [1] * v, p3 [2] + offset [2 ] V *);
// cambiar el ángulo de rotación nodo
node.r3 (r3 [0] + offset [0] * v, r3 [1] + offset [1] * v, r3 [2] + offset [2] * v );
},
});
// función de aceleración
Easing.easeOutStrong = función (T) {
. Retorno 1 - (comenzando con --t) * T * T * T;
};
Hay paneles a cada lado del dibujo, el efecto puede conseguirse proporcionando una oculta su dirección de corte y la relación de corte, como sigue:
// establecer la dirección de elementos de corte de derecha a izquierda
node.s ( 'clip.direction', 'izquierda');
// Cultivo Animación
ht.Default.startAnim ({
DURACIÓN: 1800,
que la relajación: Easing.easeOutStrong,
Acción: función (V, T) {
// primitivas modificados de recorte de relación de
node.s ( 'clip.percentage' ,. 1 - V);
}
});
// aliviar función
Easing.easeOutStrong = función (T) {
. retorno 1 - (comenzando con --t) * T * T * T;
};
Animación funcionamiento interno del dispositivo
A continuación vamos a lograr la visualización de diferentes ángulos desde el dispositivo para observar la parte de la construcción de animación, ángulo de visión de la escena 3D es Centro (coordenadas de destino) y el ojo (coordenadas de la cámara) parámetros proporcionados por los dos Graph3dView determinados, siempre y cuando el ángulo de visión dinámica de animación cambia tanto parámetros, aquí se proporciona el código de implementación moveCamera método HT es el siguiente:
g3d.moveCamera ([- 466, 93, -280], [40, -40, -40], {
Duración: 2500,
aliviando: function (t) {
return 1 - (--t) * t * t * t ;
},
});
componentes del aparato pequeñas adsorbidos sobre el miembro grande, seguirá el movimiento del miembro giratorio grande. rótula hidráulicas de tal manera que, cuando queremos realizar un pequeño movimiento de la parte de animación, si las coordenadas calculadas a modificar con muchos problemas, por lo que utiliza una forma modificada para lograr el ancla, el nodo de anclaje afecta a la posición, la rotación del anclaje es y la ampliación punto central. Aquí animación conseguirse modificando el eje Y efecto de anclaje varilla hidráulica es como sigue:
código relacionado es el siguiente:
ht.Default.startAnim ({
DURACIÓN: 800,
Acción: función (V, T) {
// nodo de anclaje modificado eje Y
node.setAnchor3d (0.5, V, 0,5);
},
};
Después de pulsar el botón de flujo, podemos ver el flujo de fluido en la tubería de animación. Para lograr el efecto del flujo, primero de todo lo que necesitamos para asignar un lateral continua dos (horizontal o vertical puede ser perfecta textura), entonces impulsados por códigos UV desplazado hacia la dirección positiva del cuadrante de un eje U, y la operación de bucle infinito, resultados son los siguientes:
Código es el siguiente:
ht.Default.startAnim ({
DURACIÓN: 2000,
Acción: función (V, T) {
// modificar el valor de textura uv
node.s ( 'shape3d.uv.offset', [V, 0]);
},
};
El equipo de recuperación de animación
Ratón en vigor
Con el fin de observar claramente la estructura interna del dispositivo a través de la cáscara, de modo que cuando los elementos emergentes del ratón sobre el miembro, I ajustar y fijar la transparencia del modo de modelo destacado modelo de vivienda, el código en cuestión es la siguiente:
// establecer el color de resaltado
ht.Style [ 'highlight.color'] = 'RGBA (255,255,255,0.6)';
// establecer el modo actual resaltado
g3d.setHighlightMode ( 'mouseOver');
// habilitados nodo resultados de resaltado
data.s ( 'highlight.visible', true);
// nodo se establece en interactivos
data.s ( 'interactivo', true) ;
después de girar interactiva // nodo, la escena por defecto no impide las interacciones
data.s ( 'preventDefaultWhenInteractive', a false);
// evento interactividad oyente
g3d.mi (función (E) {
// eventos de ratón en
IF (e.kind === 'la OnEnter') {
// abrir las transparentes nodo
data.s ( 'Shape3D .transparent 'a true);
// establecer el nodo de transparencia
data.s (' shape3d.opacity '0,25);
}
// ratón fuera caso
si (e.kind ===' OnLeave ') { ) {
Data.s ( 'shape3d.transparent', falsos);
}
});
límite escenas perspectiva
Por último, haremos el siguiente límite del alcance de toda la perspectiva escena, el código es el siguiente:
// establecer el ángulo máximo ht.Default.graph3dViewMaxPhi = Math.PI / 2; // establecer el ángulo mínimo ht.Default.graph3dViewMinPhi = Math.PI / 4;
resumen
A través caso podemos sentir, en comparación con el modo convencional en tres dimensiones de visualización, el dispositivo de forma más flexible y más intuitivo de expresión efecto dramático, para las empresas orientadas a la exportación, animado animación haga los productos extranjeros a entender más rápidamente cómo y ventajas, pero también a los errores causados por Evita malentendidos lingüísticos. Y en comparación con la animación industrial ordinaria, los sistemas de representación visual en la Web más rica, más libertad, la demanda posterior más flexible para el cambio, a un costo menor.
Tal como se usa en este documento, un dispositivo de diseño modelo de motores nucleares de ficción y más centrado en mostrar el efecto del modelo, si se aplica a los productos actuales, también puede crear un equipo de desmontaje proceso de reducción más práctico, la línea de productos de taladros de operación 3D, montaje de productos de personal, dividir, formación de mantenimiento. Estamos interesados pueden referirse a otro caso de " HTML 5 + WebGL 3D WebVR sistema de visualización de realidad virtual basada en la formación ."
Dirección original: https://www.cnblogs.com/xhload3d/p/12520693.html