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'

Problem

threejs/examples are usually regarded as something that you copy/paste into your project and adapt to your needs. That's not how people use it, and this has caused numerous issues in the past.

Solution

• A build system for esm and cjs
• Version managed dependencies
• Class based, optimized for tree-shaking, no globals, exports instead of collections
• Single flatbundle as well as individual transpiles
• Typesafety with simple annotation-like types
• CI, tests, linting, formatting (prettier)

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

How to contribute

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

• Help to maintain and sync the existing primitives
• Create stories for these examples for our dedicated storybook
• Convert some of the files to Typescript
• Add new examples for the library you think could be helpful for others