WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Apr 18, 2023

TresJS a new declarative ThreeJS as Vue components

Alvaro Saburido

Tired of wrestling with imperative WebGL code in your Vue apps? TresJS dynamically translates Three.js catalogs into lightweight, declarative components for high-performance 3D web experiences.

Pause
Mute Enter Fullscreen
#1 about 2 min

Building three-dimensional web experiences using framework components

Recreating virtual scenes declaratively provides an intuitive architectural pattern to manage complex visual logic.

#2 about 6 min

Designing an auto-updating 3D library for component mapping

Maintaining a framework-specific graphical wrapper requires dynamically mapping native constructors to components to minimize manual repository updates.

#3 about 2 min

Installing the package and initializing the canvas plugin

Registering the root plugin configures the application to natively recognize customized graphical environment tags.

#4 about 3 min

Composing rendering structures using cameras and scenes

A functional digital canvas requires a continuous scene containing visual objects combined with a camera body to calculate perspective.

#5 about 6 min

Defining geometry and materials with framework slots

Passing structural coordinate meshes and surface materials via component slots enables highly reusable object hierarchies.

#6 about 5 min

Animating visual properties using request animation frame

Modifying graphical coordinates within an active continuous render loop updates elements dynamically without sacrificing optimal framerates.

#7 about 3 min

Extending component catalogs with secondary library utilities

Injecting isolated visual modules into the mapping catalog unlocks custom utility nodes like target-orbiting camera controls.

#8 about 5 min

Simulating physical surface characteristics with loaded textures

Modifying underlying material properties with structural displacement layers mimics complex organic shapes efficiently without calculating dense structural vertices.

#9 about 8 min

Lighting strategies and calculating positional rendering shadows

Explicitly specifying individual discrete casting and receiving bodies resolves the immense computational bottleneck of processing ambient lighting equations.

#10 about 2 min

Resolving interaction states using underlying raycaster calculations

Proxying pointer coordinate inputs through a dedicated spatial mapping module enables predictable interface events spanning three dimensions.

#11 about 7 min

Loading compressed external geometry models into scopes

Utilizing specialized asset algorithmic compressions safely parses heavy external geometry files directly alongside frontend layout templates.

#12 about 3 min

Addressing performance considerations concerning state reactivity loops

Restricting deep observable tracking on massive positional instances prevents architectural delays during continuous high-frequency frame repaints.

#13 about 4 min

Project milestones and organizing open source contributions

Establishing clear automated architectural pipelines simplifies concurrent community assistance towards stabilizing the primary graphical core variants.

#14 about 11 min

Resolving audience queries on shader integration and setup

Providing shared contextual instances via strict provider patterns configures tree-shaking while directly distributing custom shader compiler fragments.

Matching moments

1:28 min

Introduction to the speaker and frontend projects

Abdelrahman Awad Abdelrahman Awad · World Congress 2025

5:59 min

Integrating web components across popular javascript frameworks

Rowdy Rabouw Rowdy Rabouw · World Congress 2022

3:36 min

Core architectural reasons for migrating to Nuxt three

Alexander Lichter · JS Congress

2:51 min

Democratizing cross-platform development with alternative JavaScript frameworks

Xuan Huang Xuan Huang · World Congress 2025

4:30 min

Tracking open source community trends in JavaScript native frameworks

Dan Cranney Dan Cranney +2 · LIVE

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
11 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
18 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
19 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
25 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
26 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
about 1 month ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

Modern Web Development with Nuxt3 thumbnail
41:43
JS Congress • almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Under The Hood of Vue 3 Reactivity thumbnail
49:00
World Congress 2021 • about 5 years ago

Under The Hood of Vue 3 Reactivity

Marc Backes

Building Better with Nuxt 3 thumbnail
41:22
JS Congress • almost 5 years ago

Building Better with Nuxt 3

Daniel Roe

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly thumbnail
44:31
LIVE • over 5 years ago

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

petite-vue - Progressively enhancing every application? thumbnail
44:40
LIVE • over 3 years ago

petite-vue - Progressively enhancing every application?

Alexander Lichter

Under The Hood Of Vue 3 Reactivity thumbnail
54:44
LIVE • over 3 years ago

Under The Hood Of Vue 3 Reactivity

Marc Backes

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.