En este articulo quiero mostrarte como visualizar elementos 3d en tu sitio web de una forma muy simple.

Tengo un video al respecto, si te interesa podes verlo, y si no también voy a ir a paso a paso en este articulo.

https://www.youtube.com/watch?v=mSB2scT6fTY

Vamos con el paso a paso:

1. Cómo conseguir un modelo 3d para tu web

La internet esta llena de modelos 3d para descargar de forma gratuita o de pago. Un lugar muy conocido es sketchfab

yo encontré un dragon 3D muy bueno y me lo pude descargar de forma gratuita (agradecimientos al creador del modelo en el video)

Te recomiendo descargar con el formato en formato .gltf o .glb

Si descargas .glb se te va a descargar directamente un archivo con la extensión .glb. En cambio con .gltf se te va a descargar una carpeta con varios archivos dentro, hay que descomprimirla. Si bien el importante es es el scene.gltf no elimines ningún archivo, dependen uno de otro y esta bien dejarlos dentro de la carpeta.

Una vez que tenes tu modelo 3D vamos al paso dos:

2. Cómo insertar un modelo 3D en el HTML

No existe por default una etiqueta HTML que pueda cargar elementos 3D en la web, sería un sueño, pero lo bueno es que google se encargo de solucionar esto creando una poderosa etiqueta web llamada model-viewer

¿Qué es model-viewer?

<model-viewer> Es un componente web que te permite incrustar modelos 3D directamente en tu HTML sin necesidad de librerías como Three.js. Es compatible con los principales navegadores modernos y soporta formatos como .glb y .gltf.

Como dice la documentación en la pagina de model-viewer hay que importarse el script con el componente model viewer y luego de ello ya se puede usar <model-viewer> como cualquier otro elemento de HTML.

Hay que tener en cuenta que como estamos trabajando sin ningun framework, solo con un poco de HTML. Entonces tenemos que visualizar nuestro proyecto levantando un servidor, sin un servidor esto no funciona. La extension live server es mas que suficiente.

Entoces:

3. Insertar el modelo 3D en el HTML con model-viewer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!-- Use it like any other HTML element -->
    <model-viewer
    src="shenron_dragon_ball/scene.gltf"
    alt="avatar"
    shadow-intensity="1"
    camera-controls
     >
    </model-viewer>

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
</body>
</html>

El elemento <model-viewer> tiene varios atributos y propiedades que se pueden utilizar. Se pueden encontrar dentro del apartado de API REFERENCE de la documentación.

Pero los mas elementales para agregar casi de forma obligatoria son los siguientes

src Para poner la ruta de nuestro archivo 3d, si descargaste glb sera simplemente el archivo. Si descargaste gltf entonces la ruta sera a la carpeta descargada y dentro de ella al archivo scene.gltf

Hay que tener mucho cuidado de no fallar con la ruta del archivo 😅

shadow-intensity Es quien controla la opacidad de la sombra del modelo 3d, si por ejemplo dejaras el valor en 0, debería desactivar la sombra por completo.

camara-controls Le permiten al usuario mover y controlar al modelo 3d

Pero hay muchos otros que te van a encantar si te da ganas de probarlos :) búscalos aca: API REFERENCE

También al model-viewer se le pueden aplicar estilos sin problemas, a modo de ejemplo:

<style>
   model-viewer {
       width: 100vw;
       height: 100vh;
   }
</style>

Comentarios finales

Queda marcar que model-viewer es compatible con las últimas versiones principales de todos los navegadores.

Los únicos limites están en si lo queres utilizar en modelos de realidad aumentada especialmente con los navegadores safari y mozilla. Pero con 3D todo funciona de maravilla!

Eso es todo y muchas gracias!

Saludos, Pablo

Cómo integrar modelos 3D en tu sitio web utilizando sólo HTML y CSS