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