Quickstart: load your first asset

This guide takes you from a free download to a model on screen. The example uses barrel-01.glb, a Draco-compressed catalog model that does not need a texture decoder.

1. Download the model

Create a free account, sign in, and open a free asset page. Select Download and place the resulting GLB in your project's public folder:

public/
  barrel-01.glb
  draco/

Free assets require no payment or license key. Your account records the download and the Free Commercial License that applies to it.

2. Add the Draco decoder

Install three.js, then copy its matching Draco decoder files into public/draco/:

npm install three
mkdir -p public/draco
cp -R node_modules/three/examples/jsm/libs/draco/gltf/. public/draco/

Re-copy these files when you upgrade three.js so the loader and decoder stay in sync.

3. Load it with three.js

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

const draco = new DRACOLoader().setDecoderPath("/draco/");
const loader = new GLTFLoader().setDRACOLoader(draco);

loader.load("/barrel-01.glb", (gltf) => {
  scene.add(gltf.scene);
});

React Three Fiber

With drei, pass the decoder path to useGLTF:

"use client";

import { useGLTF } from "@react-three/drei";

export function Barrel() {
  const { scene } = useGLTF("/barrel-01.glb", "/draco/");
  return <primitive object={scene} />;
}

useGLTF.preload("/barrel-01.glb", "/draco/");

Render this component inside <Canvas>. In Next.js, keep the component client-side because WebGL runs in the browser.

When you also need KTX2

Some textured assets use KTX2/Basis compressed textures. Those files need KTX2Loader in addition to Draco. Texture-free, vertex-colour models such as this example do not. See Setting up the Draco + KTX2 decoders for both configurations.

Next steps

• Requirements & compatibility
• How downloads and license keys work
• Using a pack in React Three Fiber