Rsbuild Three.js Template

A modern template for Three.js projects with TypeScript support and Rsbuild as the build tool. This template provides a streamlined setup for 3D web applications with built-in support for model loading.

Features

• 🚀 Three.js for 3D rendering
• ⚡️ Rsbuild for fast builds
• 📦 Asset loading support (.gltf, .glb, .bin)
• 🔍 TypeScript for type safety
• 🎨 Public folder for static assets

Setup

Install the dependencies:

npm install

Get Started

Start the dev server:

npm run dev

Build the app for production:

npm run build

Preview the production build locally:

npm run preview

Project Structure

├── public/            # Static assets (models, textures)
│   ├── models/       # 3D models (.gltf, .glb, .bin)
│   └── resources/    # Resources/Textures
├── src/
│   ├── Scene.ts     # Main Three.js scene setup
│   ├── index.ts     # Entry point
│   └── index.css    # Global styles
└── rsbuild.config.ts # Rsbuild configuration

Loading 3D Models

Place your 3D models in the public/models directory. You can load them in your scene like this:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
loader.load(
  '/models/your-model.gltf',
  (gltf) => {
    scene.add(gltf.scene);
  },
  (progress) => {
    console.log('Loading progress:', (progress.loaded / progress.total) * 100 + '%');
  },
  (error) => {
    console.error('Error loading model:', error);
  }
);

Supported File Types

• .gltf - GL Transmission Format
• .glb - Binary GL Transmission Format
• .bin - Binary data files (usually accompanying .gltf files)
• Other static assets (textures, images, etc.)

License

MIT