Skip to content


GLTFExporter is an addon in threeJs that allows you to download any object3D in a GLTF format. TresJS provides a composable that simplifies this process with just a few lines of code.

Basic usage

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { useGLTFExporter } from '@tresjs/cientos'
import { shallowRef } from 'vue'

const boxRef = shallowRef()

// the second argument – options – is not required
const downloadBox = () => {
  useGLTFExporter(boxRef.value, { fileName: 'cube', binary: true })
  <TresCanvas clear-color="#82DBC5" window-size >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
      <TresBoxGeometry :args="[1, 1, 1]" />
      <TresMeshStandardMaterial :color="0x00ff00" />
    <TresDirectionalLight :position="[0, 10, 10]" />

Download the scene: a quick tip

In the previous example, if we want to download the whole scene, we can easily do it by just accessing the parent property.

const downloadBox = () => {
  useGLTFExporter(boxRef.value.parent) // As the parent is the current scene

This may vary in your scene please first check what is in your parent property

Otherwise, you can access your scene using the useTresContext


SelectorObject3DRequiredThe object to download. Could be an array of objects
OptionsOptionsundefinedDescription below


trsboolfalseExport position, rotation and scale instead of matrix per node
onlyVisiblebooltrueExport only visible objects
binaryboolfalseExport in binary (.glb) format, returning an ArrayBuffer
maxTextureSizenumberInfinityRestricts the image maximum size (both width and height) to the given value
animationsArray<AnimationClip>undefinedList of animations to be included in the export
includeCustomExtensionsboolInfinityExport custom glTF extensions defined on an object's
fileNamestringObject namename of the generated fil