Visualizando varios modelos 3D con un solo marcador – AR.js Realidad aumentada con javascript

Hola aumentados! sean todos bienvenidos a este nuevo videotutorial donde aprenderemos a hacer una aplicación de realidad aumentada (augmented reality tutorial) que nos permitirá visualizar 4 modelos 3D utilizando un solo marcador.

Antes de comenzar y para que tengas una idea clara de lo que veremos en este tutorial, quiero invitarte a que veas los siguientes tutoriales. Así; podrás entender con mayor facilidad algunos de los elementos que utilizaremos aquí.

• TUTORIAL – MODELOS 3D
• TUTORIAL – BOTONES A NUESTRA APLICACION DE AR

¡Recuerda seguirme en YOUTUBE!

CANAL DE YOUTUBE DE REALIDAD AUMENTADA EMPEZANDO DESDE CERO

¡Comencemos con la aplicacion de Realidad Aumentada usando AR.js!

Creamos nuestra entidad y le asignamos un id, en este caso se llamará (entityID1). Recuerda que puedes llamarla como tú quieras. Adicional a esto agregamos nuestro primer modelo 3D que es un gltf, así mismo le asignamos su url correspondiente (model/scene.gltf). cuando realices tu aplicación verifica que la url de tu modelo esta perfecta, pues en mi caso yo tengo el modelo dentro de una carpeta llamada (model) y el modelo 3D se llama (scene.gltf).

<a-entity id="entityID1" gltf-model=”url(model/scene.gltf)” scale=".30 .30 .30">
y este sería el resultado de agregar nuestro modelo gltf.
 
Ahora pasemos a la sección de los botones.
Primero creo el botón y le asigno un id con nombre (btn1).
<button class="button" id="btn1">Model 1</button>
luego paso a crear un script en donde estará el funcionamiento del botón.
document.getElementById("btn1").addEventListener("click", (e)=>{
var el = document.querySelector('#entityID1');
el.setAttribute("obj-model", 'obj:url(TU MODELO3D.obj);mtl:url(TU MODELO3D.mtl)');
el.setAttribute("scale",'.10 .10 .10'); })
y así básicamente ya todo debería de funcionar, te explico que es lo que sucede. Al crearse el botón con un id (btn1) relaciono inmediatamente este botón al script  y cuando este botón reciba un clic va a almacenar mi modelo 3D (obj-model) dentro de mi variable (el) y esta variable es la que hace relación directa con mi entidad (entityID1). De esta manera ya podre ver mi modelo 3D en mi aplicación de realidad aumentada.
Utilice 3 botones en esta aplicación que hacen referencia a 3 modelos y un modelo adicional al inicio de la aplicación. Estos son los ejemplos de cómo se ven.
Ahora pasemos a los consejos para modelos 3D en realidad aumentada.
No realices modelos con millones de polígonos.
Evita crear múltiples texturas para un solo modelo.
Evita crear sombras en tus modelos 3D (texturas) – Agrégalas después con Ar.js
No dividas tu modelo 3D (realiza una sola pieza, no importa que tan complejo sea).
Si quieres entender ver un poco más acerca de este videotutorial y enterarte de todo el código restante y más detalles, te recomiendo que veas el siguiente videotutorial.
DESCARGAR EL CODIGO DEL VIDEOTUTORIAL
¡Recuerda que tu ayuda es muy importante para este blog!