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

three/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, compatible with browser, workers, and Node
• Class based, optimized for tree-shaking, no globals, exports instead of collections
• Typesafety with simple annotation-like types
• SemVer and NPM managed dependencies

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

1. Fork and clone the repo
2. Run yarn install to install dependencies
3. Create a branch for your PR with `git checkout -b pr-type/issue-number-your-branch-name beta
4. Let's get cooking! 👨🏻‍🍳🥓

Commit Guidelines

Be sure your commit messages follow this specification: https://conventionalcommits.org/en/v1.0.0-beta.4

Publishing

We use semantic-release-action to deploy the package. Because of this only certain commits will trigger the action of creating a release:

• chore will not release a new version
• fix: will create a 0.0.x version
• feat: will create a 0.x.0 version
• BREAKING CHANGE: will create a x.0.0 version