Te presentamos Vectary Canvas, un nuevo espacio para la ideación acelerada por AI. → Canvas

Del modelado 3D a su inserción en la web

Un tutorial completo de diseño de producto.

Aprende a configurar varias operaciones booleanas y a crear el producto completo en unos sencillos pasos. Al final, trabajaremos en la optimización de la escena para prepararla para la web y verla en AR.

1. Prepara la escena

Comenzamos con la forma básica del hervidor, que nos servirá como objeto de referencia. 

Ajustes del entorno

Asegúrate de activar la cuadrícula para orientarte mejor en el espacio. Haz clic derecho en una zona vacía de la escena y selecciona Show grid en el menú. 

Para poder ver la sombra, añade un plano de suelo. Para la iluminación, en lugar de usar un entorno por defecto, vamos a utilizar el preajuste llamado Skate park. Este entorno es fantástico y ofrece una iluminación de aspecto muy natural. No está ni sobreexpuesta ni subexpuesta y, además, genera unos reflejos muy atractivos. Los ajustes de entorno predefinidos de Vectary son sumamente útiles y ahorran mucho tiempo.

Para cambiar el entorno, pulsa la tecla ESC del teclado para deseleccionar todo en la escena. Haz clic en Environment en el panel lateral derecho. Selecciona la opción Outdoor en el menú desplegable y desplázate hasta Skate park. Ve a los ajustes y experimenta con ellos para conseguir el efecto que mejor se adapte. Para esta escena, elegimos los siguientes valores: intensidad en 70, rotación en 200, saturación en -100 y sombras en 75. 

Iluminación optimizada

Para configurar la iluminación, utilizaremos luz direccional, ya que ofrece varias ventajas. Con una sola fuente de luz, podemos cubrir toda el área de la escena. Podemos controlar la intensidad, así como aumentar o disminuir la nitidez de las sombras. Para aportar una sensación de realismo y mejorar el aspecto visual de la escena, recuerda siempre activar las sombras. 

Como el objetivo es integrar el proyecto final en la web, procura no excederte con las sombras, ya que podrían afectar al rendimiento. De hecho, por eso utilizamos luz direccional en esta escena: es más eficiente para el rendimiento, ya que solo proyecta sombras en una dirección. 

Ajustar el ángulo y el color de la luz también es posible y resulta muy eficaz. Ajustaremos el punto de destino a unos 45 grados y, en lugar del color blanco por defecto, le daremos variedad con un degradado lineal de arriba a la izquierda a abajo a la derecha. 

Añade efectos

Vayamos un poco más allá y utilicemos otros efectos como Ambient occlusion, soft shadows y Adjustments. 

Con la AO podemos añadir una sombra en las zonas donde dos objetos están muy cerca. Usa un valor del 10 % y ajusta su radio a 10. Para lograr un aspecto natural en las sombras, el efecto Soft shadows va de maravilla. También obtendrás un gran resultado si lo combinas con las sombras del entorno.

El perfil de color puede marcar una gran diferencia en la escena. Los ajustes de estos parámetros influirán de manera significativa en el aspecto general de la escena. En este sentido, cambia el perfil de color de None a ACES. Dejaremos el contraste y la saturación como están y solo aumentaremos la exposición al 85 %. 

Con todo esto listo, ya podemos centrarnos de lleno en el proceso de modelado, en concreto en las operaciones booleanas. 

2. Modelado 3D

La sección del cuerpo del hervidor consta de solo tres formas: el tubo exterior con el patrón en zigzag, el tubo interior y el cilindro para la parte interna. 

El cuerpo del hervidor con patrón 3D

Primero, vamos a utilizar el objeto tubo seleccionándolo en el menú de la barra de herramientas. Ajusta su radio interior y pon la altura en 155. Usa como guía las coordenadas xyz y los valores de la esquina superior derecha del panel. 

Haz lo mismo con el cilindro. Ajusta su radio para que encaje dentro del radio interior del tubo. Selecciona ambos, aplica el modificador Taper y deja los valores por defecto.

El último componente del cuerpo del hervidor es el patrón en zigzag creado con una resta booleana. Para crearlo, necesitamos un segundo tubo. De nuevo, ajusta la altura, luego el radio y añade un modificador Taper. Añade un cilindro y ajusta su radio. Rótalo un poco para conseguir un ángulo similar. Coloca el cilindro pequeño bajo un modificador Array y establece la cantidad en 24. Si quieres que las líneas de la booleana queden paralelas, añade y ajusta también el modificador Taper en el cilindro pequeño. Nosotros ajustamos la fuerza al 55 %.

La forma principal ya está terminada. Es hora de configurar los materiales. Elige el cilindro central e introduce el valor Hex. Establece la rugosidad (roughness) al 60 % y el metalizado (metalness) al 100 %. Para las partes exteriores del hervidor, añade el valor Hex, establece la rugosidad (roughness) al 60 % y el metalizado (metalness) al 70 %.

El interruptor de plástico

