three.js

three.js

JavaScript-3D-Bibliothek

Ziel des Projekts ist die Erstellung einer benutzerfreundlichen, leichten, browserübergreifenden, universell einsetzbaren 3D-Bibliothek. Die aktuellen Builds enthalten nur einen WebGL-Renderer, aber WebGPU (experimentell), SVG- und CSS3D-Renderer sind auch als Add-ons verfügbar.

Beispiele – Dokumente – Handbuch – Wiki – Migration – Fragen – Forum – Discord

Verwendung

Dieser Code erstellt eine Szene, eine Kamera und einen geometrischen Würfel und fügt den Würfel der Szene hinzu. Anschließend wird ein WebGL Renderer für die Szene und die Kamera erstellt und dieser Ansichtsbereich zum Element document.body hinzugefügt. Abschließend wird der Würfel innerhalb der Szene für die Kamera animiert.

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

}

Wenn alles gut geht, sollten Sie das sehen.

Klonen dieses Repositorys

Das Klonen des Repos mit seinem gesamten Verlauf führt zu einem Download von ca. 2 GB. Wenn Sie nicht den gesamten Verlauf benötigen, können Sie den depth verwenden, um die Downloadgröße deutlich zu reduzieren.

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

Änderungsprotokoll

Veröffentlichungen