TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue

Rate this content
Bookmark

Conoce TresJS ▲ ■ ●, una forma declarativa de llevar la magia de ThreeJS utilizando componentes y composables de Vue en la vida cotidiana. Piénsalo como React-three-fiber o Lunchbox pero sin necesidad de un renderizador personalizado. Simplemente funciona.

¿Estás listo para agregar una nueva dimensión a tus aplicaciones Vue?

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

Troy.js es un renderizador personalizado que permite crear escenas 3D de forma declarativa utilizando tu framework favorito, como Vue, mediante componentes y composiciones. Se basa en la biblioteca 3GS y facilita la creación de escenas 3D sin necesidad de manejar la complejidad de WebGL directamente.

Troy.js fue desarrollado para estar actualizado con la última versión de 3GS, ser ligero y fácil de usar, mejorar la experiencia del desarrollador, soportar TypeScript y ser eficiente con la reactividad. Se buscaba una solución que se integrara bien con Vue y que pudiera mantenerse con poco esfuerzo.

Para empezar a usar Troy.js, puedes añadirlo a tu proyecto con el comando 'pnpm add 3GS core'. Esto instala la base necesaria para comenzar a crear escenas 3D en tu aplicación web, utilizando Vue como framework.

Para configurar una escena básica en Troy.js, necesitas importar el componente de lienzo de Troy desde el núcleo, agregarlo a la plantilla y asegurarte de que todos los elementos que deseas renderizar estén dentro de este lienzo. Luego, configuras objetos como la geometría, la luz, la cámara y el renderizado para dibujar todo en el elemento de lienzo.

Sí, Troy.js es compatible con versiones antiguas de Three.js siempre y cuando instales esa versión específica. Sin embargo, está diseñado para funcionar óptimamente con la última versión disponible de Three.js para aprovechar las nuevas características y mejoras.

Troy.js ofrece una integración nativa con Vue, permitiendo a los desarrolladores utilizar la reactividad de Vue y sus patrones de diseño para crear y manejar escenas 3D. Esto facilita el desarrollo de aplicaciones 3D en Vue, haciendo el proceso más accesible y manteniendo un rendimiento óptimo.

Sí, aunque Troy.js está enfocado en escenas 3D, también puede ser utilizado para crear gráficos 2D. Esto lo hace versátil para diferentes tipos de proyectos visuales dentro de aplicaciones web.

Troy.js es ideal para proyectos que requieren visualizaciones 3D interactivas, como configuradores de productos, visualizaciones de datos, juegos, y experiencias educativas o de entrenamiento. Su capacidad para integrarse con Vue lo hace especialmente útil para desarrolladores familiarizados con ese framework.

Alvaro Saburido
Alvaro Saburido
27 min
12 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El orador descubrió el 3D con 3GS y se inspiró para crear un ecosistema 3D para la comunidad de Vue utilizando Troy.js. Se explicó el proceso de configuración de una escena 3D y objetos en Tress, junto con la creación y configuración de objetos 3D. La charla también cubrió la animación de objetos con Tress y el paquete 'Cientos', así como el futuro de Tress.js y su compatibilidad con versiones anteriores de Three. El orador expresó gratitud a los patrocinadores y colaboradores y destacó el potencial de personalización del producto con Tress.js.

1. Introducción a 3D con WebGL y Componentes de Vista

Short description:

Hola, Londres. ¿Cómo va todo? Soy de Venezuela, así que mi acento venezolano surgirá. Creo mucho contenido en Alvaro.Dev labs. Realmente quería aprender a crear videojuegos. Terminé siendo ingeniero de telecomunicaciones y luego desarrollador de front-end, donde estoy ahora mismo, estoy súper feliz. Pero dejé el 3D a un lado, pensé que era para personas realmente brillantes en génesis, como hacen esas cosas, hasta que descubrí 3GS, ¿vale?

