Habilidades operativas de Principie ¿Cómo logra Principio la visualización interactiva de elementos en 3D?

Con la mejora del consumo, la visualización 3D de productos tiene un enorme espacio de aplicación. La visualización 3D optimiza la experiencia para los consumidores; para los productos, mejora el efecto de visualización; para los comerciantes, integra eficazmente la visualización de escenas en línea y fuera de línea.

Este tutorial es un principio de operación interesante: demostración interactiva en 3D. Analizaré brevemente varios métodos comunes de implementación de pantallas 3D para aplicaciones en línea y luego lo llevaré a usar Principio para crear una vitrina 3D simple.

: Una plataforma de diseño de autoaprendizaje adorada por los jóvenes. La introducción del software, la enseñanza del diseño y las descargas de software se encuentran aquí~

Pasos principales para crear visualizaciones 3D interactivas de objetos:

1. Preparación

Acerca del software: En primer lugar, este tutorial es solo un resumen de las ideas y operaciones del caso de demostración 3D. Es posible que algunas operaciones básicas de Principio no se explique en detalle en este artículo, por lo que los lectores deben tener una determinada base de software.

El principio de la versión 5.3 del software no es realmente importante, pero se recomienda intentar utilizar la versión en inglés. Muchas versiones de terceros de la versión china tienen errores más o menos incontrolables y extraños. Además, Principio es un software liviano con pocas funciones complejas. Una vez que te acostumbres a usar la versión en inglés, no habrá grandes obstáculos en su funcionamiento.

Acerca de los materiales: El caso requiere el uso de más de 30 diagramas de secuencia de la página de detalles del producto del sitio web de StockX. Y agregue un "gesto de clic" a la imagen 01 de la mesa de trabajo 1 para conectarse a la mesa de trabajo 2

La duración predeterminada de la animación es 0,3 s. Podemos extenderlo un poco, primero extendiendo la línea de tiempo de todas las características de cambio de imagen a 0,6 segundos para observar mejor los cambios en la rotación y el desplazamiento del zapato.

Dado que la rotación del zapato requiere que aparezcan continuamente 9 imágenes del 01 al 09 para formar una sensación de rotación falsa, la opacidad cambia del 100% al 0% y el tiempo es de 0s a 0,02s. respectivamente. 0,02 s a 0,04 s; 0,04 s a 0,06 s, etc., conéctelos. (Nota: en teoría, el tiempo de cambio de transparencia de cada imagen debería ser 0,6/9≈0,07s)

Pero. Juega varias veces para tener una idea del ritmo de la animación. Si no estás satisfecho con el ritmo, puedes ajustarlo tú mismo. No es necesario que te refieras a mí exactamente.

5. 3D interactivo

Primero copie Artboard2 a Artboard3. Debe crear una pantalla 3D con interacción de gestos en Artboard3. Debido a que los zapatos en este momento son los primeros en la décima imagen, es necesario seleccionar todas las imágenes 01-09, cambiar su Opacidad al 100% y presionar Mayús+?+[ para colocarlos en la parte inferior.

A continuación, agregue Auto a Artboard 2 y conéctelo a Artboard 3. En este punto, no hay cambios en la animación automática. Para garantizar una conexión perfecta entre Artboard2 y Artboard3, la línea de tiempo debe comprimirse a 0S.

En este paso dibujamos un rectángulo del mismo tamaño que la imagen y lo cubrimos, bajando su opacidad para su posterior visualización.

Agregue desplazamiento a los rectángulos horizontales y verticales, y desactive la subcapa de recorte para observar mejor el desplazamiento de los rectángulos.

A continuación, configura el controlador controlado por el scroll rectangular para cada imagen. Seleccione la décima foto y abra el panel del controlador. La línea de tiempo inicial es demasiado densa y no es adecuada para operaciones detalladas, así que primero ajuste su rango de vista previa a un área adecuada.

Agregue opacidad fig.10 debajo de ScrollX y arrastre el cursor a 5px para agregarla nuevamente. En este punto, cuando el rectángulo se mueve 5 píxeles, la opacidad de la Figura 10 no cambiará. Cuando el rectángulo se haya movido 7px, cambie la Opacidad a 0%, luego arrastre el cursor del fotograma clave a 6px. ¿Por qué no configurarlo directamente en 6px? Porque el control de enlace puede reconocer automáticamente que la unidad más pequeña agregada es 2px y debe arrastrarla hacia atrás manualmente)

La opacidad no cambia de 5px a 10px, pero la opacidad cambia de 11px a 10px.

Espera hasta que ScrollX complete la configuración de todas las imágenes.

La imagen muestra el efecto interactivo después de completar todas las configuraciones de ScrollX. Aunque las configuraciones una por una son agotadoras, ¡el efecto después de completarlas no es sorprendente!

En este ejemplo, Nosotros solo puedes arrastrar y soltar la rotación hacia la izquierda. Si queremos rotarla hacia la derecha, debemos agregar otra imagen circular encima de la capa. La opacidad inicial es 0% y, al arrastrar hacia la derecha, cambia continuamente al 100%. (No haré una demostración aquí porque soy vago)

Seleccione todas las imágenes, agregue escala a su desplazamiento y y cambie la escala a 2 cuando el desplazamiento y sea -200px.

Esto nos permite controlar el tamaño de los zapatos al arrastrar el rectángulo

De manera similar, cuando ScrollY se mueve hacia arriba, agrega un ángulo de 0° a 180° a todas las imágenes

La parte de vinculación está completa

A continuación, cambie la opacidad del rectángulo a 0% y ocultelo, cree una nueva mesa de trabajo y vuelva a la animación según el método anterior~

Operación En este punto, un principio para crear una visualización interactiva de elementos en 3D está completo. Espero que lo que comparto le resulte útil~ Obtenga más información sobre el conocimiento introductorio del software, no se lo pierda~