Using a pack in vanilla three.js

Use GLTFLoader for pack GLBs. Current low-poly individual bundle files are commonly uncompressed, while combined catalogs and some prebuilds use Draco. Textures and KTX2 support are pack-specific; read the README and inspect the file profile you are loading.

Load an individual GLB#

An uncompressed file needs only GLTFLoader:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

const loader = new GLTFLoader()

loader.load(
  '/models/asset.glb',
  (gltf) => scene.add(gltf.scene),
  undefined,
  (error) => console.error('Could not load asset.glb', error),
)

Use individual files for independently placeable scene objects.

Load a Draco-compressed GLB#

Copy compatible Draco decoder files into your own public directory, then attach DRACOLoader:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

const draco = new DRACOLoader()
draco.setDecoderPath('/draco/')

const loader = new GLTFLoader()
loader.setDRACOLoader(draco)

loader.load('/models/catalog.glb', (gltf) => {
  scene.add(gltf.scene)
})

Reuse the configured loader for multiple files. An attached DRACOLoader is ignored when an uncompressed GLB does not need it. Dispose the Draco loader when your application no longer uses it.

threejsassets does not host asset or decoder URLs. Self-hosting keeps the decoder version and Content Security Policy under your control. See setting up the Draco + KTX2 decoders for the full setup.

Read the README's compression line carefully#

A README's headline summary describes the combined catalog, not every file in the ZIP. Several packs open with a blanket "Draco-compressed glTF" line while the individual GLBs they ship are uncompressed; further down, the same README names the catalog specifically as the joined and Draco-compressed file. Verify per file before you decide a decoder is required.

Those READMEs also print a public CDN decoder path in their quick-start snippets. Use your own setDecoderPath('/draco/') instead, as shown above. A third-party decoder URL pins you to a version you do not control and has to be allowed by your Content Security Policy.

Choose the right file#

• Use individual GLBs to compose, stream, or repeat assets independently.
• Use a prebuild when the pack includes a useful set-piece; check whether it requires Draco.
• Use a combined catalog for one-file inspection only. It is joined and not a source of independently moveable models.

If a file contains KTX2 textures, also configure KTX2Loader and call detectSupport(renderer). Do not add it solely because another pack uses textures.

Place and shade the model#

Environment packs commonly use Y-up, +Z forward, metric height conventions, and grounded pivots, but pack exceptions exist. See scale, orientation & pivots.

Current low-poly environment files commonly use vertex colours and a shared material. Configurators and textured assets differ; see recoloring with palettes.

Next steps#

• Individual GLBs vs the combined catalog — compare file roles.
• Using a pack in React Three Fiber — use useGLTF and optional components.