three.js README

The project's README from github.com/mrdoob/three.js. As one markdown file: README.md.

three.js

JavaScript 3D library

The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include WebGL and WebGPU renderers but SVG and CSS3D renderers are also available as addons.

Examples — Docs — Manual — Wiki — Migrating — Questions — Forum — Discord

Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// animation

function animate( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

If everything goes well, you should see this.

Cloning this repository

Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.

git clone --depth=1 https://github.com/mrdoob/three.js.git

Change log

webaudio

Searching Database…

116.6K ·GitHub

What is this?

It's a JavaScript 3D library for the browser: the project aims to be easy-to-use, lightweight, cross-browser and general-purpose. Around since 2010, now over 116,000 GitHub stars.

Is it a ready-made app, or something I use in my own code?

A library you import into your own JavaScript code, not a standalone app. The main builds ship WebGL and WebGPU renderers; SVG and CSS3D renderers come as addons.

What does the smallest working example look like?

The README's Usage section is the recipe: create a scene, add a camera and a cube, attach a renderer's viewport to the page, then animate the cube in a loop.

Does it pull in other packages when I install it?

No. The package ships with zero runtime dependencies; you just need a browser with WebGL support to render anything.

Any pitfalls if I clone the repo to poke around?

Just the size: cloning with full history downloads about 2 GB, so pass the depth parameter to shrink it.

Can it do VR and AR, or only flat 3D?

Yes — WebXR, virtual-reality and augmented-reality are all among the project's GitHub topics, so immersive browser content is in scope alongside ordinary 3D rendering.

What are similar projects?

engine, Babylon.js, aframe, awesome-opus5-5-videos, pixijs, sylva, react-three-fiber, zdog

Which topics is it in?

webaudio, augmented-reality, webgl2, virtual-reality, games, cross-browser, webgpu, html5, threejs, canvas, webgl, rendering

Creator: mrdoob
Size: 1.6 GB
Stars: 116.6K
Updated: CommitOct 17 Releaser186Sep 24
Age: 16y
Commits · 90 Days