Decir que «el futuro es 3D» está muy bien, pero demostrarlo es mejor. En el artículo anterior hablamos de las herramientas, hoy vamos a mancharnos las manos de código.
A continuación, vas a ver un ejemplo en vivo. No es un vídeo, no es un GIF. Es un objeto tridimensional real renderizado ahora mismo por el procesador de tu dispositivo. Tócalo, gíralo y haz zoom con los dedos o el ratón.
¿Cómo hemos hecho esto?
No hemos usado plugins pesados ni magia negra. Hemos utilizado el estándar web <model-viewer> desarrollado por Google. Es ligero, gratuito y funciona en todos los navegadores modernos.
El Código (Cópialo para tu web)
Si quieres replicar esto, solo necesitas dos pasos:
1. Cargar el Motor (Script)
Debes añadir este script en la cabecera de tu web (o usando un plugin de Snippets, que es lo que recomendamos en Nuevos Medios para no tocar el tema):
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
2. Insertar el Objeto (HTML)
Donde quieras que aparezca el modelo 3D, pega este código.
Importante: Para que funcione en iPhone, necesitas el archivo .usdz además del .glb.
<model-viewer
src="archivo.glb"
ios-src="archivo.usdz"
ar
ar-modes="scene-viewer webxr quick-look"
camera-controls
auto-rotate
style="width: 100%; height: 400px;">
</model-viewer>
El truco de la Realidad Aumentada (AR)
Si estás viendo esto desde un iPhone o un Android moderno, verás un botón azul abajo a la derecha («Ver en tu espacio»).
Al pulsarlo, la cámara se activará y podrás colocar al astronauta en tu escritorio. Esto es lo que llamamos WebAR: Realidad Aumentada sin instalar Apps. Es la tecnología que está revolucionando las fichas de producto en eCommerce, permitiendo «probar antes de comprar» digitalmente.
¿Te gustaría implementar un catálogo interactivo o una experiencia inmersiva en tu negocio? Hablemos de tu proyecto 3D.
