Tresjs/docs/content/2.essentials/1.core-architecture/2.custom-vue-renderer.md

---

title: Custom Vue Renderer

description: Discover how TresJS leverages Vue 3's custom renderer API to bridge Vue's reactive component system with Three.js 3D scene management.

::warning This page is a work in progress. ::

This page documents how TresJS leverages Vue 3's custom renderer API to transform Vue components into Three.js objects. The custom renderer is one of the core architectural elements of TresJS, allowing developers to use declarative Vue syntax to construct and manipulate 3D scenes.

What is a custom renderer?

Vue 3 introduced the ability to create custom renderers that target platforms beyond the DOM. While Vue's standard renderer transforms Vue components into DOM elements, a custom renderer can transform them into anything—in TresJS's case, Three.js objects.

The Traditional DOM Renderer

In a typical Vue application, the renderer creates and manipulates DOM elements:

// Vue's DOM renderer operations
const div = document.createElement('div') // Create element
div.textContent = 'Hello World' // Set properties
document.body.appendChild(div) // Mount to parent
div.style.color = 'red' // Update properties
document.body.removeChild(div) // Unmount

TresJS Three.js Renderer

TresJS implements a custom renderer that performs analogous operations with Three.js objects:

// TresJS renderer operations
const mesh = new THREE.Mesh() // Create Three.js object
mesh.material = new THREE.MeshBasicMaterial() // Set properties
scene.add(mesh) // Add to scene graph
mesh.position.set(1, 2, 3) // Update properties
scene.remove(mesh) // Remove from scene

The Custom Renderer API

The custom renderer in TresJS (nodeOps) implements a set of operations that Vue calls when it needs to:

• Create a new Three.js object
• Add an object to the scene or to another object
• Update an object's properties
• Remove an object from the scene.