Hacemos un configurador 3D sin programación y diseño.

Los configuradores de productos 3D son una tendencia relativamente nueva en marketing en línea y comercio electrónico. La creación de tales aplicaciones web fue posible debido al rápido desarrollo de la tecnología del navegador WebGL, que le permite dibujar gráficos 3D directamente en las páginas web de los usuarios.

En mi opinión, el único problema que impide el desarrollo de esta tendencia es la falta de herramientas efectivas. La mayoría de ellos son motores tridimensionales, que pueden ser muy útiles para un programador, pero no para un artista común. Pero hay excepciones: el complemento Verge3D de los paquetes 3ds Max y Blender ofrece los medios por los cuales una persona común puede hacer configuradores tridimensionales. Es esta herramienta la que analizaremos en nuestro artículo.

Como ejemplo, crearemos un configurador de joyas. Ahora, tales configuradores están haciendo todo para todos, por lo que el ejemplo es más que relevante.



Haga clic aquí para iniciar el configurador en una nueva ventana.


Como Verge3D puede funcionar con 3ds Max y Blender, analizaremos ambas herramientas. En este artículo, asumimos que ya tiene instalado Verge3D. Si no, descargue e instale desde el sitio del desarrollador. También hay una buena guía de instalación y tutoriales en video de capacitación.

Nuestro plan


No escuche a las personas que dicen que crear configuradores 3D es difícil y costoso. Todo es mucho más fácil si estudias claramente el proceso:

  1. Creamos contenido (modelos y materiales en 3D).
  2. Hacemos que la aplicación sea interactiva, es decir, receptiva a las acciones del usuario.
  3. Publicamos el configurador en la red.

Veamos todo el proceso en orden.

Creación de contenido en 3D


Este paso es el más difícil. Sin embargo, si tiene al menos algo de experiencia trabajando en paquetes 3ds Max y Blender o un amigo / empleado con experiencia similar, todo se hace con bastante rapidez.

En primer lugar, creamos una aplicación 3D utilizando el administrador de aplicaciones Verge3D. Ingrese el nombre del proyecto en el cuadro de diálogo que se muestra a continuación y deje el resto de la configuración tal como está.



A continuación, debe crear modelos tridimensionales. Tenga en cuenta que para obtener los mejores resultados, sus objetos 3D deben ser polígonos medianos. En principio, será muy bueno si tiene menos de 100 mil polígonos por modelo.



La siguiente etapa es la creación de materiales y texturas. Recuerde que siempre puede familiarizarse con los materiales simplemente mirando los archivos de origen en el ensamblaje Verge3D instalado (están en el directorio de applications/ring para la versión Blender y applications/ring_max para la versión 3ds Max).

Plata y oro


Así es como se ve el material plateado en Blender. La base del material es una textura esférica (llamada "ring_matcap") mezclada con un mapa de ruido y un mapa normal. La primera es una superficie "metálica", y las otras dos hacen que el material sea más realista. Como tenemos 3 metales diferentes: plata, oro rosa y amarillo, solo hacemos pequeños ajustes de color en el bloque ColorRamp del material que se muestra en la imagen.



El material plateado en 3ds Max también se ve aproximadamente igual. Es algo más simple, ya que tiene una textura de color difuso adicional, que es responsable del color de la superficie del metal.



Brillante


Es hora de descubrir el material del diamante. Para hacer un brillo y parpadeo característicos, lo modelamos con dos capas. La capa interna de la piedra preciosa tiene una estructura de malla irregular y el siguiente material:



Pero este es el material de la capa externa de la gema, es responsable del borde de un diamante:



Absolutamente también hizo un diamante en 3ds Max. La imagen a continuación muestra ambas capas de la gema.



Te contaré un poco cómo crear texturas para tales materiales. No hay nada complicado La mayoría de ellos son texturas primitivas de ruido / reflejos y entornos, que puede crear usted mismo o encontrar imágenes preparadas en Internet. La excepción son los mapas normales, que tendrán que ser horneados a partir de modelos de alta poli.

Agregar interactividad


Con el editor visual de Puzzles, no es necesario ser un programador para crear un configurador 3D decente. Simplemente use el rompecabezas "al hacer clic" para hacer que la aplicación responda a las acciones del usuario, "mostrar" / "ocultar" para cambiar la forma del anillo y "asignar material" para cambiar los materiales. En esta aplicación de joyería, tenemos 4 anillos diferentes, cada uno de los cuales está hecho de tres materiales diferentes, respectivamente plata y oro en rosa y amarillo.

Así es como se ve todo el conjunto:



Como puede ver, no hay nada complicado. En el lado izquierdo hay una unidad de selección de anillo, y el lado derecho es responsable de cambiar los materiales.

Como resultado, resulta que el usuario puede elegir entre 12 opciones para la ejecución del anillo. Imagine cuánto tiempo y esfuerzo necesita dedicar un joyero para producir tal colección. Y aquí tenemos al editor de Puzzles responsable de todo (en esos momentos entiendes que trabajar como programador o tridimensional es bastante bueno).

Publicar


Este es el más simple. Cualquier aplicación Verge3D puede implementarse en sus propios recursos o cargarse en el alojamiento de la red Verge3D Network. En el último caso, simplemente haga clic en el ícono del globo verde en el administrador de aplicaciones, y en unos segundos / minutos su configurador estará en la nube. Al final de la descarga, verá algo como esto:



En el cuadro de diálogo, puede obtener un enlace directo a su aplicación, un fragmento de código HTML para incrustar el configurador, su propio sitio web o blog (o una tienda en línea preparada). Hay botones para compartir aplicaciones a través de las redes sociales.

Conclusión


Según mis observaciones, durante el año, la industria del comercio en línea ha experimentado cambios radicales. El comercio minorista está reduciendo rápidamente el espacio comercial y se conecta a Internet, y Facebook ha permitido cargar modelos tridimensionales.

Las soluciones de configuración tridimensional crecen como hongos después de la lluvia, pero el uso de Verge3D para estos fines tiene varias ventajas. Entre ellos, la buena integración con los paquetes de modelado, la falta de dependencia de las soluciones en la nube y la flexibilidad en el desarrollo de aplicaciones tridimensionales. En general, vivimos en un momento interesante!

Source: https://habr.com/ru/post/es420315/


All Articles