Threejs Loaders

Efficiently load and manage Three.js assets with automation and integration tools

Category: productivity Source: cloudai-x/threejs-skills

Three.js Loaders is a community skill for loading 3D assets in Three.js, covering glTF loading, texture management, model optimization, progress tracking, and asset caching for efficient 3D content delivery.

What Is This?

Overview

Three.js Loaders provides guidance on loading and managing 3D assets in Three.js applications. It covers glTF loading that imports 3D models with materials, animations, and scene hierarchy from industry-standard format, texture management that loads and configures image textures with proper color space and filtering, model optimization that reduces geometry complexity and texture size for web delivery, progress tracking that monitors download and parsing progress for loading screens, and asset caching that stores loaded resources to avoid redundant network requests. The skill helps developers deliver 3D content efficiently.

Who Should Use This

This skill serves web developers loading 3D models into scenes, teams optimizing asset delivery for web performance, and creative developers managing complex 3D asset pipelines.

Why Use It?

Problems It Solves

Large 3D model files cause slow page loads without optimization. Incorrect texture settings produce washed-out or overly bright materials. Loading multiple assets without progress feedback leaves users staring at blank screens. Repeated asset loads waste bandwidth without caching.

Core Highlights

Model loader imports glTF files with complete scene data. Texture manager handles image loading with proper color space. Progress tracker reports download and parse status. Asset cache stores loaded resources for reuse.

How to Use It?

Basic Usage

// Asset loader
import * as THREE from
  'three';
import { GLTFLoader }
  from 'three/addons/'
  + 'loaders/'
  + 'GLTFLoader.js';
import { DRACOLoader }
  from 'three/addons/'
  + 'loaders/'
  + 'DRACOLoader.js';

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

const gltfLoader =
  new GLTFLoader();
gltfLoader
  .setDRACOLoader(
    dracoLoader);

async function loadModel(
  url, onProgress
) {
  return new Promise(
    (resolve, reject) => {
      gltfLoader.load(
        url,
        (gltf) =>
          resolve(gltf),
        (xhr) => {
          const pct =
            xhr.loaded
            / xhr.total
            * 100;
          if (onProgress)
            onProgress(
              pct);
        },
        (err) =>
          reject(err)
      );
    });
}

// const gltf =
//   await loadModel(
//     'model.glb',
//     p => console.log(
//       p + '%'));
// scene.add(
//   gltf.scene);

Real-World Examples

// Asset manager
import * as THREE from
  'three';
import { GLTFLoader }
  from 'three/addons/'
  + 'loaders/'
  + 'GLTFLoader.js';

class AssetManager {
  constructor() {
    this.gltfLoader =
      new GLTFLoader();
    this.texLoader =
      new THREE
      .TextureLoader();
    this.cache = {};
  }

  async loadGLTF(url) {
    if (this.cache[url])
      return this
        .cache[url];
    const gltf =
      await this
      .gltfLoader
      .loadAsync(url);
    this.cache[url] = gltf;
    return gltf;
  }

  loadTexture(
    url, colorSpace
  ) {
    if (this.cache[url])
      return this
        .cache[url];
    const tex =
      this.texLoader
      .load(url);
    tex.colorSpace =
      colorSpace ||
      THREE.SRGBColorSpace;
    this.cache[url] = tex;
    return tex;
  }

  dispose(url) {
    const asset =
      this.cache[url];
    if (!asset) return;
    if (asset.dispose)
      asset.dispose();
    delete this.cache[url];
  }

  disposeAll() {
    for (const url
      in this.cache
    ) {
      this.dispose(url);
    }
  }
}

const assets =
  new AssetManager();
// const gltf =
//   await assets
//   .loadGLTF('car.glb');
// const tex =
//   assets.loadTexture(
//     'wood.jpg');

Advanced Tips

Use Draco compression for glTF models to reduce file sizes by up to 90 percent for geometry data. Set texture colorSpace to SRGBColorSpace for diffuse maps and LinearSRGBColorSpace for normal maps. Preload critical assets and lazy-load secondary models to improve initial page load time.

When to Use It?

Use Cases

Load a product model with textures and display a progress bar during download. Build an asset manager that caches loaded models for reuse across scene changes. Optimize 3D file delivery with Draco compression and texture resizing.

Related Topics

Three.js, glTF, Draco compression, texture loading, asset management, 3D optimization, and web performance.

Important Notes

Requirements

Three.js with GLTFLoader addon for model importing. Draco decoder files hosted on the server for compressed geometry support. 3D models exported in glTF or GLB format from modeling tools.

Usage Recommendations

Do: use GLB binary format over separate glTF plus bin files to reduce HTTP requests. Compress textures to appropriate resolution for the display size needed. Dispose loaded assets when they leave the scene to free GPU memory.

Don't: load full-resolution textures for small viewport elements since this wastes memory. Block the render loop during asset loading since this freezes the interface. Skip error handling on load calls since missing assets should show fallback content.

Limitations

Large models require significant download time even with compression on slow connections. glTF does not support all features from every 3D modeling tool. Browser memory limits constrain the total size of loaded assets in a single page.