ThingJS 3D Engine

npm-size

ThingJS 3D Engine (t3d) is a lightweight, web-first, and extendable 3D rendering library. It is used by ThingJS for web3d rendering, but can also be used as a standalone library.

Examples — Docs — Discord

Import

Use t3d.js or t3d.min.js in your page:

<script src="https://github.com/uinosoft/t3d.js/raw/dev/t3d.min.js"></script>

or import as es6 module:

import * as t3d from 't3d.module.js';

Npm

t3d is published on npm. To install, use:

npm install t3d --save

This will allow you to import t3d entirely using:

import * as t3d from 't3d';

or individual classes using:

import { Scene, Renderer } from 't3d';

Since v0.2.0, the JavaScript files in examples/jsm can be imported like this:

import { OrbitControls } from 't3d/addons/controls/OrbitControls.js';

CDN

Usage

Draw a simple cube:

const width = window.innerWidth || 2;
const height = window.innerHeight || 2;

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const gl = canvas.getContext('webgl2', {
  antialias: true,
  alpha: false
});
const renderer = new t3d.WebGLRenderer(gl);
renderer.setClearColor(0.1, 0.1, 0.1, 1);
const backRenderTarget = new t3d.RenderTargetBack(canvas);

const scene = new t3d.Scene();

const geometry = new t3d.BoxGeometry(8, 8, 8);
const material = new t3d.PBRMaterial();
const mesh = new t3d.Mesh(geometry, material);
scene.add(mesh);

const ambientLight = new t3d.AmbientLight(0xffffff);
scene.add(ambientLight);

const directionalLight = new t3d.DirectionalLight(0xffffff);
directionalLight.position.set(-5, 5, 5);
directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
scene.add(directionalLight);

const camera = new t3d.Camera();
camera.position.set(0, 10, 30);
camera.lookAt(new t3d.Vector3(0, 0, 0), new t3d.Vector3(0, 1, 0));
camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);
scene.add(camera);

function loop(count) {
  requestAnimationFrame(loop);

  mesh.euler.y = count / 1000 * .5; // rotate cube

  scene.updateMatrix();
  scene.updateRenderStates(camera);
  scene.updateRenderQueue(camera);

  renderer.setRenderTarget(backRenderTarget);
  renderer.clear(true, true, false);
  renderer.renderScene(scene, camera);
}
requestAnimationFrame(loop);

Extensions

t3d-effect-composer - Post Effects extension for t3d.js.
t3d-particle - This is a particle system developed based on t3d.js.
t3d-pano - Panorama extension for t3d.
t3d-3dtiles - A 3dtile extension based on t3d.js.
t3d-dynamic-sky - Dynamic sky addon for t3d.
t3d-gaussian-splatting - A t3d-based implementation of 3D Gaussian Splatting.

Tools

t3d-model-viewer - A Model Viewer based on t3d.js and t3d-effect-composer.
t3d-particle-editor - A particle editor based on t3d.js and t3d-particle.
t3d-ibl-baker - This is a simple tool to bake IBL maps for t3d.

Contributing

Please make sure to read the Contributing Guide before making a pull request.

uinosoft / t3d.js

readme