Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

t3d

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

t3d

t3d.js is a web-first, light weight, extendable 3D rendering library.

  • 0.2.0-beta.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
decreased by-63.64%
Maintainers
1
Weekly downloads
 
Created
Source

ThingJS 3D Engine

NPM Package npm-size Issues DeepScan grade

ThingJS 3D Engine (t3d) is a web-first, light weight, extendable 3D rendering library.

Used by ThingJS for web3d rendering, but also available standalone.

ExamplesDocumentationDiscord

Import

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

<script src="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';

After v0.1.2, the js files in examples/jsm can be imported like this:

import { OrbitControls } from 't3d/examples/jsm/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

Build

Use npm to build:

npm install
npm run build

Keywords

FAQs

Package last updated on 28 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc