WebGL 3D Model Viewer Three.js

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.

 

Posted in Three.js | Leave a comment

3D Viewer erstellen mit Three.js

  1. Für den 3D Viewer mit Three.js benötigt man eine HTML Editor sowie das Library three.min.js auf dem Server.
  2. Erstelle eine neue HTML-Datei
    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″ />
    <title>WebGL Model Viewer Demo</title>
    </head>
    <body>
    </body>
    </html>
  3. Im Body Bereich laden wir Three.js mit
    <script src=”../build/three.min.js”></script>
  4. Wir definieren den Bereich in dem unser 3D Modell angezeigt werden soll mit
    <div id=”container”></div>
  5. Mit dem Befehl Script starten wir die Szene und definieren alle Variablen
    <script>
    var camera, scene, renderer, model, container;
  6. In der Funktion init werden alle Bestandteile der Szene geladen. Wir haben eine leere Bühne die wir bespielen wollen. In der Funktion animate legen wir fest was auf dieser Bühne geschehen soll. Die Funktionen werden auf gerufen.
    init();
    animate();
  7. Jetzt schreiben wir die Funktion init .
    function init() {
    Eine neue Szene wird gestartet.
    scene = new THREE.Scene();
    Um die Szene zeigen zu können benötigen wir eine Kamera. In der erste Zeile legen wir den Kameratyp fest in der zweiten die Position x,y,z . Hierzu liefert Three.js ein Beispiel.
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.set( 0, 0, 100 );
    Zu einer Szene gehört auch Licht, ambient steht für Ausleuchtung der gesamten Szene in diesem Fall 6 x f gleich weiß.
    var ambient = new THREE.AmbientLight( 0xffffff );
    scene.add( ambient );
    Jetzt kommt das wichtigste unser Darsteller, die Badeente. Mit dem THREE.JSONLoader wird das Model geladen, Geometrie und Material abgefragt. Wir legen nur die Rotation und Skalierung fest. Per add Befehl fügen wir das Modell hinzu.
    loader = new THREE.JSONLoader();
    loader.load( ‘models/ente.Circle.js’, function ( geometry, materials ) {
    model = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    model.rotation.set( -1.3 , 0 , 1 )
    model.scale.set( 20, 20, 20);
    scene.add( model );
    } );
    Dieser Teil der init Funktion definiert die Art des renderns fest und steuerte das verhalten des Fensters im Browser.
    renderer = new THREE.WebGLRenderer( { antialias: false } );
    renderer.setSize( window.innerWidth, window.innerHeight );container = document.createElement( ‘div’ );
    document.body.appendChild( container );
    container.appendChild( renderer.domElement );window.addEventListener( ‘resize’, onWindowResize, false );}function onWindowResize() {renderer.setSize( window.innerWidth, window.innerHeight );
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();}
  8. Zum Schluß schreiben wir die Funktion animate. In den ersten zwei Zeilen legen wir die Drehbewegung um die Z Achse fest. Die weitern zwei Zeilen starten das rendern berechnet unserer Szene.
    function animate() {
    var time = Date.now() * 0.0005;
    if ( model ) model.rotation.z -= 0.01;
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    }
    </script>
  9. Die Datei wird auf dem Server übertragen und das Ergebnis sollte so aussehen.
    Three.js Standard Szene

    Three.js Standard Szene mit dem 3D Modell Badeente

    Hier geht es zum Beispiel. unser 3D Viewer mit Three.js

Posted in Three.js | Leave a comment

3D Modell erstellen mit Blender

Blender ist das freie 3D-Modellierungs- und Animationsprogramm dieses Programm hat auf den WebGL Standard gewartet. Zu Blender gibt es sehr viele und gut Tutorials (Anleitungen), auf meiner Linkseite findet ihre einige interessante Links dazu. Ich möchte nur an Hand von Beispielen zeigen was bei der Erstellung für ein WebGL Modell zu beachten ist.

