three.js

três.js

Biblioteca JavaScript 3D

O objetivo do projeto é criar uma biblioteca 3D de uso geral, fácil de usar, leve, para vários navegadores. As compilações atuais incluem apenas um renderizador WebGL, mas os renderizadores WebGPU (experimental), SVG e CSS3D também estão disponíveis como complementos.

Exemplos — Documentos — Manual — Wiki — Migração — Perguntas — Fórum — Discord

Uso

Este código cria uma cena, uma câmera e um cubo geométrico e adiciona o cubo à cena. Em seguida, ele cria um renderizador WebGL para a cena e a câmera e adiciona essa janela de visualização ao elemento document.body . Por fim, anima o cubo dentro da cena para a câmera.

 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 ) ;

}

Se tudo correr bem, você deverá ver isso.

Clonando este repositório

Clonar o repositório com todo o seu histórico resulta em um download de aproximadamente 2 GB. Se você não precisar de todo o histórico, poderá usar o parâmetro depth para reduzir significativamente o tamanho do download.

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

Registro de alterações

Lançamentos