Primera escena compleja en Three.js

 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 cámara capaz de moverse con los clicks del usuario en el render final, lo que le da a mi parecer un toque unico a la escena.


Se importa la herramienta

Colocándolo en el render



Codigo en JSFiddle: 1 Proyecto - JSFiddle - Code Playground

Resultado Final

Comentarios

Publicar un comentario

Entradas populares de este blog

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

Proyecto 1

Imagen
  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(pagina...
Leer más