Three.js 3D rendering library for javascript #gamedev #game-engine #rendering #javascript

Mr.doob a6aaa8b2bf r137 (bis) (bis) (bis) (bis) (bis) 3 tahun lalu
.github 833395eb14 Upgrade `actions/setup-node` action and cache dependencies on CI (#22883) 3 tahun lalu
build e182314ced Updated builds. 3 tahun lalu
docs fe80a83fe5 s/THREE.Multiply/THREE.MultiplyOperation (#23338) 3 tahun lalu
editor 9b1fc44b2f r137 3 tahun lalu
examples b7d3aa2fc6 Examples: Fix webgl_worker_offscreencanvas. 3 tahun lalu
files f9ceca4ffe Make headers stand out in API reference (#22948) 3 tahun lalu
manual 664f1582f8 Manual: Hide export button. 3 tahun lalu
src 1e7bf91bdb Update WebGLUtils.js 3 tahun lalu
test ec303173f2 Test: Added webgl_effects_ascii to exception list. 3 tahun lalu
utils dad3a91433 Rollup: Updated license to 2022. (#23329) 3 tahun lalu
.editorconfig f1ba3a32ed Remove indent size from .editorconfig 6 tahun lalu
.gitattributes 5446f535d1 git should handle the line endings 7 tahun lalu
.gitignore 6bab8bdef3 test-treeshake: Add rollup-plugin-visualizer (#21657) 4 tahun lalu
.lgtm.yml 9c3b8dd8d2 add lgtm config (#23062) 3 tahun lalu
LICENSE 484f9e24f2 Update LICENSE (#23131) 3 tahun lalu
README.md 1dd47f6e82 README.md: HTTP => HTTPS (#23248) 3 tahun lalu
icon.png 9760d3d86b Optimize icon image (#23238) 3 tahun lalu
package-lock.json 1625f32ba1 Build: Generate three.cjs from rollup. 3 tahun lalu
package.json efbfc67edc r137 (bis) (bis) (bis) (bis) (bis) 3 tahun lalu

README.md

three.js

NPM Package Build Size NPM Downloads Language Grade

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 a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

ExamplesDocumentationWikiMigratingQuestionsForumSlackDiscord

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 './js/three.module.js';

let camera, scene, renderer;
let geometry, material, mesh;

init();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

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

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

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setAnimationLoop( animation );
	document.body.appendChild( renderer.domElement );

}

function animation( time ) {

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

	renderer.render( scene, camera );

}

If everything went 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

Releases