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 +2 · LIVE

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

More from WeAreDevelopers LIVE

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
6 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
11 days ago

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

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
12 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
19 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres thumbnail
7:41
20 days ago

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres

Chris Heilmann, Daniel Cranney

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
about 1 month ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 16:10–16:40

Stage 4

Speed up your CI/CD pipelines by caching build & runtime artifacts

Thijs Feryn

Technical Evangelist at Varnish Software

Thijs Feryn
Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Outdoor Stage

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

September 24, 2026 · 17:30–18:00

Stage 7

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager at GitHub

James Clancey

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.