Un configurador de joyas 3D es una herramienta online creada en Vectary que invita al comprador a diseñar y personalizar sus propias joyas en un espacio digital. Su interfaz intuitiva y su amplia gama de opciones permiten al usuario configurar su propio diseño final, que se puede compartir mediante un enlace directo o incrustar directamente en una página web.
Este proyecto adopta un enfoque más narrativo en comparación con un configurador estándar. Permite a los usuarios crear su propio anillo exclusivo en tres pasos, en lugar de interactuar con objetos en un único punto. La UI flotante controla la navegación básica por la escena mientras muestra las opciones configurables. Estos son los pasos:
La variante final también se puede compartir en realidad aumentada (AR) y ver en un entorno real.
El anillo en sí fue modelado en Blender e importado como archivo .obj. Las piedras se crearon mediante escaneo 3D utilizando fotogrametría y se importaron en Vectary Studio como archivos .obj. El número de polígonos de las piedras se redujo en Studio con el plugin Simplify.
La escena está dividida en tres áreas con diferentes configuraciones de iluminación. Cada una de ellas cuenta con composiciones de bodegón formadas por rocas realistas, con elementos interactivos situados en el centro de cada una. Una luz direccional permanece fuera de estos grupos y es visible en todo momento. Iluminar el cuerpo del anillo y las gemas presenta ciertos retos. En la primera área, el cuerpo del anillo está rodeado por tres luces rectangulares y un foco, con el fin de resaltar todas las partes en los reflejos del cuerpo del anillo. El área de las gemas depende exclusivamente de la luz direccional, mientras que el montaje final del anillo incluye dos focos y una luz rectangular.
Las luces están organizadas en grupos y colocadas bajo variantes para optimizar el rendimiento y usar un solo grupo de luces activo. La siguiente área nunca es totalmente visible debido al ángulo de la cámara y a los efectos de desvanecimiento.
La paleta cromática general de la escena es neutra, con un tono rosa palo en lugar de blanco monocromático, que complementa las rocas de bodegón del entorno de la escena. Las piedras son recursos realistas escaneados en 3D con texturas optimizadas solo en el canal de color; todos los demás canales están vacíos para reducir el tamaño de la escena. La variación en el aspecto de estas rocas se consigue mediante mapas de luz horneados.
Consejo: elimina la geometría innecesaria de las zonas invisibles, como la parte inferior de estas rocas. Además, solo hay un tipo de roca en la escena, duplicada como instancia con diferentes parámetros de tamaño, lo que también permite reducir el tamaño del archivo. El cuerpo del anillo de la primera área presenta cuatro materiales metálicos diferentes inspirados en metales preciosos.
Las gemas emplean múltiples técnicas para lograr el aspecto deseado. Cada gema contiene un duplicado más pequeño en su interior, y el parámetro de refracción con absorción para el color desempeña un papel clave. Además, las gemas exteriores tienen una capa de clear coat con el valor configurado al 1000 % en la parte superior. Esta combinación de diferentes materiales aplicados a las gemas exteriores e interiores crea un aspecto final más complejo.
Las dos primeras áreas presentan animaciones de 360 grados en bucle de cada cuerpo de anillo y gema, configuradas para repetirse de forma lineal. El menú de la UI flotante controla la navegación por la escena y las configuraciones de materiales. La UI contiene imágenes con nombres que cambian los materiales del cuerpo del anillo y las gemas al hacer clic.
Los materiales del cuerpo del anillo en la primera y última área no están vinculados, lo que requiere cambiar dos materiales a la vez. Esto garantiza que, al pasar al paso número tres, veas el mismo material seleccionado al principio.