Hola, Londres. ¿Cómo va todo? En primer lugar, me disculparé por mi mal inglés. Desafortunadamente, no tengo un acento encantador como Daniel Rowe o un acento británico, así que lo siento por asesinar su idioma. Haré lo mejor que pueda. De acuerdo, soy de Venezuela, así que mi acento venezolano surgirá. ¿Cuántos de ustedes han hecho 3D con WebGL o... bueno. Más de lo que esperaba, ¿qué les parecería si les dijera que esta escena aquí, que es una especie de escena de magia de pociones, está completamente hecha con Componentes de Vista y Compositores? De acuerdo. Al principio, el nombre de mi presentación hoy iba a ser Trace.Yes una forma declarativa de hacer 3D con Componentes Web. Pero he estado jugando Whole World Legacy como loco el último año y pensé para mí mismo, bueno, cambiemos eso. Un nombre aburrido, cambiemos eso. Y se me ocurrió, bueno, no, Chad GPT se le ocurrió esto. Trace.Yes y la Cámara de Vista desbloqueando los misterios del renderizado 3D. Así que con eso, me presento. Mi nombre es Alvaro Saborido. Soy un ingeniero de relaciones de desarrollo en StudyBlock. Soy de Barcelona, España, pero originalmente de Venezuela. Creo mucho contenido en Alvaro.Dev labs. Algunos enlaces si quieres seguirme, saludar, siempre bienvenido. De acuerdo. Sí, en realidad soy yo. No sé qué pasó. Pero ese es el niño que vive jugando videojuegos, porque sí, era un niño que amaba jugar videojuegos. Y para ser honesto, ese niño nunca creció. Aquí estoy jugando con mi gato, Geralt. Entonces, ¿cuál era mi motivación cuando era niño? Realmente quería aprender a crear videojuegos. Estaba fascinado por esa era dorada de los juegos de PS1 como Crash Bandicoot, Spider the Dragon, y quién olvidará ese buen juego de Hogwarts como Harry Potter con esos gráficos increíbles. Mira eso. HD de inmediato, ¿verdad? Así que algo a destacar aquí, quería estudiar eso, pero era muy caro en Minnesota ser desarrollador de juegos, así que terminé siendo ingeniero de telecomunicaciones y luego desarrollador de front-end donde estoy ahora mismo, estoy súper feliz. Pero dejé el 3D a un lado, pensé que era para personas realmente brillantes en génesis, como hacen esas cosas, hasta que descubrí 3GS, ¿vale? Entonces, 3GS es una biblioteca que aprovecha la parte de WebGL, la parte difícil, y la pone a disposición de los desarrolladores de JavaScript para que codifiquen y creen sus escenas.

2. Introducción a Troy.js y sus beneficios

Short description:

Encontré un increíble curso de Bruno Simon que me enseñó cómo crear mis propias escenas en 3D. Luego descubrí React 3Fiber, una biblioteca que te permite crear escenas con componentes de React. Pero como prefiero Vue, busqué una solución similar y encontré Troy.js, un renderizador personalizado que te permite crear 3GS de forma declarativa utilizando componentes de Vue. Troy.js es ligero, actualizado y proporciona una gran experiencia de desarrollo con soporte para TypeScript. Es eficiente y funciona bien con la reactividad gracias a bit.

Y descubrí este increíble curso de Bruno Simon, es el de la imagen, para aprender a hacerlo. Y seis meses después de eso estaba aprendiendo, y pude crear mis propias escenas. Luego descubrí React 3Fiber, y espera, antes de que digas por qué estás hablando de React en una conferencia de Vue, ¿verdad? Lo sé. Pero React 3Fiber es una increíble biblioteca creada por PoeMandress, que es un estudio increíble, y hicieron algo que me sorprendió. Básicamente pudieron crear una escena con sus componentes de React. Así que en lugar de usar JavaScript plano, pudieron usar eso. Pero aquí hay un truco, es que nunca usaré React. No, estoy bromeando. Uso React, pero prefiero Vue, ¿de acuerdo? ¡Nunca!

Así que estaba tratando de encontrar algo que funcionara para Vue, ¿de acuerdo? Así que encontré esta increíble biblioteca, sí, probablemente la que conoces porque fue la primera en intentar hacer un envoltorio. Así que era un envoltorio manual que intentaba replicar todos los diferentes componentes. Y luego encontré Lunchbox, que es la otra, que es un renderizador personalizado. Y quédate con esa frase, renderizador personalizado, ¿de acuerdo? Pero el problema era que Troy.js era realmente difícil de mantener. Porque era un envoltorio manual y, para ser honesto, 3GS siempre está desactualizado, cada semana hay una nueva versión. Es realmente difícil mantenerse al día con los cambios. Así es como nació Troy.js. ¿De acuerdo, qué es Troy.js? Básicamente es un renderizador personalizado que te permite crear 3GS de forma declarativa utilizando tu framework favorito. Usando componentes y composiciones de Vue. La palabra es la palabra en español para árbol. Así que es 3GS. Y está basado en la biblioteca 3GS y también porque la guerra francesa ya estaba tomada. Así que se me ocurrió eso. ¿Por qué Troy.js? Mira, ¿por qué no usar otro? Quería crear algo que estuviera actualizado con el último 3GS con pocos o ningún mantenedor porque mantener una biblioteca como esta requiere mucho tiempo y esfuerzo, ¿verdad? Es ligero para que puedas instalarlo y el rendimiento de tu aplicación web o página no se vea afectado. Que fuera explícito y fácil de usar. Eso es realmente importante para la experiencia del desarrollador. Por supuesto, enfoque en la experiencia del desarrollador. Necesitábamos algo que fuera agradable para hacer 3D. Soporte para TypeScript. Todos los que han trabajado con 3GS saben de qué estoy hablando. Y que pudiera ser eficiente incluso con la reactividad porque 3GS está impulsado por bit. Así que bit lo hace posible.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento