Proyecto 1

 

Proyecto 1
Al final el resultado no fue lo que se esperaba pero hubo varias complicaciones durante el desarrollo del proyecto.
Primero se tuvo que averiguar bastante para lograr cargar modelos glfl con el complemento de three GLTFLLoader. esto tomo tiempo ya que había modelos que fallaban, no se cargaban correctamente etc.

Implementación

al final se descubrió una pagina muy buena para comprobar el estado de los modelos antes de implementarlos en el código. Además se encontró en la web un libro con ejemplos muy útiles que ayudaron a entender mejor el problema y la solución (https://discoverthreejs.com/).
Pagina para comprobar modelos

Documentación muy buena para aprender, ejemplos en vivo y código bien explicado

También otro inconveniente que surgió fue la de conseguir otra herramienta para hacer todo el proyecto, ya que la herramienta que se estaba usando (JSFiddle) no soportaba la carga de archivos en su plataforma. Literal después de horas de búsqueda y pruebas y errores(paginas que no soportaban el lenguaje, pedían pagos por subir archivos, no eran gratuitas, no eran online etc.) se descubrió repl.it. Repl.it permite muchas mas cosas que JSFIddle y sus herramientas son muy poderosas, por lo tanto para futuros proyectos se seguirá usando.
 


Herramienta muy útil y versátil, lo mejor es que es online

Finalmente en la implementación de las animaciones se crearon mas problemas, resulta que algunas animaciones vienen integradas en los archivos de sketchlab pero el sistema de animación de three es muy complejo (4 clases distintas que hay que manejar para animar correctamente). Por lo tanto se tuvo que leer bastante la documentación, revisar ejemplos y fallar muchas veces para lograr un buen resultado.


Sacando las animaciones del modelo

Creando una animación personalizada, se tuvo que averiguar implementación de rotaciones con cuaternios ya que Euler no esta implementado en los keyframes

Finalmente como se dijo al principio no se logro ni de lejos las expectativas iniciales, ya que la curva de aprendizaje fue sorpresivamente alta en cuanto a sistemas de animaciones y cargas de modelos, aun en mi opinión personal se logro bastantes avances y se aprendió muchísimo en el proceso :)… aun así fue muchísimo mas trabajo del esperado siendo días y días de investigación, análisis y puesta en marcha X_X.

Comentarios

Publicar un comentario

Entradas populares de este blog

Primera escena compleja en Three.js

Imagen
 Quise iniciar con algo ya hecho por lo tanto decidí empezar con una base (la tarea del Transmilenio) Tarea del transmilenio en jsfiddle Decidí solo cambiarle de color las ruedas y unirlo todo en un grupo, los grupos de three.js son muy útiles ya que ayudan a agrupar un elemento complejo(lleno de primitivas pequeñas) en un gran objeto que luego se puede mover. añadiendo elementos al grupo resultado final También coloque un suelo y una iluminación mas acorde al ambiente(buses de trasnmilenio al aire libre) con este comando se puede cambiar el color del fondo Finalmente cree un semaforo y 2 variantes de arboles para crear la sensacion de dinamismo, con los grupos se pueden copiar varios elementos complejos y colocarlos en nuevas posiciones sin tener que copiar todo el codigo de la creacion del objeto, lo cual es muy util en estos escenarios. Varios elementos en una escena Copiando y trasladando grupos Finalmente averiguando me di cuenta de que hay una opción en three para colocar una...
Leer más

Shaders y pipeline en THREE.js

Imagen
 Para este proyecto se buscaron referencias en el documento de three y referencias externas con ejemplos. https://threejsfundamentals.org/threejs/lessons/threejs-post-processing.html https://threejs.org/ Al principio el programa básico no funciono en repl.it que era la herramienta que estaba usando, por lo que me toco otra vez volver a jsfidle. No se sabe porque en una plataforma se ejecuta bien y en la otra falla pero se tiene la teoría de que es por el import por módulos que hace repl.it por debajo lo que no deja ejecutar las librerías necesaria. Lo mas difícil fue encontrar una solución a este problema y hasta ahora no se sabe porque el código no se ejecuta en repl.it. una vez en js fidle se paso a crear una escena simple con un efecto predeterminado de three (glitch) tratando de comprender el proceso interno. Se descubrió después de varias lecturas que THREE como tal no deja tocar el proceso de pipeline de manera manual si no que usa una librería especial llamada "composer...
Leer más