Tutorial three.js Teil 4

Während in den bisherigen Teilen des Tutorials zu three.js nur Objekt mit einem Gitternetz verwendet wurden, zeigt dieses Beispiel die Animation eines Objektes mit Textur. So sieht nun das Beispiel eines animierten Objektes mit texturierter Oberfläche aus. Dies ist der komplette 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 );
    cubeTexture = new THREE.ImageUtils.loadTexture("/media/three-beispiel-04.jpg");
    cubeMaterial = new THREE.MeshBasicMaterial({
                   map:cubeTexture ,
                   side:THREE.SingleSide
    });
    cubemesh = new THREE.Mesh( cube , cubeMaterial );
    scene.add( cubemesh );
  }

  var animate = function () {
    requestAnimationFrame( animate );
    cubemesh.rotation.y = Date.now() * 0.0001;
    cubemesh.rotation.z = Date.now() * 0.0008;
    renderer.render( scene, camera );
  }
  init();
  animate();

Kommentare und Erklärungen zum Quellcode

Im Grunde gibt es nur einen entscheidenden Unterschied zu den bisherigen Beispielen, bei denen immer ein Gitternetz verwendet wurde. Mit

    cubeTexture = new THREE.ImageUtils.loadTexture("/media/three-beispiel-04.jpg");

wird eine Grafikdatei als Textur geladen und mit

    cubeMaterial = new THREE.MeshBasicMaterial({
                   map:cubeTexture ,
                   side:THREE.SingleSide

wird dieses Textur dem Material zugewiesen. Alle anderen Bestandteile des JavaScript-Codes sind identisch oder stellen nur marginale Modifizierungen dar.

(Semi-)Transparente Textur

Im ersten Beispiel habe ich eine Texturgrafik verwendet, die den Abmessungen des Objektes (ein Würfel) entspricht. Diese Übereinstimmung ist jedoch nicht notwendig. three.js kann diese Textur auch auf ein ganz anders geformtes Objekt legen. Ich habe einfach für ein Torusobjekt

    torusTexture = new THREE.ImageUtils.loadTexture("/media/three-beispiel-04.jpg");
    torusMaterial = new THREE.MeshBasicMaterial({
                   map:torusTexture ,
                   transparent: true, 
                   opacity: 0.5,
                   side:THREE.DoubleSide
    });

definiert. In diesem Fall soll die Textur aber teilweise transparent sein transparent: true, opacity: 0.5 und doppelseitig side:THREE.DoubleSide verwendet werden. Letzteres verbessert die Darstellung beim Torus. Beispiel mit zwei animierten Objektes, jeweils mit texturierter, teilweise transparenter Oberfläche

Objekte an Fenstergröße anpassen

Im zweiten Beispiel auf dieser Seite habe ich noch eine weitere Ergänzung vorgenommen, die nichts mit three.js im engeren Sinne zu tun hat. Sie betrifft die Anpassung der Größe der dargestellten Objekte. Bei den bisherigen Beispielen veränderten die Objekte ihre Größe nicht, wenn der Nutzer die Größe des Browserfensters änderte. Ich habe jetzt in diesem Beispiel hierzu eine Anpassung vorgenommen. Im JavaScript-Initialisierungsbereich habe ich einen sogenannten EventListener eingefügt, der auf die Veränderung der Größe des Browserfensters reagiert

    window.addEventListener( 'resize', onWindowResize, false );

und die Funktion onWindowResize aufruft. Diese muss natürlich auch im JavaScript-Code vorhanden sein. Sie sieht so aus:

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth/1.5, window.innerHeight/1.5 );
  }

Es werden also sowohl die Parameter der Kamera und auch des Renderer-Fensters angepasst.