Primero, añade dos cubos, ajusta su tamaño y utiliza un modificador de unión booleana para fusionar ambos. Para hacer un orificio, duplica la forma y muévela al grupo booleano del cuerpo del hervidor; esto restará automáticamente la forma del cuerpo. Duplica el interruptor una vez más, ya que usaremos dos materiales distintos para él. Ajusta la posición del interruptor y modifica ligeramente su tamaño para que encaje en el hueco. Ahora, combina los materiales en uno solo y ajusta la refracción y el grosor. Selecciona la parte interna del interruptor. Para ajustar el material, primero elige un color y luego establece la emisión (emission) en 100 para que brille. Ajusta su posición y escala para encajarlo dentro de la otra forma; parecerá que tiene un plástico transparente a su alrededor.

La tapa del hervidor

Sigue un principio similar al que ya empleamos para el cuerpo. Empieza con un cilindro pequeño que servirá de base. Después, duplícalo y ajusta su tamaño. Añade otro cilindro del que restaremos la forma con ayuda de una resta booleana y el modificador Radial grid.

El asa

Comienza con un cubo de la barra de herramientas. El objetivo es hacerlo lo bastante largo como para poder crear unas esquinas redondeadas y atractivas. Añade otro cubo, ya que tendrá que cruzarse con la primera forma. Cuando te convenza la posición y el resultado, duplícalo y escálalo en el eje Z para añadir un modificador Bevel. De esta forma obtendremos la parte superior e inferior del asa, haciéndola mucho más interesante visualmente. Combina los materiales. Con la herramienta cuentagotas, toma el material del cuerpo del hervidor. Para perfilar los bordes y conseguir ese aspecto redondeado, utiliza la misma técnica que empleamos para la tapa. Añade un cilindro y ajusta su escala y posición. Utiliza un modificador Skew para modificar la forma todavía más. 

Ya casi está. Añade otro cilindro a la escena y ajusta su escala y posición. Ahora añade una resta booleana y, a continuación, un modificador Radial array grid para obtener la forma final. Copia las propiedades del material del cuerpo y ajusta la posición. Sin duda, ya empieza a tener el aspecto que debería.

Pero, antes de añadir cualquier detalle, tenemos que ir al menú del proyecto y poner un nombre adecuado a todos los objetos. Así será mucho más fácil si queremos hacer algún cambio más adelante. Un paso sencillo, pero de gran ayuda a la larga.

Los detalles de marca

Los productos de este tipo suelen tener un logo, así que vamos a añadir uno aquí también. Selecciona «Texto 3D» en el menú. Usamos una fuente por defecto llamada: Open Sans. El valor de grosor es 700 y el espaciado entre letras es de 0,3. Reduce su escala, gíralo y, con el modificador de resta booleana, elimínalo de la parte superior del asa. El modificador booleano actualizado incluye una función de «separar por material», lo que significa que puedes conservar cada uno de los materiales utilizados dentro del grupo booleano. El texto 3D es un buen ejemplo de ello.  Aplícale un modificador de bisel. Mantén bajo el número de segmentos de bisel. Nota: Se recomienda desactivar el bisel al mover el texto 3D. 

La boquilla del hervidor

La última parte es la boquilla del hervidor. Se ha creado a partir de 3 cubos con 2 operaciones booleanas distintas. La forma principal se creó mediante intersección. El orificio se creó mediante resta booleana. Como última modificación de la forma, añadimos modificadores de ahusado y bisel. 

3. Mostrar el diseño en 3D y AR


Añade una cámara para la plataforma giratoria y el límite de visión

Ahora ya podemos lucirlo. Pero, antes de hacerlo, vamos a añadir una cámara a la escena. Controla los ángulos de visión, lo cual es una función muy útil para mostrar diseños en la web. Para ello, centra el objetivo del pivote de la cámara en el hervidor. 

Cuando el diseño esté insertado, la plataforma giratoria rotará la escena automáticamente. Ajusta la duración y el suavizado. Establece el límite de visión de la cámara en la rotación. Esto significa que el ángulo de la cámara estará limitado para el espectador y que el movimiento de la cámara en la plataforma giratoria cambiará de dirección automáticamente al alcanzar un ángulo determinado.

Añade realidad aumentada

Para insertar esta escena en un sitio web y habilitar el visor de realidad aumentada, primero tenemos que añadirla a la escena desde el menú Avanzado. Espera a que se generen todos los modelos. 

Inserta 3D con fondo transparente

Cambia el fondo a transparente. Haz clic en el botón de compartir de la barra de herramientas. Activa «Compartir en la web» y copia el código de inserción. Usa el código copiado en el sitio web donde quieras insertarlo. Para ver el modelo en realidad aumentada, haz clic en el botón AR de la esquina superior derecha. Escanea el código QR con tu móvil y apunta hacia el lugar donde quieras mostrarlo.Y listo. ¿Alguien quiere un té?

¿Todo listo para diseñar e insertar con Vectary?
Empieza a crear