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 Β· WWC 2025

5:59 min

Integrating web components across popular javascript frameworks

Rowdy Rabouw Rowdy Rabouw Β· WWC 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 Β· WWC 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

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

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

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

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

Full Stack with Flutter - are we there yet?

Nemanja Stoőić

Senior Flutter Developer

Nemanja Stoőić
Open session

World Congress 2026 North America

The $0.15/month Algo-Trader: Architecting High-Performance Serverless Trading Engines

Vishwak Thatikonda

Lead Full Stack Engineer at SDH Systems

Vishwak Thatikonda
Open session

World Congress 2026 North America

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith

Related videos

Modern Web Development with Nuxt3 thumbnail
41:43
JS Congress β€’ over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Under The Hood of Vue 3 Reactivity thumbnail
49:00
WWC 2021 β€’ about 5 years ago

Under The Hood of Vue 3 Reactivity

Marc Backes

Building Better with Nuxt 3 thumbnail
41:22
JS Congress β€’ over 4 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.