> Markdown version of [/videos/543-tresjs-a-new-declarative-threejs-as-vue-components](https://www.wearedevelopers.com/videos/543-tresjs-a-new-declarative-threejs-as-vue-components). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# TresJS a new declarative ThreeJS as Vue components

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.

- **Speakers:** Alvaro Saburido
- **Event:** WeAreDevelopers LIVE
- **Published:** April 18, 2023
- **Duration:** 59:15
- **URL:** https://www.wearedevelopers.com/videos/543-tresjs-a-new-declarative-threejs-as-vue-components

## Summary

Building 3D web experiences in Vue.js traditionally forced developers to wrestle with vanilla Three.js, creating friction between declarative UI frameworks and imperative WebGL code. TresJS solves this by providing a custom ecosystem that directly translates Three.js catalogs into declarative Vue components. Taking inspiration from React Three Fiber, TresJS dynamically generates its elements from the latest Three.js constructors under the hood, eliminating the need for constant maintenance and wrapper updates whenever the foundational 3D library evolves.

Developing a scene relies on a straightforward component tree encapsulating a main canvas, complete with perspective cameras, meshes, and lighting. Developers can instantiate complex physical forms using standard Three.js geometries and materials flawlessly embedded via Vue's slot architecture. To manage external assets without boilerplate, the accompanying Cientos ecosystem package abstracts intricate routines—such as orbit controls, dynamic GLTF and FBX model loading, and environment texturing—into optimized composables. Visual transformations and custom GLSL shaders integrate natively through standard component properties, mimicking the familiar Vue developer experience.

Seamless animation loops within a UI framework demand strict performance management, fundamentally clashing with deep proxy-based reactivity. Because calculating vectors and lighting at 60 frames per second is highly resource-intensive, utilizing native Vue shallow references is critical to prevent reactive overhead from throttling the browser. Furthermore, delegating complex structural details to texture displacement maps instead of dense geometry vertices, alongside selectively configuring which meshes cast or receive heavy shadow algorithms, ensures these high-fidelity virtual environments remain lightweight and performant.

**Keywords:** vue framework 3d rendering, declarative webgl interfaces, three.js wrapper architecture, tresjs vue components, react three fiber alternatives, 3d scene graph structures, shallowref performance optimization, webgl render loop animation, gltf 3d model loading, physically based rendering textures, shadow casting computation, vite development tooling, custom glsl shader integration, cientos utility composables, orbitcontrols camera tracking

## Chapters

1. **Building three-dimensional web experiences using framework components** (00:02) — Recreating virtual scenes declaratively provides an intuitive architectural pattern to manage complex visual logic.
1. **Designing an auto-updating 3D library for component mapping** (01:56) — Maintaining a framework-specific graphical wrapper requires dynamically mapping native constructors to components to minimize manual repository updates.
1. **Installing the package and initializing the canvas plugin** (07:28) — Registering the root plugin configures the application to natively recognize customized graphical environment tags.
1. **Composing rendering structures using cameras and scenes** (08:36) — A functional digital canvas requires a continuous scene containing visual objects combined with a camera body to calculate perspective.
1. **Defining geometry and materials with framework slots** (11:28) — Passing structural coordinate meshes and surface materials via component slots enables highly reusable object hierarchies.
1. **Animating visual properties using request animation frame** (16:45) — Modifying graphical coordinates within an active continuous render loop updates elements dynamically without sacrificing optimal framerates.
1. **Extending component catalogs with secondary library utilities** (20:56) — Injecting isolated visual modules into the mapping catalog unlocks custom utility nodes like target-orbiting camera controls.
1. **Simulating physical surface characteristics with loaded textures** (23:21) — Modifying underlying material properties with structural displacement layers mimics complex organic shapes efficiently without calculating dense structural vertices.
1. **Lighting strategies and calculating positional rendering shadows** (27:39) — Explicitly specifying individual discrete casting and receiving bodies resolves the immense computational bottleneck of processing ambient lighting equations.
1. **Resolving interaction states using underlying raycaster calculations** (34:46) — Proxying pointer coordinate inputs through a dedicated spatial mapping module enables predictable interface events spanning three dimensions.
1. **Loading compressed external geometry models into scopes** (36:03) — Utilizing specialized asset algorithmic compressions safely parses heavy external geometry files directly alongside frontend layout templates.
1. **Addressing performance considerations concerning state reactivity loops** (42:41) — Restricting deep observable tracking on massive positional instances prevents architectural delays during continuous high-frequency frame repaints.
1. **Project milestones and organizing open source contributions** (45:07) — Establishing clear automated architectural pipelines simplifies concurrent community assistance towards stabilizing the primary graphical core variants.
1. **Resolving audience queries on shader integration and setup** (48:56) — Providing shared contextual instances via strict provider patterns configures tree-shaking while directly distributing custom shader compiler fragments.

## Related Moments

- [Introduction to the speaker and frontend projects](https://www.wearedevelopers.com/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application) (from "Lessons learned from building a thriving Vue.js SaaS application")
- [Integrating web components across popular javascript frameworks](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [Core architectural reasons for migrating to Nuxt three](https://www.wearedevelopers.com/videos/294-modern-web-development-with-nuxt3) (from "Modern Web Development with Nuxt3")
- [Democratizing cross-platform development with alternative JavaScript frameworks](https://www.wearedevelopers.com/videos/1445-lynx-native-for-more) (from "Lynx: Native for More")
- [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo")
- [The rise of modern component-based frameworks and modular architecture](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")

## Related Articles

- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [Why Developers are So Excited About Pretext](https://www.wearedevelopers.com/magazine/724-why-developers-are-so-excited-about-pretext)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**