Three.js, without the boilerplate

Build interactive 3D scenes that already work.

A tiny, type-safe toolkit on top of Three.js. Lighting, orbit controls, model loading, animation and click-to-pick interaction, wired together behind a fluent API, so you start from a scene instead of a blank canvas.

Reach for it when you're building product configurators, immersive stories, data visualisations, architectural walkthroughs: anything that needs to feel alive in 3D.

$ npm install 3d-scene-creator three Copy
Drag to orbit ยท hover & click the shapes
Batteries included

The fiddly parts, handled for you.

Everything below ships in the box and is fully configurable: sensible defaults first, full control when you need it.

โšก

Renders only when needed

The loop draws a frame only when something actually moves. Static scenes idle at zero, easy on laptops and battery.

๐Ÿ”—

Fluent, type-safe API

Every method returns this, so setup reads top to bottom. Full TypeScript types and JSDoc come bundled.

๐Ÿ’ก

A lighting rig that looks good

Hemisphere fill, key & fill directional lights, soft shadows and ACES tone mapping in one call, instantly presentable.

๐Ÿ“ฆ

glTF / GLB with clone caching

Load an asset once, clone it as many times as you like. Ideal for scattering props, instances and repeated geometry.

๐ŸŽฏ

Click & hover picking

Click, hover and right-click on meshes, with click-vs-drag discrimination, so orbiting never fires a stray click.

๐ŸŽฌ

Animation & 360ยฐ skyboxes

Tween colour, position, opacity and the camera with tween.js, and drop a panoramic image in as a background.

From zero to scene

A whole interactive scene in a single chain.

No scene graph wrangling, no render-loop plumbing. Compose what you need and let the library handle the rest.

  • โœ“ Lighting, controls and skybox in three calls
  • โœ“ Load a model and shadow it with one more
  • โœ“ Pick a mesh, animate it, done
  • โœ“ dispose() cleans up the renderer and memory
scene.ts
import { SceneCreator } from "3d-scene-creator";

// Lighting, orbit controls and a 360ยฐ backdrop, chained.
const scene = new SceneCreator(container)
  .addLighting()
  .addControls({ enableDamping: true })
  .addSkybox("/venice-sunset.jpg");

// Load once, drop it in, give it shadows.
const model = await scene.loadGLTF("/chair.glb");
model.name = "Chair";
scene.scene.add(model);
scene.applyShadows();

// Click a mesh โ†’ tween its colour over 0.6s.
scene.enablePicking((obj) => {
  scene.animateModelColor(obj.name, "#6366f1", 0.6);
});
Live examples

See what a few lines buys you.

Each example is a small, self-contained scene built with the same API the demo above uses. Open one and read the source.

Start from a scene that already works.

Add it to any Three.js project. It's a thin layer, not a framework. You keep full access to the scene, camera and renderer.