three.js

trois.js

Bibliothèque JavaScript 3D

L’objectif du projet est de créer une bibliothèque 3D facile à utiliser, légère, multi-navigateurs et à usage général. Les versions actuelles incluent uniquement un moteur de rendu WebGL, mais les moteurs de rendu WebGPU (expérimental), SVG et CSS3D sont également disponibles sous forme de modules complémentaires.

Exemples — Docs — Manuel — Wiki — Migration — Questions — Forum — Discord

Usage

Ce code crée une scène, une caméra et un cube géométrique, et ajoute le cube à la scène. Il crée ensuite un moteur de rendu WebGL pour la scène et la caméra, et ajoute cette fenêtre à l'élément document.body . Enfin, il anime le cube dans la scène pour la caméra.

 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 tout se passe bien, vous devriez voir ça.

Cloner ce référentiel

Le clonage du dépôt avec tout son historique entraîne un téléchargement d'environ 2 Go. Si vous n'avez pas besoin de l'intégralité de l'historique, vous pouvez utiliser le paramètre depth pour réduire considérablement la taille du téléchargement.

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

Journal des modifications

Sorties