- Für den 3D Viewer mit Three.js benötigt man eine HTML Editor sowie das Library three.min.js auf dem Server.
- Erstelle eine neue HTML-Datei
<!doctype html>
<html>
<head>
<meta charset=“utf-8″ />
<title>WebGL Model Viewer Demo</title>
</head>
<body>
</body>
</html> - Im Body Bereich laden wir Three.js mit
<script src=“../build/three.min.js“></script> - Wir definieren den Bereich in dem unser 3D Modell angezeigt werden soll mit
<div id=“container“></div> - Mit dem Befehl Script starten wir die Szene und definieren alle Variablen
<script>
var camera, scene, renderer, model, container; - 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(); - 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();} - 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> - Die Datei wird auf dem Server übertragen und das Ergebnis sollte so aussehen.
Three.js Standard Szene mit dem 3D Modell Badeente Hier geht es zum Beispiel. unser 3D Viewer mit Three.js
