DEV Community: Jaimebboyjt

¿Como es ser un mantenedor Open Source?

Jaimebboyjt — Wed, 27 Mar 2024 17:55:48 +0000

Si estás leyendo esto, probablemente, tengas curiosidad de convertirte en uno, hacer contribuciones al open source o solo leer de que se trata esto, espero ayudarte un poco con este post.😊

Un repaso breve de como me convertí en mantenedor Open Source🧐

Primero que nada soy mantenedor de una librería de Vue para realizar experiencias 3D, Y es aquí donde dos cosas muy importantes se unen las pasiones.

Me encanta programar y diseñar, descubrí el 3D con JS usando ThreeJs por allá por el 2021. En ese entonces (y como mucho) existía una librería muy buena para realizar estas experiencias sin usar vanilla JS llamada React-Three/Fiber. Pero la verdad nunca me sentí cómodo usando react 🚫.

No había nada para Vue, (había una solución, pero no era muy buena). Además, me había llamado la atención realizar contribuciones al Open Source, pero simplemente no había encontrado ningún paquete, o simplemente tenía desconfianza de hacer PRs a grandes repos.

En noviembre del 2023. Aparece Alvaro Saburido y crea TresJs. Lo vi por twitter, me llamo la atención, le escribí y me uní al proyecto, poco a poco empecé a empaparme del código y hacer contribuciones cada vez mayores.

Entonces (para ese momento los repos estaban en privado, tú no sabes si una librería va a gustar o no) Realizamos él anunció oficial y para sorpresa, la librería gusto mucho, siendo reconocida por grandes personajes del ecosistema de Vue como Evan You, Eduardo, Patak, etc.

Ya para aproximadamente febrero de 2024 Alvaro consulta por posibles mantenedores, acepte el desafío y acá estamos una librería con más de 1K en github con menos de un año de desarrollo :)

Lo mejor de ser mantenedor👌

Entre lo mejor yo destacaría

Aprendizaje 🎓

No solo tiene la oportunidad de desarrollar código a nivel mundial, sino de crecer muchísimo profesionalmente, diariamente me encuentro trabajando con personas de un muy alto nivel.

Entendiendo como funciona una librería de manera interna, te abre muchas puertas, no solo entras a entender el porqué una librería se comporta de cierta manera, sino que aumenta tu confianza como desarrollador.

Comunidad 🤝

La comunidad es definitivamente una de las mejores cosas, hablas con muchas personas, 95% de ellas dispuestas a ayudar, responderte, o guiarte.

Te permite ayudar/guiar a otros miembros de la comunidad, ya sabes lo que dicen: si quieres mejorar, explícalo.

Trabajo... trabajo... 👩‍💻

Bueno, esto puede que no suene tan genial, pero es trabajo en tu tiempo libre, lo que implica que si no te sientes bien, tienes un evento importante, simplemente avisas y listo. Nadie va a "no pagarte" por alejarte del proyecto un tiempo.

Te proporciona un curriculum mejor posicionado que la mayoría. Para cualquier software engineer, incluso si no sabe nada de tu proyecto, puede entender y apreciar el trabajo Open Source.

Puedes ganar algo extra por donaciones, sinceramente esto no se hace por dinero, si ese es tu goal, te recomiendo emprender o buscar un mejor trabajo. Pero que alguien te dedique una cuota es un gran agradecimiento por las contribuciones realizadas

Lo que no es tan bueno 🤨

De partida, ya tu foco principal cambia, y contribuyes al proyecto de forma diferente al bienestar del proyecto (organización de código, limpieza, discusiones, resolución de bugs, mejoras, DX, etc).

Si quieres que tu proyecto de OSS crezca y sea usado, conseguir contribuidores requiere bastante trabajo de marketing, planificación (incluye charlas, posts, RRSS, etc).

Reviews 🔍

Gran parte es realizar reviews a los contribuidores, y muy personalmente no me gusta mucho hacer reviews de otros códigos porque siento que es casi como "criticar" (ojo es un tema totalmente personal, sé que no es una crítica destructiva ni nada, pero hay un sentimiento que no termina de gustarme)

Responsabilidades, ¿Realmente que se hace? 📚

Entre las tareas está. Ayudar a la comunidad, por cualquier medio, Discord, Twitter, GitHub, foros, etc.
Resolver y encontrar bugs
Reviews de los contribuidores
Guiar e incentivar a los contribuidores
Buscar formas de mejorar la DX(developer experience).
Hacer anuncios de las nuevas versiones (marketing).
Definir junto al resto del equipo (si es un proyecto un poco más grande) el roadmap.

Algunos tips personales sobre como contribuir al Open Source 📝

Buscar un proyecto que te guste y que uses a menudo, que esté en constante mantenimiento, y que esté buscando contribuidores
Buscar en la lista de issues, aquellos con "first good issue" o labels similares. Recuerda que puedes contribuir con traducciones, arreglando gramática, etc. No solo con código.
Revisa la documentación del proyecto, como realizar commits, o levantar el proyecto.
Pide ayuda, la gran mayoría de proyectos va a ayudarte y guiarte porque quieren que contribuyas al proyecto.
Recuerda que tu commit no debe ser perfecto, no te estreses y no olvides que las contribuciones son en tu tiempo libre, por amor, y para aprender.

Conclusión

Ser contribuidor es algo maravilloso y lo recomendaría a cualquiera. Me ha traído muchas alegrías y mucho crecimiento personal, además he hecho amigos y ayudado a mucha gente.

Nuestro proyecto:

https://tresjs.org/

TresJs por una web con más 3D

Jaimebboyjt — Wed, 28 Feb 2024 17:57:58 +0000

Hace algunas semanas publiqué algunos artículos sobre como empezar a desarrollar páginas web en 3D usando ThreeJs.

Puedes leer el primer capítulo de la serie acá.

También mencioné las distintas capas de abstracción al rededor de WebGL (próximamente WebGPU).

Normalmente, no recomendaría ir de lleno a la última capa sin antes conocer un poco de lo básico ThreeJs. Pero también entiendo que gestionar todo de manera manual para empezar con un cubo girando consume bastante tiempo.

