three-stdlib

What is three-stdlib?

The three-stdlib package is a collection of utilities, helpers, and extensions for the three.js library. It provides additional functionality to simplify common tasks and extend the capabilities of three.js, making it easier to create complex 3D scenes and interactions.

What are three-stdlib's main functionalities?

Controls

The three-stdlib package includes various control utilities like OrbitControls, which allow users to easily navigate and interact with 3D scenes using mouse or touch inputs.

const { OrbitControls } = require('three-stdlib');
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

Loaders

It provides loaders for different 3D file formats, such as GLTFLoader for loading GLTF models, making it easier to import and use 3D assets in your scenes.

const { GLTFLoader } = require('three-stdlib');
const loader = new GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
  scene.add(gltf.scene);
});

Post-processing

The package includes tools for post-processing effects, such as EffectComposer, which allows you to apply various visual effects like bloom, depth of field, and more to your rendered scenes.

const { EffectComposer } = require('three-stdlib');
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new UnrealBloomPass();
composer.addPass(bloomPass);
composer.render();

Geometries

It offers additional geometry types, such as RoundedBoxGeometry, which are not available in the core three.js library, allowing for more complex and varied shapes in your 3D scenes.

const { RoundedBoxGeometry } = require('three-stdlib');
const geometry = new RoundedBoxGeometry(1, 1, 1, 4, 0.1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Other packages similar to three-stdlib

three

The three package is the core library for creating and displaying 3D graphics in the browser using WebGL. While three-stdlib extends its functionality, three.js itself provides the fundamental tools for 3D rendering, including scene management, cameras, lights, and basic geometries.

aframe

A-Frame is a web framework for building virtual reality (VR) experiences. It is built on top of three.js and provides an easy-to-use, declarative HTML-like syntax for creating 3D and VR scenes. While three-stdlib focuses on extending three.js, A-Frame abstracts it further to simplify VR development.

babylonjs

Babylon.js is a powerful, open-source 3D engine that provides a comprehensive set of tools for creating 3D applications, including support for WebGL, WebXR, and various 3D file formats. Compared to three-stdlib, Babylon.js is a standalone engine with its own ecosystem and features, offering an alternative to three.js and its extensions.

README

three-stdlib

Stand-alone version of threejs/examples/jsm written in Typescript & built for ESM & CJS.

Basic usage

npm install three-stdlib

// Export collection
import * as STDLIB from 'three-stdlib'
// Flatbundle
import { OrbitControls, ... } from 'three-stdlib'
// Pick individual objects
import { OrbitControls } from 'three-stdlib/controls/OrbitControls'

Problem

threejs/examples were always considered as something that you need to copy/paste into your project and adapt to your needs. But that's not how people use them. This causes numerous issues & little support.

Solution

• Real, npm/node conform esm modules with marked dependencies
• Class based, optimized for tree-shaking, no global pollution, exports instead of collections
• A build system for esm and cjs
• Single flatbundle as well as individual transpiles
• Typesafety with simple annotation-like types
• CI, tests, linting, formatting (prettier)

But most importantly, allowing the people that use and rely on these primitives to hold a little stake, and to distribute the weight of maintaining it.

Let's give jsm/examples the care it deserves!

How to contribute

If you want to get involved you could do any of the following:

• Create amazing stories for these examples for our dedicate storybook
• Convert some of the files to Typescript
• Add new examples for the library you think could be awesome for others