Three.js

Bei Three.js handelt es sich um eine Javascript-library, die es ermöglicht einfacher 3D-Grafiken oder 3D-Spiele zu programmieren. Einbinden lässt sie sich in eine .html-Datei z.B. mit

<script src="www.ratsgymnasium-pe.de/Training/js/threejs/Three.js"></script>

Ein Beispielcode ist folgender:

var scene = new THREE.Scene(); // erzeugt eine Szene, in der alles passieren soll
 
var verhaeltnis =window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75,verhaeltnis,1,10000); // erzeugt die Kamera
camera.position.z =500; // Positioniert Kamera
scene.add (camera);     // Kamera wird zur Szene hinzugefügt
 
var renderer = new THREE.CanvasRenderer(); // erzeugt den Renderer
// ein renderer erzeugt die dinge, die die Kamera aufnimmt
renderer.setSize(window.innerWidth, window.innerHeight); // setzt Größe des Renderers
document.body.appendChild(renderer.domElement); // fügt dem body der Seite den Inhalt zu
 
renderer.render(scene,camera);

Diese Seite ist jedoch vollkommen leer, weil wir der Szene keine Elemente hinzugefügt haben. Ein Objekt besteht dabei immer aus einer Form , z.B.

var kugelform = new THREE.SphereGeometry(100); 

und einem Material, dass die Form umhüllt, z.B.

 var kugelmaterial = new THREE.MeshNormalMaterial();

Als letztes setzt man die Bestandteile zusammen

 var kugel = new.THREE.Mesh(kugelform,kugelmaterial);

und setzt den gesamten Code vor dem rendern der Szene und der Camera. Somit sieht man eine Kugel.

Die Funktion THREE.SphereGeometry(x,y,z) kann einen oder drei Inputs haben. Der erste (oder einzige) Input beschreibt die Größe der Kugel. Der zweite ist die Anzahl der Segmente um die Kugel herum (von links nach rechts) und der dritte Input schließlich die Anzahl der Segmente von oben nach unten.