Es por eso que existe una capa a nivel de frameworks que facilita MUCHÍSIMO el trabajo, abstrae mucho de los conceptos, elimina boilerplate y te permite usar todas las ventajas de tus frameworks favoritos. Últimamente, he notado que muchos de los nuevos usuarios no tienen experiencia previa con Threejs lo cual no es lo mejor, pero igual funciona (imagina aprender react sin saber javascript).

También mencioné que soy mantenedor de una de ellas TresJs que es básicamente la alternativa por default para crear experiencias 3D con VueJs. Con poco más de un año, Tresjs Core ya cuenta con más de 1k de estrellas en GitHub y poco más de 2k en todo su ecosistema.

# TresJs vs ThreeJs 🥊

Veamos una comparación de códigos

Como ven, TresJs es indudablemente mucho más fácil y rápido de escribir, eso es porque nos concentramos mucho en la DX (developer experience).

Podemos notar que para nuestra "hello world" (nuestro cubo verde girando) solo tenemos que instancia algunos componentes y listo.

Además, y muy importante TODO lo que puedes hacer con ThreeJs lo puedes hacer con TresJs

Gran documentación 📝

La verdad no los molestaré con el paso a paso en este post, porque básicamente sería repetir lo que la documentación oficial ya explica. Tu primera escena

NOTA: La documentación también cuenta con la traducción al español y mucho más están en proceso.

Contamos también con una sección de cookbook (libro de recetas) en donde enseñamos como realizar algunas de las operaciones básicas, como agregar sombra, usar shaders, aplicar texturas, etc. Una sección de Showcase donde encontrarás ejemplos un poco más elaborados. Y por último un playground, para probar TresJs sin instalar nada en tu PC

Somos 100% open source, por lo que todo es transparente, puedes entrar a nuestro GitHub, revisar y tomar el código que desees, así como ver, trabajar y proponer nuevas features.

Por último, contamos con servidor en discord dedicado para resolver dudas, estar atento a las últimas actualizaciones y compartir con la comunidad 🤝

Ecosistema 🌱

Incluso con toda la gran capa de abstracción que nos provee TresJs. Aún podemos extender y rehusar más código. Es por eso que TresJs no es un solo paquete, es un ECOSISTEMA completo, por eso tenemos otras librerías que funcionan para extender funcionalidades específicas a TresJs.

Cientos: Conjunto de abstracciones superútiles para TresJs.

Nuxt: Módulo para Nuxt, provee ventajas como autoimport y CSR de manera automatica.

DevTool:

Post-processing: Para agregar post-processing o efectos de post procesado a tus experiencias de manera fácil y sencilla (bajo desarrollo).

Leches: Módulo para realizar tweaks, ajustes y monitorear tu experiencia 3D creado con sintonía para Tresjs.

Proximamente (Rappier (para agregar fisicas) y ar/xr)

Más alternativas 🤔

Por último, mencionar que TresJs es la alternativa que está disponible para VueJs. Pero también existen para otros frameworks de front-end. Por ejemplo:

React-Three: Alternativa para React, cuenta con el mayor ecosistema de todas
ThreeVelte: Alternativa para svelte con muy buena aceptación por parte del público.
AngularThree: Alternativa para Angular.

Algunos links que podrían interesarte 🔍

Inspiración 🌈

https://ohzi.io/
https://backstage.bonjovi.com/
https://lr.doesbook.kr/en/
https://www.brettwilliams.net/WebXR

Recursos 📦

https://www.youtube.com/@AlvaroDevLabs
https://www.youtube.com/@BrunoSimon
https://www.youtube.com/@WaelYasmina
https://www.youtube.com/@WawaSensei

Saludos y Happy 3D coding 💚

Programación 3D con JavaScript - parte 3

Jaimebboyjt — Mon, 25 Dec 2023 18:55:02 +0000

Segunda parte

Mesh 🔮

Bien, continuaremos donde nos quedamos, en nuestra pantalla negra y añadiremos un Mesh (una malla), Los mesh u objetos 3D se componen de una geometría y un material

Geometría 🌐

En pocas palabras es la forma que tomara nuestro objeto, esto lo hace colocando de manera precisa puntos en nuestro espacio 3D (vértices) y rellenando el espacio con una "cara" o face. Para crear nuestro cubo, lo hacemos de la siguiente forma.

const geometry = new THREE.BoxGeometry();
Las dimensiones por defectos serán de 1,1,1 (uno de ancho, uno de alto y uno de profundidad)

Materiales 🧱

Puedes pensar en ellos tal cual el mundo real, como una "piel". Algunos pueden ser translúcidos, metálicos, simples colores, sombras, etc. El material lo creamos así

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

Una vez nuestra geometría y material creados, creemos nuestro mesh y añadámoslo a nuestra escena.

...
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
console.log("cube", cube);
scene.add(cube);
...

Podemos ver en nuestra consola que hemos creado exitosamente nuestro cubo, pero, ¿por qué no se ve?

Vectores 📐

Simple lo que sucede es que nuestra cámara, y nuestro mesh están en la posición inicial, el punto 0,0,0. En threeJs la posición inicial es el centro de nuestra escena.

Podemos mover nuestra cámara para atrás, o nuestro cubo da igual. Movamos la cámara. Justo después de iniciar nuestra cámara añadamos esta línea.

camera.position.z = 5;

Pero... ¿Qué significa ese 5? ¿Metros? ¿Centímetros? ¿y porque vemos un cuadrado en lugar de un cubo?

Al igual que como sucede con los SVG, threeJs manea Unidades y depende de nosotros tratarlas como tal, por lo que estamos diciendo es que mueva la cámara 5 "unidades" de manera positiva en el eje Z.

Todos los objetos heredados de la clase isObject3D contienen propiedades como position, rotation, scale. Estas propiedades esperan un Vector3, que puedes pensar en ellos como en un array con 3 valores. El orden inicial de los ejes X, Y, Z. y funcionan muy usando el plano cartesiano

