desplegando un modelo 3d con three.js

Desplegando un modelo 3D con Three.js en Angular

Bueno, quizá hoy diré que fue un gran día en mi día a día intentando ser programador ya que por fin pude desplegar mi modelo 3D que realice usando three.js, MagicaCSG y Blender en una aplicación angular.

Contexto

Siempre me ha gustado el diseño web UI/UX, ya que es el primer contacto que tienen las personas al usar internet con el mundo digital. He estado intentando aprender a usar una librería muy popular de javascript llamada three.js que te permite desplegar modelos animados en un navegador web (e incluso juegos). Yo, como alguien que siempre está en búsqueda de aprender nuevas cosas por su cuenta (ya que es la mejor forma de ahorrar algo de dinero también :P) me propuse dominarla, solo que como siempre pasa en este mundo, en algún punto del aprendizaje me atoré y he aquí el largo camino que a veces uno tiene que recorrer para encontrar UNA sola respuesta en el vasto universo de la programación. 

El punto fue que, después de ver tutoriales y con la confianza en uno mismo comencé a intentar implementar el despliegue de mi modelo 3D después de horas y noches de esfuerzo modelándolo e ideándolo para que quedara bonito en la aplicación Angular y después… NADA.

No entendía que estaba haciendo mal hasta el día de hoy, 15 caracteres me separaban de mi “grandiosa” idea para poder mostrarlo y aquí esta el resultado:

Modelo 3D con Three.js

Technical language

Al usar blender, puedes exportar tu modelo 3D a archivos con la extensión “.gltf” que es el estándar para modelos y escenas tridimensionales, pero además puedes exportar a archivos .bin o .png y en efecto, yo había exportado 3 archivos (hijos) desde blender con estos tipos de extensiones.

El asunto es que al programar la escena para desplegar el modelo 3D estaba utilizando un método llamado “children” que utilizaba mi variable de la escena y no es otra cosa más que una matriz con los hijos del objeto y yo no estaba llamando a todos los hijos. Así que con solo comentar este método (o borrarlo de la compilación) automáticamente llamó a todos y pude desplegarlo además de que se viera coqueto:

Three.js

Conclusión

Después de todo este rollo de estar probando y jugando con el código para darme cuenta de que hacía mal hubo una sola cosa que siempre me movió a lograrlo: La fe.

Desde niño siempre se me inculcó la fe (incluso divina), pero desde hace algunos años me doy cuenta de que la puedes aplicar en cualquier ámbito de tu vida, no forzosamente tiene que ser con la divinidad, pero desde el día uno que tuve el enredo con este pedazo de código supe que en algún punto lo iba a resolver, lo único que tenía que hacer era seguir y seguir, para que la suerte y el trabajo se encontrarán (como dicen cuando se intenta definir que es la suerte), incluso aunque a veces no supiera que estaba pasando.

Mi consejo es que siempre que tengas un problema con la programación pienses que lo vas a resolver, no importa que tan difícil sea, al final, ese problema no será para toda tú vida y sino lo resuelves tú, alguien más lo hará.

Por cierto, no olvides pasarte por mis demás artículos y darle like a la página de Facebook.

¡Hasta la próxima!

One comment

Leave a Reply