Tutorial three.js Teil 1

Bei der ersten Beispieldarstellung zur 3D-Animation mit WebGL und three.js ist der 3D-Charakter noch nicht ohne weiteres zu erkennen, denn es ist nur die Gitterdarstellung eines Quaders zu sehen. Die Darstellung erfolgt zwar in 3D-Perspektive, ließe sich aber auch mit einer "normalen" Canvas-Zeichnung realisieren.

Ich habe dieses Beispiel aber bewusst einfach gehalten, um zunächst die Grundlagen zu vermitteln. Schauen wir uns daher zunächst den kompletten Quellcode an:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Basisbeispiel 01 mit three.js</h1>
<p>Dieses Beispiel zeigt einen Quader, es gibt aber noch keine Animation.</p>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<script>
  var camera, scene, renderer;
  var geometry, material, mesh;
  var init = function () {
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth/1.5, window.innerHeight/1.5 );
    document.body.appendChild( renderer.domElement );
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 600;
    scene = new THREE.Scene();
    geometry = new THREE.CubeGeometry( 200, 100, 75 );
    material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true, wireframeLinewidth: 3 } );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
  }

  init();
  mesh.rotation.x = 500;
  mesh.rotation.y = 700;
  renderer.render( scene, camera );
</script>
</body>
</html>

Kommentare und Erklärungen zum Quellcode

Ich verwende hier immer HTML5-Dateien, dass ist jedoch nicht zwingend erforderlich. Mit:

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>

wird die three.js-JavaScript-Bibliothek aus cdnjs.com eingebunden. Man kann sie natürlich auch auf dem eigenen Webspace ablegen. Mit:

  var camera, scene, renderer;
  var geometry, material, mesh;

werden die erforderlichen Variablen belegt. Das sind:

camera - steht stellvertretend für den Betrachter
scene - ist gewissermaßen die Bühne, auf der das Objekt (oder die Objekte) dargestellt werden
renderer - der Zeichner, der alles darstellt
geometry - enthält alle zur Beschreibung des 3D-Modells notwendigen Angaben
material - die Oberfläche des Objektes
mesh - - führt 3D-Modell und Oberfläche zusammen

Mit init werden die Variablen initialisiert, mit Werten belegt. Mit

document.body.appendChild( renderer.domElement )

wird das von three.js erzeugte Canvas-Element in den DOM-Objektbaum der Webseite eingefügt. Einige Details der Initialisierung:

renderer

Möglich sind entweder WebGLRenderer oder CanvasRenderer. Letzterer zeichnet im Canvas-2D-Context, nutzt also nicht WebGL. Er ist lediglich als fallback-Lösung für einfache Szenen sinnvoll. Mit

renderer.setSize( window.innerWidth/1.5, window.innerHeight/1.5 )

wird die Größe der Canvas-Fläche festgelegt, in diesem Fall in Abhängigkeit von der Größe des Browserfensters.

camera

Es gibt PerspectiveCamera und OrthographicCamera. Letztere stellt die Szene in orthografischer Projektion dar und kommt nur selten zum Einsatz. Die perspektivische Kamara hat 4 Parameter:

der Öffnungswinkel, je größer dieser ist, desto mehr Szene wird abgebildet
das Seitenverhältnis, sinnvollerweise das Verhältnis der Abmessungen des browserfesnters
die vordere und hintere Begrenzungsebene. Was vor bzw. hinter diesen Ebenen liegt, wird nicht dargestellt.

Mit

camera.position.z = 600;

wird die Position der Kamera (des Betrachters) festgelegt.

geometry

Die three.js-Bibliothek verfügt über eine Reihe geometrischer Basisobjekte wie z.B. CubeGeometry, CylinderGeometry, TorusGeometry, TubeGeometry usw. Die einzelnen Parameter des jeweiligen Objektes richten sich nach dem Typ. Für CubeGeometry sind dies Breite, Höhe und Tiefe sowie optional die Anzahl der Segmente für die Breite, Höhe und Tiefe.

material

Diese Variable ist für die Oberfläche des Objektes zuständig. Im konkreten Fall wird lediglich ein Gitternetz in der Farbe Blau und mit einer Linienstärke von 3px verwendet.

mesh

Mit diesem Objekt werden geometrische Form und Oberfläche zusammengeführt.

scene.add( mesh )

fügt dann das so entstandene Gesamtobjekt der Scene hinzu.

skywalk-webdesign.de