Podríamos mover nuestro Mesh de la siguiente forma. (solo ejemplo)

cube.position.x = -1 // podemos usar el eje x en negativo
cube.position.y = 3+3 // podemos realizar operaciones matematicas

ThreeJs también nos provee del metodo set() que espera un vector3

cube.position.set(-1, 3+3, 0)
// o tambien
const myCubePosition = new THREE.Vector3(-1, 3+3, 0)
cube.position.set(...myCubePosition)

También existen Vector2 y Vector4 (si no es broma hay 4 dimensiones, pero no te preocupes, no las veremos en este post y no es tan difícil de entender)

Con respecto a la última pregunta, en realidad es un cubo, solo que lo estamos visualizando perfectamente alineado, si deseas puedes probar subiendo la cámara una unidad en el eje Y

Request animation frame 💥

El último detalle que vamos a ver, es la animación.

Y para esto hacemos uso de otra API que los navegadores nos proveen, el Request animation API. En palabras muy cortas, es una API que se creó específicamente para crear animaciones, se ejecuta cada frame por segundo (FPS) y viene con un montón de beneficios para el rendimiento.

Básicamente, vamos a renderizar nuestra escena cada FPS y aplicar un leve cambio (girar el cubo) y esto lo hacemos mediante una función recursiva.

function loop() {
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  requestAnimationFrame(animated);
  renderer.render(scene, camera);
}
loop();

Dato curioso: no hay un estándar para el nombre de esta función, algunos la llaman RAF, otros animated, otros loop e incluso tick

Y así hemos terminado de diseccionar por completo todos los componentes que contienen las escenas 3D con threeJS (y casi cualquier otro motor de gráficos 3D 😮 )

Puedes ver el ejemplo aquí

¿Dónde continuar ahora?

Sé lo que estás pensando... tan largo el post, ¿solo para crear un cubo verde girando? Pasos pequeños llegan a grandes resultados, afortunadamente hay muchos recursos online sobre este tema, hay mucha gente creado cursos y videos.

Todas las increíbles páginas que viste al principio fueron creadas usando como base estos métodos. ThreeJS es tan grande que contiene muchas funciones que aún no están documentadas 🤯. Y constantemente se crean más.

Este es un área del código altamente creativa y reconfortante, y por experiencia propia puedo decir que la comunidad es muy amigable y dispuesta a ayudar.

Así que si alguna vez te llamo la atención, crear juegos u objetos 3D o si eres una persona creativa que está buscando un nuevo desafío, esto puede ser para ti.

Algunos links de interés:

También dejaré mi twitter (X) por acá, por si tienes alguna consulta estaré más que feliz de ayudar

Hasta luego y happy 3D Coding 🤓

Programación 3D con JavaScript - parte 2

Jaimebboyjt — Fri, 15 Dec 2023 14:17:04 +0000

Primera parte

Configurando nuestro entorno 🤓

Bien, lo primero que vamos a hacer es configurar nuestro entorno de trabajo, no importa que editor uses, necesitaremos un archivo HTML como punto de entrada. Luego darle un margin:0 de estilo al body. Por último importaremos un script que contendrá nuestro archivo JS.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module" src="/main.js"></script>
    </body>
</html>

Sip, eso es todo el HTML y CSS que necesitaremos 😮.

Bien, ahora depende de donde y como estés trabajando, puedes instalar ThreeJS o por CDN o por npm packages. Guía de instalacion

Elementos indispensables de toda escena 3D

Son 5 y veremos uno por uno, la idea es entender bien la función de cada uno, en lugar de solo copiar y pegar (si copias el código de Creating-a-scene de threejs ya tienes el famoso verde cubo girando, pero así ni una gracia).

Scene 🖼️: Contenedor de nuestras instancias
Camera 🎥: Actuará como nuestros ojos en la escena
Renderer 🔩: Motor de renderizado.
Mesh 🔮: Objecto 3D, algo que mostrar
Request animation frame API 💥: Para animar nuestras escenas

Scene 🖼️

El elemento Scene, va a servir como nuestro contenedor, en él van a vivir todos nuestros elementos, sean luces, cámaras, modelos 3D, etc.

Para crearlo solo debemos importarlo de ThreeJs e instanciarlo de la siguiente forma:

import * as THREE from 'three';

const scene = new THREE.Scene();
console.log('scene', scene)

Nota: acá estamos importando todo como THREE, para mayor flexibilidad. Esto no tiene muy buen rendimiento pero es cómodo. Si quisiéramos pudiéramos importar Scene como:
import { Scene } from 'three'

Si prestamos atención a nuestro log veremos algo como:

Algo muy útil acerca de ThreeJs es que la gran mayoría de objetos heredan de la clase Object3D. Esto significa que muchas propiedades, serán compartidas en otras instancias.

Por ejemplo, una buena práctica es asignarles nombres a nuestro objeto y luego es fácil recorrer toda la escena en busca de él.

Algo particular para prestar atención es nuestra propiedad children 👶, allí veremos todos los objetos 3D que forman parte de nuestra escena.

Camera 🎥

Existen varios tipos de cámaras y para verlas todas en profundidad necesitaríamos un post completo 🙅‍♂️. Por ahora empezaremos usando la PerspectiveCamera Es la más fácil de entender por qué simula el ojo humano (los objetos más alejados se ven más pequeños).

Para la PerspectiveCamera necesitaremos proporcionar unos parámetros, la gran mayoría serán por ahora estándar, pero veamos que son:

fov: field of view, campo de visión. Me parece que con una imagen se expresa mejor este parámetro.

aspect-ratio: en nuestro caso tomaremos el aspect-ratio de nuestro viewport, que no es más que dividir nuestro window.innerWidth / window.innerHeight
near: Que tan cerca de nosotros la cámara renderizará
far: Que tan lejos nuestra la cámara renderizará

// trabajar con un objecto sizes resulta muy comodo
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
};

const camera = new THREE.PerspectiveCamera(
  45,
  sizes.width / sizes.height,
  1,
  1000
);
console.log('camera', camera)

