Im letzten Beitrag habe ich gezeigt wie mit Three.js ein 3D Model Viewer für WebGL programmiert wird. Dieser zeigt ein sich drehendes Model s.h. Beispiel. Jetzt machen wir diesen 3D Viewer interaktiv, in diesem Viewer können wir das Model mit der Maus drehen , skalieren und mit der rechten Maustaste verschieben.

Ein Beispiel für die Steuerung mit der Maus ist auch im example Ordner s.h. Trackballcontrols enthalten, diese Steuerung benutze ich für den 3d Viewer.

1. Nach der Zeile
   <script src=“../build/three.min.js“></script>
   wird die Zeile
   <script src=“js/controls/TrackballControls.js></script>
   eingefügt. Dieses Script muß auch im Verzeichnis js/controls/ liegen.
2. Die Variablenliste wird um die Variable controls erweitert.
   var controls;
3. In die Funktion init fügen wir die Steuerung der Maus ein.
   // Maus controls definieren
   controls = new THREE.TrackballControls( camera );
   controls.rotateSpeed = 1.0;
   controls.zoomSpeed = 1.2;
   controls.panSpeed = 0.8;
   controls.noZoom = false;
   controls.noPan = false;
   controls.staticMoving = true;
   controls.dynamicDampingFactor = 0.3;
   controls.keys = [ 65, 83, 68 ];
   controls.addEventListener( ‚change‘, render );
4. In die Funktion onWindowResize() schreiben wir die Zeile
   controls.handleResize();
   mit dieser Zeile ist sichergestellt das die Maus Befehle auf das Fenster angewendet werden.
5. Die Maus Befehle müssen vor dem rendern abgefragt werden, daher lagern wir das rendern mit eigener Funktion nach der animate Funktion aus.
   function animate() {
   //Model Drehung
   var time = Date.now() * 0.0005;
   if ( model ) model.rotation.z -= 0.01;
   // Maus controls
   controls.update();
   requestAnimationFrame( animate );
   render();
   }
   function render() {
   renderer.render( scene, camera );
   }

 Das Ergebnis eines interaktiven WebGL 3D Model Viewers könnt ihr hier sehen.