Skip to content


The <primitive /> component is a versatile low-level component in TresJS that allows you to directly use any three.js object within your Vue application without an abstraction. It acts as a bridge between Vue's reactivity system and THREE's scene graph.


<script setup lang="ts">
  // Import necessary three.js classes
  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'

  // Create a box geometry and a basic material
  const geometry = new BoxGeometry(1, 1, 1)
  const material = new MeshBasicMaterial({ color: 0x00ff00 })

  // Create a mesh with the geometry and material
  const meshWithMaterial = new Mesh(geometry, material)

  <primitive :object="meshWithMaterial" />


  • object: This prop expects either a plain or a reactive three.js Object3D (preferably a shallowRef) or any of its derived classes. It is the primary object that the <primitive /> component will render. In the updated example, a Mesh object with an associated Material is passed to this prop.


The same pointer events available on the TresJS components are available on the <primitive /> component. You can use these events to interact with the object in the scene. See the complete list of events here.


Passing childrens via slots

You can also pass children to the <primitive /> component using slots. This is useful when you want to add additional objects to the scene that are not part of the main object.

  <primitive :object="meshWithOnlyGeometry">
    <MeshBasicMaterial :color="0xff0000" />

Usage with Models

The <primitive /> component is especially useful for rendering complex objects like models loaded from external sources. The following example shows how to load a model from a GLTF file and render it using the <primitive /> component.

<script lang="ts" setup>
  import { useGLTF } from '@tresjs/cientos'

  const { nodes } = await useGLTF('/models/AkuAku.gltf')

    <primitive :object="nodes.AkuAku" />