Algo importante a tener en cuenta es que "si la cámara no lo renderiza, no consume recursos"

Ahora y como último detalle, recordemos añadir nuestra cámara a nuestra escena con la función scene.add():

...
scene.add(camera);

Renderer 🔩

Nuestro renderer es el puente entre la WebGL API y ThreeJS, básicamente es el motor que da vida a nuestros increíbles gráficos.

ThreeJs provee varios renderers, nosotros en esta ocasión usaremos el WebGLRenderer, lo instanciamos de la siguiente forma:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
document.body.appendChild(renderer.domElement);
renderer.setClearColor("#111");
renderer.render(scene, camera);

Entonces veamos paso a paso:

Instanciamos nuestro WebGLRenderer desde threeJs
Indicamos el tamaño que tendrá nuestra escena
Acá podemos proporcionarle un elemento HTMLcanvas personalizado o cuando no hemos creado uno manualmente(como es nuestro caso) ThreeJs creará uno automáticamente y vivirá dentro de renderer.domElement Entonces lo que hacemos es colocarlo en nuestro body.
Como detalle opcional (y muchas veces útil), colocaremos el fondo de la escena, un negro menos intenso
Y el último paso es llamar a la función render que recibe como parámetros la escena y la cámara anteriormente creados

Si todo ha salido de manera correcta, veremos que nuestra pantalla está negra, esto es una buena señal, significa que tenemos una escena con threeJs corriendo exitosamente :).

Obviamente, no tiene nada que mostrar aún, pero cambiaremos esto y otros detalles en nuestro siguiente post

Happy 3D coding 😊

Tercera parte

Programación 3D con JavaScript - parte 1

Jaimebboyjt — Thu, 07 Dec 2023 17:42:37 +0000

¿Alguna vez te has preguntado como se crean sitios web como los que encuentras en awwwards cssdesignawards u orpetron?

¿Estará esto hecho con JavaScript? bruno-simon, doesbook o brettwilliams.

¿Sabías que podemos programar (enviar secuencias de instrucciones) directamente a nuestra GPU, con JavaScript?

En esta serie de post vamos a entender los elementos que componen estas maravillosas escenas, como y de que están hechas, y terminaremos con el equivalente al "hello word"

Lo sé, lo sé un cubo verde girando, no se ve particularmente útil... Pero después de construir este cubo tan básico, te darás cuenta de que la programación 3D no es ingeniería nuclear de la nasa (no tengo idea siquiera si eso existe, pero no será tan difícil). Ver codigo

Un poco de historia 📃

Antes de saltar al código primero entendamos un poco que es lo que hace todo esto posible.

WebGL API aparece alrededor del 2007 como una solución a los múltiples plug-ins y la falta de estándares, para crear experiencias 2D y 3D en los navegadores de manera nativa usando OpenGL como base.

OpenGL es una API usada en diferentes plataformas, mantenida por el grupo Khronos y compite con otras API como Direct3D de Microsoft (importante destacar que OpenGL no es la única opción disponible)

WebGL se introduce en los navegadores con la capacidad de usar los Shaders. Los Shaders que son básicamente dos: Fragment-shaders y Vertex-Shaders (No vamos a entrar en este tópico ahora). Estos son escritos en un lenguaje llamado GLSL y básicamente nos permiten programar en nuestra GPU. GLSL no es JavaScript, se parece más a C; Es multiplataforma y lo podemos usar en nuestros navegadores.

Ahora programar en WebGL directo, aunque posible, resulta increíblemente laborioso, ya que debemos especificar todo de manera muy manual, por ejemplo luces, sombras, coordenadas en el espacio...

ThreeJs

Es aquí donde aparece threejs para salvarnos, realizando abstracciones sumamente útiles, y se establece como librería estándar para la creación de experiencias 3D en el ecosistema de JS.

ThreeJs aparece por el 2010, es open source y es un repositorio sumamente activo, en su página principal pueden ver muchos más ejemplos creativos, cuenta con una documentación muy buena en varios idiomas y muchísimos ejemplos, además también podemos crear experiencias de realidad virtual y realidad aumentada, con él.

Existe mucho contenido y recursos alrededor, uno de los más famosos es el curso Threejs-journey Recomendado para todos los que quieran adentrarse más en este mundo de los creative-developers🎨. El único detalle es que la mayor parte de todos los contenidos está en inglés.

Yo mismo tengo un curso en español 🎓, lo puedes encontrar acá: Curso. Donde explico las bases. (post-data: no gano ningún dinero extra si compran el curso).

React-Three-fiber, TresJs, AngularThree, threlte

Se ha popularizado una capa superior en torno a ThreeJS que facilita todavía más el desarrollo de estas experiencias, eliminando el código duplicado y trayendo todo el poder de tus frameworks favoritos. React-Three-Fiber fue la primera y declara los componentes de ThreeJs de forma declarativa y permite separa fácilmente las instancias por componentes. El resto de librerías sigue la misma filosofía

Yo mismo soy mantenedor de TresJs que es la opción por defecto para VueJs

Ahora, aunque recomiendo mucho usar estas librerías, para experiencias más complejas, al final todas ellas usan ThreeJs como base, lo que significa que altamente es recomendable, conocer como funciona ThreeJs antes de entrar a trabajar con cualquiera de ellas.

¿Qué viene para el futuro🔮?

Como mencione anteriormente, WebGL ya tiene bastante tiempo rondando, y a pesar de todo viene con algunos problemas que son virtualmente imposibles de solucionar sin breaking changes. Por eso, en mayo del 2022 fue liberado al público un trabajo de años, la nueva WebGPU API. Que promete mejores rendimientos, mejor manejo de la memoria, mejor manejo de errores, y un sin fin de beneficios. Por ahora, "dic/2023" solo está disponible para Chrome.

La buena noticia: No tendremos que adaptar casi nada de nuestro código o aprender un lenguaje nuevo 🥳, ThreeJs ya está trabajando en una migración responsable, y aunque la definición de los shaders cambia un poco, ThreeJs está trabajando, en fallbacks para manejar estos casos.

