Desarrollo de sitios 3D con Three JS

Demostración de lo que aprenderemos y porque

Creamos el proyecto con vite, explicamos la estructura que tiene por defecto, creamos el renderizado inicial de three js y vemos la importancia que tiene el tipado y como nos facilita la vida para no cometer errores, ademas de obtener un montón de guías que vienen ya desde las librerías que vayamos utilizando.

Trabajando con el objeto GLTFLoader, iluminación y cámara.

Refactorizando un equivalente en programación orientada a objetos

Creando clase Spaseship, viendo como compartir atributos entre estas clases como la escena, para que la clase spaceship pueda agregar el modelo a esta. También veremos como dividir la lógica entre estas clases, con responsabilidades, para tener un código mas ordenado.

Creando la clase encargada de crear las estrellas de forma eficiente

Creando el controlador de la cámara, aplicando un offset gracias a métodos matemáticos, de forma natural.

Documentación de three js aceca de quaternions, alternativa, Euler, redimensionado de pantalla y eventos del objeto window.

Para evitar problemas en futuras implementaciones, crearemos una solución para garantizar solo una instancia de nuestra clase principal.

Implementándolo en angular, no toma mas de unos minutos.

Presentación del proyecto a realizar

Explicando de forma sencilla la estructura del proyecto del cual nos estamos inspirando

dejare imágenes para quienes estudien desde el móvil

deploy a vercel gratis y rapido de un proyecto en next js

configura typescript de forma rapida (en tan solo 2 minutos)

presentación de la sección con una demostración de lo que se lograra

les dejo los comandos de la siguiente clase para que no tengan que escribirlos manualmente <3

Aprenderemos como crear un sitio Next JS desde 0, hasta subirlo a GitHub y después lo desplegaremos en la web

Configuración básica de TypeScript con Next JS

Los estilos globales de css deben ir en un archivo _app.tsx para evitar errores, acá resetearemos los estilos de css de todos los componentes, tanto sus márgenes y paddings por ejemplo, y también agregaremos un estilo para que el canvas que de fijo como un fondo del sitio

Un Skybox o un Skydome es un entorno que simula el cielo mediante una textura en un cubo o una esfera, todas mis clases tienen los recursos correspondientes listos para descargar

Crearemos un componente de clase en React y veremos la idea principal detrás de nuestra futura estructura de código

Veremos herencia, atributos, métodos, como comunicar diferentes objetos y como compartir de forma segura información entre estos y como evitar que ciertos atributos sean accedidos desde fuera de este

Dividiremos nuestro código en objetos fuertemente tipados con typescript y veremos como comunicarlos entre si. También utilizaremos la herencia para extender funcionalidades de objetos que vienen de three js, Probablemente esta clase sea una de las más importantes

Redimensionamiento del canvas con un listener de window, como reducir lineas de código en un objeto

Importaremos el logo de Pokémon en nuestro sitio, para eso necesitamos crear un objeto loader, analizaremos cuando usar herencia

Solución a un problema que puede haber al intentar ingresar a https://www.gstatic.com/draco/versioned/decoders/1.4.3/

Vamos a crear unas secciones para tener algo de contenido por el cual vamos a hacer el scroll de la cámara

Esta clase es interesante, si bien puedes encontrar soluciones similares en internet, te recomiendo tomar la propuesta que plantearemos aquí, calcular el porcentaje de la pantalla en la cual nos encontramos y en base a eso animar nuestra cámara así será mas consistente entre distintos dispositivos

Aprenderás como adaptar tus objetos 3d a diferentes tamaños de pantalla

En esta clase agregaremos el resto de pokemones que nos faltaban, dando mas vida a nuestro entorno

Crearemos nuestro propia función update al estilo de unity, y crearemos nuestras propias animaciones mediante código

Aprenderas a extraer animaciones nativas de los archivos gltf mediante un delta, estas animaciones generalmente son creadeas en blender y pueden llegar a ser muy complejas

estilos css, dejare el archivo para descargar

centrar el scroll a la sección más cercana

estilos personalizados de la barra lateral

aprenderemos a clonar objetos 3d, particularmente la hierba

probablemente una de las ultimas clases de 3d, agregaremos una ultima luz que nos faltaba