Tutorial three.js Teil 2

Im ersten Teil des Tutorials zu three.js habe ich den Grundaufbau erklärt. So sieht nun das Beispiel des animierten Objektes aus. Ich zeige hier auch wieder den kompletten Quellcode:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Basisbeispiel 02 mit three.js Quader mit Animation</h1>
<p>Dieses Beispiel zeigt einen Quader, der kontinuierlich animiert wird.</p>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js"></script>
<script>
  var camera, scene, renderer;
  var geometry, material, mesh;
  var init = function () {
    renderer = new THREE.WebGLRenderer ({antialias:true});//WebGLRenderer oder CanvasRenderer
    renderer.setSize( window.innerWidth/1.5, window.innerHeight/1.5 );
    document.body.appendChild( renderer.domElement );
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 500;
    scene = new THREE.Scene();
    cubegeometry = new THREE.CubeGeometry( 200, 200, 200 );
    cubematerial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2 } );
    cubemesh = new THREE.Mesh( cubegeometry , cubematerial );
    scene.add( cubemesh );
  }

  var animate = function () {
    requestAnimationFrame( animate );
    cubemesh.rotation.x = Date.now() * 0.0005;
    cubemesh.rotation.y = Date.now() * 0.001;
    renderer.render( scene, camera );
  }

  init();
  animate();

</script>
</body>
</html>

Kommentare und Erklärungen zum Quellcode

Die Initialisierung unterscheidet sich nur geringfügig von der im ersten Beispiel detailliert beschriebenen Version. Eine sehr wichtige Veränderung gibt es aber. Mit 

    renderer = new THREE.WebGLRenderer ({antialias:true});//WebGLRenderer oder CanvasRenderer

wird die Darstellung als WebGL-Grafik und nicht als zweidimensionales Canvas-Objekt gerendert. Dadurch wird die animation schneller und vor allem auch mit {antialias:true} qualitativ besser. An die Stelle von

  cubemesh.rotation.x = 500;
  cubemesh.rotation.y = 700;
  renderer.render( scene, camera );

mit festen Rotationsparametern und einem einmaligen Aufruf der render-Funktion tritt eine rekursive Funktion:

  var animate = function () {
    requestAnimationFrame( animate );
    cubemesh.rotation.x = Date.now() * 0.0005;
    cubemesh.rotation.y = Date.now() * 0.001;
    renderer.render( scene, camera );
  }

bei der die Rotationsparamter des Objektes kontinuierlich geändert werden und die Szene jedes Mal wieder neu gezeichnet wird. Die Animation besteht hier aus der Rotation der Objekte.

Der dritte Teil des Tutorials zeigt die Animation mehrerer Objekt, wobei auch die Veränderung der Position des 3D-Objektes zur Anwendung kommt.