Uff, suficiente con la teoría 😓... En los siguientes post empezaremos con el código ¡Yes! 🤓, y los elementos básicos de todas las escenas.

Segunda parte

Vue + threeJs, importando modelos

Jaimebboyjt — Mon, 13 Feb 2023 14:59:06 +0000

Hola, Este es el tercer post de Vuejs+ threeJS

Si no has visto el primer post donde creamos un template te lo recomiendo, usaremos ese template como base para este post

Esta vez añadiremos un modelo 3D.

Puedes descargar modelos 3D desde alguno de estos sitios:

Nota: Como consideración importante, el peso del modelo es importante recuerda que el usuario lo va a tener q descargar desde su navegador, por lo que siempre modelos low Poly son recomendados, o optimizados para web

Yo elegiré este modelo link y el resultado final es este:

Formatos:

Existe una amplia variedad de formatos, incluso puedes crear uno nuevo.Entre los más comunes nos encontramos con:

OBJ
GLTF
glb (mi favorito personal)
3DS (uno de los favoritos del maestro Bruno Simon)
FBX
Draco

ThreeJs viene con loaders para algunos de ellos, aunque no vienen importados en el “three” y tenemos que acceder al node_modules directamente para usarlos (esto se corregirá en futuras versiones de ThreeJs).

A codear

Importamos y probamos el loader

Lo primero será descargar un modelo, yo para este ejemplo descargar un modelo low poli de https://poly.pizza/m/iltq5bVNaV. en formato glb que además tiene una animación (la usaremos en un futuro post)

Ya conociendo el formato, podemos crear un composable, para rehusar lógica. Crearemos un nuevo archivo composables/useGltf

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// desconozco el motivo porque los loaders se encuentran dentro de examples
// en caso que tu modelo sea otro formato aca examples/jsm/loaders/ puedes revisar los loaders disponibles

export const useGltfModel = () => {
  const loader = new GLTFLoader();
    console.log(loader)
  return;
};

// para testear la función coloquemos en el onMouted
// además añadamos async al ciclo de vida

Luego importamos la función en nuestro App.vue y certificamos que tengamos un log en la consola

