Project dedicated to creating a scene inspired on the Pokemon game using Three.js for our Computer Graphics class
En este proyecto creamos una escena inspirada en el video juego Pokémon GO usando Three.js para nuestra clase de Gráficas Computacionales
- Ari Valenzuela - A01635584
- Carolina Pérez - A01631526
- Nataly Hernández - A01631314
Los archivos principales se encuentran dentro de la carpeta de pikachu-graphics. Implementamos una estructura en la que usamos el programa de Vite como servidor local de desarrollo con la finalidad de evitar problemas al momento de realizar los imports mediante links externos y de los assets 3D importados.
Se entra a la carpeta de pikachu-graphics y se corren los siguientes dos comandos para correr el servidor local de vite y visualizar la escena:
- npm install
- npm run dev
La escena consiste en un área verde donde se encuentra un Pikachu. Al igual que en el juego Pókemon GO se existirá la función de lanzar pokebolas hacia el pokemon para intentar atraparlo, lo que necesitará una perspectiva en primera persona.
Las animaciones principales son:
- Pokebola: La pokebola tiene una pequeña animación en la que se abre y se inclina de un lado a otro.
- Movimiento de Pikachu: Dentro de las animaciones implementadas está Pikachu bailando con movimientos de brazos, torso, piernas y cabeza.
Para este proyecto utilizamos las siguientes tecnologías:
- three.js
- WebGL
- Blender
Los componentes utilizados para esta escena son
- Pikachu
- Pokebola
- Arboles de fondo - assets hechos por el equipo en blender, los archivos originales en blender están en la carpeta llamada blender-assets-originales
- Piso de pasto
- Luz imitando la luz solar a medio día
- Sombras
- Para el modelo de pikachu: https://sketchfab.com/3d-models/pikachu-37c740f674cd4719a1d1d2970bbe8c30
- Para el modelo de la pokebola: https://sketchfab.com/3d-models/pokeball-animated-5ee999d489a843fd95a7eaecb5d3c5a6
- Para entender cómo hacer el cielo: https://stackoverflow.com/questions/32233805/im-new-to-threejs-how-to-create-a-sky-dome
- De dónde obtuvimos la textura del cielo: https://3djungle.net/textures/sky/5931/
- Tutorial usado para crear los árboles en blender: https://www.youtube.com/watch?v=p-9pgZI3inI&t=122s&ab_channel=GrantAbbitt
- Tutorial de conceptos clave de Three.js: https://www.youtube.com/watch?v=YK1Sw_hnm58
- Tutorial para animar los assets importados: https://discourse.threejs.org/t/easiest-way-to-play-skeletal-animation-from-gltf/7792/3
- Documentación de Three.js
Imagenes de referencia
