Tutorial three.js Teil 3

Während im vorigen Teil des Tutorials zu three.js nur ein Objekt durch Rotation animiert, sollen jetzt wzei Objekte parallel animiert werden, wobei bei einem Objekt auch die Position verändert werden soll. So sieht nun das Beispiel mit zwei animierten Objekten aus. Ich beschränke mich hier jetzt auf den JavaScript-Code:

  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();
    cube = new THREE.CubeGeometry( 200, 200, 200 );
    torus= new THREE.TorusGeometry(150,20,20,20,Math.PI * 1.5);
    material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2 } );
    cubemesh = new THREE.Mesh( cube , material );
    torusmesh = new THREE.Mesh( torus, material );
    scene.add( cubemesh );
    scene.add( torusmesh );
  }

  var animate = function () {
    requestAnimationFrame( animate );
    cubemesh.rotation.x = Date.now() * 0.0005;
    cubemesh.rotation.y = Date.now() * 0.001;
    torusmesh.rotation.y = Date.now() * 0.0001;
    torusmesh.rotation.z = Date.now() * 0.0003;
    torusmesh.position.x = torusmesh.position.x +1;
    torusmesh.position.z = torusmesh.position.z -1;
    //camera.position.z = camera.position.z +0.5;
    //camera.position.x = camera.position.x +0.5;
    renderer.render( scene, camera );
  }

  init();
  animate();

Kommentare und Erklärungen zum Quellcode

Die beiden Objekte sind ein Quader und ein Torus:

    cube = new THREE.CubeGeometry( 200, 200, 200 );
    torus= new THREE.TorusGeometry(150,20,20,20,Math.PI * 1.5);

Beim Torus sieht man, das wesentlich mehr Parameter angegeben werden. Es sind..............Beide werden gesonderten Mesh-Objekten zugewiesen:

    cubemesh = new THREE.Mesh( cube , material );
    torusmesh = new THREE.Mesh( torus, material );

Ich verwende hier identische Materialeigenschaften. Die beiden Mesh-Objekten werden dann der Szene hinzugefügt.

    scene.add( cubemesh );
    scene.add( torusmesh );

In der Animationsfunktion werden kann man beide Objekte mit unterschiedlichen Parametern rotieren lassen. Der Torus verändert außerdem noch kontinuierlich seine Position:

    torusmesh.position.x = torusmesh.position.x +1;
    torusmesh.position.z = torusmesh.position.z -1;

Fortsetzung

In den bisherigen Beispielen wurden ausschließlich Objekte verwendet, die als Drahtgitter dargestellt wurden. Das ist entspricht ja nicht der Realität. Objekte haben immer eine Oberfläche. Daher wird im nächsten Teil des Tutorials gezeigt, wie bei three.js Objekte mit einer Oberfläche (einer Textur) versehen werden.