onMounted(async () => { // añadimos el async al mounted
...
 await useGltfModel();
...

Ahora subamos nuestro modelo, a nuestros assets, (si estás usando vite, te recomiendo subirlo dentro de la carpeta public, la importación es más fácil) usemos la función loadAsync
que recibirá la ruta a nuestro modelo (el path). Además transformemos nuestra función en una promesa

export const useGltfModel = async () => {
  const loader = new GLTFLoader();
  const _model = await loader.loadAsync("MODEL_PATH");
  return _model.scene;
};

Y si todo ha ido bien podemos hacer un console.log en el mounted

Lo que yo recomiendo es crear un container de modelos, inicializarlos fuera y así tenerlos accesibles en nuestro App.vue

const modelContainer = {
  rat: null,
};
...
onMounted(async () => {
...
modelContainer.rat = await useGltfModel();
console.log(modelContainer);
...

Añadir el modelo

Normalmente los modelos que son exportados en otros software más robustos como blender exportan un objeto que contiene varias propiedades como scene, scenes, animations etc. Para añadirlo a la escena normalmente necesitamos el .scene

Para añadir el modelo una forma es pasarle la escena directamente a la función y hacer el scene.add(_model.scene). Mientras hacemos este pequeño cambio añadamos otros parámetro que sea el path así nuestro useGltfModel quedará reutilizable.

export const useGltfModel = async (path, scene) => {
  const loader = new GLTFLoader();
  const _model = await loader.loadAsync(path);
  scene.add(_model.scene);
  return _model;
};

Con todo correcto debiésemos poder ver nuestro modelo completamente negro, si has llegado hasta aca sin remover el cubo del template podrás fijarte.

Lo que sucede es que los modelos trabajan con PRB (Phisical Based Rendering) y usan materiales como MeshStandardMaterial que reaccionan a la luz. Necesitamos agregar luz a nuestra escena para poder apreciar nuestro modelo.

Añadiendo luz

Para tener más control creemos un archivo separado, lights.js y colocaremos nuestras luces allí.

Nota: Al igual que las sombras las luces y sus tipos pueden impactar en tu rendimiento úsalas sabiamente (explicaremos más en un capítulo de performance tips)

Al igual que como en muchos objetos que nos proporciona threeJs existen muchos tipos de luces, dedicaremos un post entero a explicar como funcionan, por ahora vamos a añadir una simple directionalLight, que básicamente simula un sol y siempre apunta al centro de la escena.

import { DirectionalLight } from "three";

export const initDirectionalLight = (scene) => {
  const directionalLight = new DirectionalLight(0xc0c0c0, 2.5);
    //Params (color, intensidad)
  scene.add(directionalLight);
  return directionalLight;
};

Usémosla en nuestro App.vue

...
import { initDirectionalLight } from "./lights";
...

const light = initDirectionalLight(scene);
...

Y ya vemos que nuestro modelo reacciona pero…. solo se ve desde arriba…

y para solucionarlo podemos hacer dos cosas.

Añadir rotación a la luz en nuestra función tick
Añadir OrbicControls
Bajar de position y nuestro modelo

Dedicaremos otro post al tema de los controls para definirlo en profundidad pero en realidad es bastante sencillo

Animando la luz

Esta parte puede ser un poco compleja de entender al principio, y también añadiré un post para explicarlo con más profundidad. Pero básicamente le indicaremos a nuestra luz que gire sobre su eje.

import { Scene, Clock } from "three";
...
// dentro del mounted y antes de nuestra funcion tick
const clock = new Clock();
// creamos un reloj que nos devolvera un tiempo 

const tick = () => {
    const elapsedTime = clock.getElapsedTime();
        // obtenemos la diferencia de tiempo que ha transcurrido entre el clock y el tick
        const lightAngle = elapsedTime * 0.5;
        // con el elapsedTime podemos crear un angulo,
        // luego con las funciones de coseno y seno se convertiran en un circulo
    light.position.x = Math.cos(lightAngle) * 4;
    light.position.z = Math.sin(lightAngle) * 4;

Y ¡Listoya! tenemos nuestra luz girando sobre su propio eje y mostrando nuestro modelo

yo para efectos de mi modelo voy a ajustarlo un poco modelContainer.rat.scene.position.y = -1 pero puede que tu no lo necesites. (si lo deseas puedes eliminar el cube llegados a este punto)

y con esto estaríamos listos.

Conclusión

Hemos visto nuevos conceptos como:

Light
ElapsedTime
Cómo cargar un modelo de manera asíncrona.

Todo esto nos servirá más adelante para nuestros futuros proyectos, threeJs es muy amplio pero a la vez tiene documentación muy buena.

Parallax mouse effect (Vue + Three.js)

Jaimebboyjt — Mon, 30 Jan 2023 15:26:48 +0000

Hola, Este es el segundo post de Vuejs+ threeJS

Si no has visto el primer post donde creamos un template te lo recomiendo, usaremos el template creado como base para este post

Link creacion del template

Esta vez añadiremos de manera sencilla un simple efecto parallax controlado por el mouse que se verá así:

En realidad es bien sencillo, vamos a añadir el movimiento a la cámara.

Nota: Como el efecto es fácil de implementar, seguiremos trabajando en el app.vue pero siéntete libre de crear otro composable, cambiar nombres etc.

Capturando el movimiento del mouse

La primera parte es muy sencillo ya que vueUse nos da un composable que podemos usar, es el useMouse

import { useWindowSize, useMouse } from "@vueuse/core";
...
const { x, y } = useMouse();
...

Podemos colocar un log dentro del nuestro watchEffect para asegurarnos que esté funcionando

Ahora si actualizamos nuestra cámara con estos valores, va a ser un caos, por lo que necesitamos convertirlos, para esto creamos dos variables nuevas usando el computed

...
const { width, height } = useWindowSize();
const aspectRatio = computed(() => width.value / height.value);
const { x, y } = useMouse();

const cameraX = computed(() => x.value / width.value -0.5);
const cameraY = computed(() => -(y.value / height.value -0.5));
...

Dividiremos el valor del mouse por el valor de la pantalla, el eje X entre el width y el eje Y entre el height (valores que ya tenemos capturados del tutorial anterior

Ahora si te fijas bien en la cameraY es diferente de cameraX, estamos imprimiendo un valor negativo, esto lo hacemos para invertir el valor que viene por defecto del evento mouse movement (recordemos que lo que deseamos es que si el mouse va para abajo nuestra cámara se vaya para abajo y la vista suba)

Y además tenemos un - 0.5, los valores normales del mouse van a hacer de entre 0 y 1. Pero nosotros necesitamos que sean de entre -0.5 a 0.5 y sin mucha ingeniería, restamos el valor 🙂

Actualizando la cámara

Si vienes de la primera lección, tenemos nuestra función tick() donde colocaremos nuestro efecto.

Lo siguiente es super sencillo, recordemos que la cámara es un object3D y por lo tanto tiene ciertas propiedades comunes, una de ellas es la posición.

podemos acceder a ellas solo debemos colocar que propiedad queremos modificar y que eje (recordemos x,y,z)

const tick = () => {
...
camera.position.x = cameraX.value;
camera.position.y = cameraY.value;
...

Ahora si deseas ampliar el limite puedes tomar y multiplicar el valor de camera.value y encontrar el que mejor se ajuste a tu escena

¡Listo!

Así de simple tenemos un bonito efecto que queda muy bien en muchas combinaciones. Esto también se hace muy simple cuando tenemos un template robusto

Por último invitarte separar esta lógica y crear un nuevo composable 🙂

VueJs + ThreeJs Primera parte. Template

Jaimebboyjt — Wed, 25 Jan 2023 19:49:13 +0000

Introducción

Esta será la primera de una serie de post sobre algunas técnicas para usar vueJs + threeJs. Aunque hay algunas librerías que nos facilitan el trabajo conocer las bases nos ayuda a tener conocimientos más sólidos

Recursos

En esta serie de post crearemos algunas cosas interesantes como:

Como hacer un FPS (first person shooter camera)
Parallax effect sobre una escena con threeJs que sigue al mouse
Shadders
usar 3D models
y algunas cosillas más…

Usaremos algunos conceptos avanzados por lo que es recomendable un conocimiento básico de cómo funciona VueJs y js. Pero no es necesario conocimiento previo con ThreeJs

Crearemos un template que usaremos como base para las siguientes ediciones, como este:

Setup

Lo primero será crear un nuevo proyecto con Vue e instalar las dependencias

> npm init vue@latest

> cd <your-project-name>

> npm install

> npm i @vueuse/core three

> npm run dev

Para efectos de este tutorial eliminaremos todos los archivos y nos quedaremos solo con nuestros archivos App.vue y main.js dentro de /src

Nuestra escena

Para iniciar nuestra primera escena 3D necesitamos comprender y configurar algunos componentes así que vamos por partes, lo primero que necesitaremos será un canvas, (algunos autores lo crean directamente desde JS) yo prefiero crearlo en nuestro template.

Le asignaremos un ref para tener acceso dentro del lifecycle onMouted

<template>
    <canvas ref="canvas" />
</template>

<script setup>
import { ref, onMounted } from "vue";

const canvas = ref(null);

onMounted(() => {

    console.log(canvas.value);

});
</script>

<style>
...
</style>

Ahora necesitamos varias cosas, como la escena, la cámara, una función render, un Mesh (objeto que mostrar) y algunas pequeñas configuraciones, empecemos por la escena.

import { Scene} from "three"
// NOTA: Aunque muchos autores usan una notación * as THREE
// Yo personalmente prefiero importar sólo lo que necesito por temas de rendimiento

const scene = new Scene();

Y así de simple creamos nuestra escena (nada muy emocionante aún) pero vamos a ir poco a poco añadiendo todo lo que necesitamos a ella

Renderer

Sigamos con el render, que no es más que una función de ThreeJs que realizará el renderizado de nuestra escena usando la WebGL API

Crearemos un archivo renderer.js donde exportamos dos funciones un initRenderer y un updateRenderer, por ahora creemos el initRenderer.

// renderer.js
import { WebGLRenderer } from "three";

export const initRenderer = (canvas) => {

    const renderer = new WebGLRenderer({

        canvas: canvas,

    });

    return renderer;

};

Le indicamos donde renderizar (nuestro canvas), aunque podemos tener múltiples configuraciones, tales como color de la escena, manejo de sombras , etc. Nos quedaremos con lo básico, ahora usemos initRenderer en nuestro App.vue

// <script setup>
import { ref, onMounted} from "vue";
import { Scene } from "three";
import { initRenderer } from "./renderer";

const canvas = ref(null);

const scene = new Scene();

let renderer = null;

onMounted(() => {

    renderer = initRenderer(canvas.value);

});
// </script>

Aún no podemos ver nada pero vamos avanzando.

Nota*: Puede parecer extraño declarar una variable let renderer null al principio, no te preocupes esto se hace porque próximamente nuestro updateRender se dispara antes de que el obj renderer pueda ejecutarse.

Cámara

Para poder visualizar algo, necesitamos una cámara, hay muchos tipos de cámaras disponibles en esta maravillosa librería de ThreeJs, elegiremos PerspectiveCamera

Para esto también vamos a crear dos funciones initCamera y updateCamera empecemos por el init en un archivo separado camera.js

//camera.js
import { PerspectiveCamera } from "three";

export const initCamera = () => {

    const camera = new PerspectiveCamera(
        75, window.width / window.height, 0.1, 100
    );

return camera;

// la position de la cámara por defecto es x:0, y:0 z:0
// recordemos que trabajamos con 3 dimensiones, el orden por defecto es XYZ
};

Para poder visualizar nuestra escena vamos a renderizarla con la función render() que recibe dos parámetros, la escena y la cámara (y añadirla a nuestra escena)

//<script setup>
import { ref, onMounted } from "vue";
import { Scene } from "three";
import { initRenderer } from "./renderer";
import { initCamera } from "./camera";

const canvas = ref(null);

const scene = new Scene();

let renderer = null;

let camera = null;

camera = initCamera();

scene.add(camera);

onMounted(() => {

    renderer = initRenderer(canvas.value);

    renderer.render(scene, camera)

});
// </script>

Y si todo ha salido de manera correcta deberíamos visualizar algo como:

Lo sé, lo sé. No es lo más emocionante del mundo pero pasos cortos.*

Tenemos dos detalles a corregir:

El tamaño de la escena no corresponde a toda la pantalla
Además el tamaño de la escena es fijo y no se actualiza (acá vamos a usar la reactividad de Vue para ayudarnos)

Update functions

Crearemos dos funciones updateRenderer y updateCamera en sus correspondientes archivos

//renderer.js
export function updateRenderer(renderer, width, height) {

if (!renderer) return;

renderer.setSize(width, height);
// configura nuestra escena con el tamaño enviado

renderer.setPixelRatio(window.devicePixelRatio);
// configura nuestra escena con el pixel Ratio del dispositivo

}


//camera.js

export const updateCamera = (camera, aspectRatio) => {

if (!camera) return;

camera.aspect = aspectRatio;

// configura nuestra escena con el aspectRatio enviado

camera.updateProjectionMatrix();

// actualiza la projection de la cámara
};

Necesitamos algunos parámetros extras para usar nuestras update functions, usaremos la reactividad de VueJs para que escuche los cambios y automáticamente llame a nuestra update function. Usemos un watchEffect.

// <script setup>
import { ref, onMounted, watchEffect } from "vue";
import { Scene } from "three";
import { initRenderer } from "./renderer";
import { initCamera, updateCamera, updateRenderer } from "./camera";

const canvas = ref(null);

const scene = new Scene();

let renderer = null;

let camera = null;

camera = initCamera();

scene.add(camera);

watchEffect(() => {

    updateRenderer(renderer, width, height);

    updateCamera(camera, aspectRatio);
});

onMounted(() => {

    renderer = initRenderer(canvas.value);

    renderer.render(scene, camera)

    updateRenderer(renderer, width, height);

    updateCamera(camera, aspectRatio);
});
// </script>

También necesitamos hacer un llamado inicial de las funciones update en el onMounted.

Usemos vueUse para obtener los tamaños reactivos de la pantalla

const { width, height } = useWindowSize();

const aspectRatio = computed(() => width.value / height.value);

Como extra añadamos unos estilos en el css global que nos van a ayudar

// <style>
* {
margin: 0;
padding: 0;
}

canvas {
position: absolute;
touch-action: none;
}
// </style>

Y nuestro App quedaría de esta forma

// <script setup>
import { ref, onMounted, computed, watchEffect } from "vue";
import { Scene } from "three";
import { useWindowSize } from "@vueuse/core";
import { initRenderer, updateRenderer } from "./renderer";
import { initCamera, updateCamera } from "./camera";

const canvas = ref(null);

const scene = new Scene();

let renderer = null;

let camera = null;

const { width, height } = useWindowSize();

const aspectRatio = computed(() => width.value / height.value);

camera = initCamera();

scene.add(camera);

watchEffect(() => {
    updateRenderer(renderer, width.value, height.value);
    updateCamera(camera, aspectRatio.value);
});

onMounted(() => {
    renderer = initRenderer(canvas.value);
    renderer.render(scene, camera);
    updateRenderer(renderer, width.value, height.value);
    updateCamera(camera, aspectRatio.value);
});
// </script>

Es ok si perdemos visibilidad de la escena a este punto, esto es porque el updateRenderer y updateCamera se ejecutan antes del mounted

Function tick

La función tick() (el maestro Bruno Simon la llama de esta forma), es una función versátil, que nos permitirá animar los objetos que se encuentren dentro de nuestra escena, le dará vida a nuestra app, además como usa el requestAnimationFrame API tiene buen rendimiento

//App..vue dentro del mounted
const tick = () => {
//render
    renderer.render(scene, camera); // moveremos nuestro renderer dentro de tick()
    window.requestAnimationFrame(tick); // cada frame ejecutara un tick()
};
tick(); // inicializamos tick()

Ya casi…

uff hasta ahora hay bastante código y solo una escena totalmente negra (color por default)

Pero con todo configurado, ahora si intentamos hacer resize a la pantalla, veremos que nuestra escena se actualiza de manera automática, al igual que nuestra cámara.

Hasta ahora nuestro script va de esta forma

import { ref, onMounted, computed, watchEffect } from "vue";
import { Scene } from "three";
import { useWindowSize } from "@vueuse/core";
import { initRenderer, updateRenderer } from "./renderer";
import { initCamera, updateCamera } from "./camera";

const canvas = ref(null);

const scene = new Scene();

let renderer = null;

let camera = null;

const { width, height } = useWindowSize();

const aspectRatio = computed(() => width.value / height.value);

camera = initCamera();

scene.add(camera);

watchEffect(() => {
    updateRenderer(renderer, width.value, height.value);
    updateCamera(camera, aspectRatio.value);
});

onMounted(() => {
    renderer = initRenderer(canvas.value);
    updateRenderer(renderer, width.value, height.value);
    updateCamera(camera, aspectRatio.value);

    const tick = () => {
        //render
        renderer.render(scene, camera);
        window.requestAnimationFrame(tick);
    };

    tick();
});

Mesh

Aunque para los Mesh hay infinidades de combinaciones: materiales, geometrías, texturas y propiedades, que poco a poco indagaremos más en ellas, por el momento crearemos la forma más simple posible un cubo, yo recomendaría tratar de dejar lo más despejado el App.vue y crear un archivo aparte algo como cube.js (que luego reemplazamos por otros modelos o sencillamente lo eliminaremos)


// cube.js

import { BoxGeometry, MeshBasicMaterial, Mesh } from "three";

export const createCube = () => {
    const geometry = new BoxGeometry(1, 1, 1);
// la BoxGeometry necesita los parámetros de width, height y depth

    const material = new MeshBasicMaterial({ color: 0x00ff00 });
// el MeshBasicMaterial es el material más básico, no necesita luz

    return new Mesh(geometry, material);
};

Para crear un mesh, necesitamos una geometría y un material.

Hay muchas geometrías e incluso podemos crear las nuestras propias, y también hay muchos materiales cada uno con diferentes propiedades, algunos reflejan sombra, otros tienen refracción de luz. Muchos de estos temas los estaremos viendo más adelante.

Por ahora importamos y añadamos a nuestra escena


// App.vue

import { createCube } from "./cube";

const cube = createCube()

scene.add(cube);

onMouted(() => {
...
})

Y te darás cuenta que…. nada se renderiza 😟. ¿Por qué sucede esto?

Realmente si se esta renderizando pero no lo podemos ver, (podemos checarlo haciendo un console.log(scene) y revisando si tiene un children, y lo que sucede es muy simple.

Nuestra cámara está en la posición (0,0,0) al igual que nuestro cubo. es la posición por defecto y no la hemos cambiado. (recordemos que el orden es X,Y,Z)

La cámara así como nuestro Mesh son lo que denominamos 3d Object y comparten propiedades como, scale, rotation y posición. Todas en tres dimensiones.

Para solucionarlo solo movamos la cámara un poco para atrás, nos vamos a nuestro camera.js y justo antes del return añadimos:


camera.position.z = 5;

// si te preguntas 5 qué? la mejor forma de verlo son 5 unidades, una buena práctica

// es definir si son 5 metros, 5 centímetros depende de tu scena

Y ahí está! un cuadrado en el medio de nuestra escena, verde, inmóvil y que parece en 2D 😟

Ah! pero no es en 2D, lo que sucede es que nuestra cámara está exactamente alineada, de frente a él

Agreguemos una pequeña animación, verán que es muy fácil

Para esto en nuestra función tick() vamos a añadir un estas dos líneas de código


cube.rotation.y += 0.01

cube.rotation.x += 0.01

Y listo.

uff fue bastante trabajo no? varias cosas que configurar, nuevos conceptos pero al final tenemos un template robusto que podemos usar como base para infinita variedad de proyectos

Así se ve nuestro código hasta el momento:


<template>
    <canvas ref="canvas" />
</template>

<script setup>
import { ref, onMounted, computed, watchEffect } from "vue";
import { Scene } from "three";
import { useWindowSize } from "@vueuse/core";
import { initRenderer, updateRenderer } from "./renderer";
import { initCamera, updateCamera } from "./camera";
import { createCube } from "./cube";

const canvas = ref(null);
const scene = new Scene();
let renderer = null;
let camera = null;

const cube = createCube();
camera = initCamera();

const { width, height } = useWindowSize();
const aspectRatio = computed(() => width.value / height.value);

scene.add(camera);
scene.add(cube);

watchEffect(() => {
    updateRenderer(renderer, width.value, height.value);
    updateCamera(camera, aspectRatio.value);
});

onMounted(() => {
    renderer = initRenderer(canvas.value);
    updateRenderer(renderer, width.value, height.value);
    updateCamera(camera, aspectRatio.value);
    const tick = () => {
        //render
        renderer.render(scene, camera);
        window.requestAnimationFrame(tick);
        //animation
        cube.rotation.y += 0.01;
        cube.rotation.x += 0.01;
    };
    tick();
});

</script>

<style>
* {
    margin: 0;
    padding: 0;
}

canvas {
    position: absolute;
    touch-action: none;
}

</style>

Conclusión

Hasta ahora puede parecer que tengamos solo un cubo verde dando vueltas, pero la verdad tenemos un template que usaremos más adelante sirve como base para ya no preocuparnos de pequeños detalles.

Que hemos aprendido:

Crear una escena básica y renderizarla
Crear un Mesh, añadirlo a la escena y agregarle animación
Cómo usar la reactividad de VueJs, para añadir reactividad a la escena