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.