Im Archiv von Three.js ist ein Verzeichnis Blender Exportscript. Mit diesem Script habe ich die Badeente exportiert s.h. Artikel Three.js WYSIWYG-Editor .

Blender Export Three.js

Blender Export Three.js

In diesen Videos möchte ich zeigen wie ich die Badeente modelliert habe.

Teil 1 modellieren des Körpers.

Teil 2 Augen einfügen und Material zuweisen

Beide Blend-Files biete ich auch zum Download als zip Datei an.

Modell Badeente zu Video Teil 1

Modell Badeente zu Video Teil 2

Posted in Blender | Leave a comment

Three.js WYSIWYG-Editor

Im Download Archiv von Three.js ist auch ein WYSIWYG-Editor enthalten. Dieser WYSIWYG-Editor eignet sich sehr gut eigene 3D Modelle in Szene zu setzten, ohne Programmkenntnnise.

3D Modelle erstellt man mit Blender. Dies ist ein freies 3D-Modellierungs- und Animationsprogramm. Mit dem Exportscript von Three.js für Blender werden die 3D Modelle im Json(.js) Format exportiert.

Ich habe eine Badeente als Beispiel erstellt. Das File downloaden und auf dem Desktop speichern, den Editor starten. Mit Drag and Drop das 3D Modell in den Editor ziehen. Jetzt erscheint im Editor ein schwarzes Modell, da das Licht fehlt. Über den Menüpunkt Add den Menüpunkt Hemispherelight auswählen und es werde Licht, die Farbe des Lichtes einstellen.

Badeente im Json Format (.js) (RMT Link speichern unter)

Three.js Editor starten

Three.js WYSIWYG-Editor

In den Three.js Editor eingefügtes 3D Modell

Das Modell mit der Maus auswählen und im Menü rechts sind alle Einstellungen zum Positionieren und Skalieren verfügbar.

Jetzt wollen wir, daß die Ente im Wasser schwimmt. Menü links oben Add Plane wählen. Diese Plane unter die Ente positionieren. Die Wasser-Textur downloaden.

wasser textur zum download

Texturen für 3D Modelle müssen immer die Grössen 512×512 oder 1024×1024 u.s.w. haben.

Bei den Materialeinstellungen für Plane Map Datei Wasser Textur wählen und Bump Map Wasser Textur wählen. Und jetzt sollte es so aussehen, wie im Bild unten.

Badeente im Wasser Three.js Editor

Badeente im Wasser Three.js Editor

 

 

Posted in Three.js | 1 Comment

Three.js Framework

Three.js ist eine Library (Programmbibliothek) oder ein Framework (Programmiergerüst) in Javascript für die Darstellung von 3D Szenen im WebGL Standard. Benötigt wird ein Server mit FTP Zugang und einer Domain. Die aktuelle Version steht auf  Threejs.org zur Verfügung. Auf den Server werden die Verzeichnisse examples und build übertragen, alle Beispiele (ca. 120 MB) müssten jetzt auch auf deinem Server laufen. Die Beispiele sind auch die beste Grundlage für eigene Projekte. Grundkenntnis in Programmierung von HTML und Javascript werden voraus gesetzt.

Es geht auch erst einmal mit dem HTML Editor zum Ausprobieren, hier ist das Grundgerüst eines three.js Projekts vorgegeben.

HTML Editor

Three.js HTML Editor

Three.js HTML Editor

In diesem Editor werden alle Änderungen im Quellcode direkt auf dem Canvas ( Html5 Leinwand) ausgeführt. Der Aufbau einer Scene besteht aus Kamera (camera) und dem Objekt (Mesh). Ein Objekt besteht aus einer Geometrie und dem Material. In der Funktion init wird die Scene zusammengestellt. In der Funktion animate wird das Verhalten des Objekts definiert und die render Funktion ausgeführt. In dieser Funktion wird die Scene berechnet.

 

 

Posted in Three.js | Leave a comment