three.js

tres.js

Biblioteca 3D de JavaScript

El objetivo del proyecto es crear una biblioteca 3D de uso general, liviana y fácil de usar para varios navegadores. Las compilaciones actuales solo incluyen un renderizador WebGL, pero los renderizadores WebGPU (experimental), SVG y CSS3D también están disponibles como complementos.

Ejemplos — Documentos — Manual — Wiki — Migración — Preguntas — Foro — Discord

Uso

Este código crea una escena, una cámara y un cubo geométrico, y agrega el cubo a la escena. Luego crea un renderizador WebGL para la escena y la cámara, y agrega esa ventana gráfica al elemento document.body . Finalmente, anima el cubo dentro de la escena para la cámara.

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

}

Si todo va bien, deberías ver esto.

Clonando este repositorio

Clonar el repositorio con todo su historial da como resultado una descarga de ~2 GB. Si no necesita todo el historial, puede utilizar el parámetro depth para reducir significativamente el tamaño de la descarga.

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

Registro de cambios

Lanzamientos