Tutorials

Part 2 - Einführung in die WebGL Entwicklung mit Three.js.

WebGL Tutorial ( part II ) Erstellen und Anzeigen eines einfachen 3d Körpers

In Diesen Teil des Tutorials wollen wir ein Boden und die möglichkeit sich im 3D Raum zu bewegen hinzufügen.
Desweiteren wollen wir Die Möglichkeit dass sich das "Render-Fenster" dem "Browser-Fenster" anpasst.

1. Einbinden des script´s

<script type="text/javascript">
init();
animate();
//Variablen inititalisieren
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var kamera;
var scene;
var zeichnen;
var steuerung;

function init() {
	//Erzeugen einer Szene
    scene = new THREE.Scene();
						 
	// Erzeugt Nebel
	//scene.fog = new THREE.FogExp2( 0xcccccc, 0.001 );

    //Erzeugen einer Kamera. Man benötigt mindestens eine Kamera.
    kamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100000 );
    kamera.position.z = 700;
	kamera.position.y = 900;
	kamera.rotation.x = -0.78;

    //Hinzufügen der Kamera zur Szene
    scene.add( kamera );
						 
	 //Hinzufügen der Kamera-Steuerung
	steuerung = new THREE.OrbitControls( kamera );
	steuerung.addEventListener( 'change', render );

	 // licht --------------------------------------------------------------------------
	licht = new THREE.AmbientLight( 0xefefef );
	scene.add( licht );
						 
	// Boden --------------------------------------------------------------------------
    //Erzeugung des Materials für den Boden
	var material1 = new THREE.MeshBasicMaterial( { color: 0xfff000, wireframe: true } );
	 //Erzeugung der Gemotrie / Boden
	boden = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 10, 10 ), material1 );
	boden.position.y = - 150;
	boden.rotation.x = - Math.PI / 2;
         //Hinzufügen des Bodens zur Szene
	scene.add( boden );

	 // Kugel --------------------------------------------------------------------------
     //Erzeugung des Materials für die Kugel
     var material2 = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
	 //Erzeugung der Gemotrie / Kugel
     kugel = new THREE.Mesh( new THREE.SphereGeometry( 150, 20, 20 ), material2 );
     //Hinzufügen der Kugel zur Szene
     scene.add( kugel );

     //Hier wird ein WebGLRenderer verwendet.
     zeichnen = new THREE.WebGLRenderer( { antialias: true } );
		
     //Grösse der Zeichenflaeche
     zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );

     //Erzeugtes Canvas Element in den body einfügen. / 

     document.getElementById('webGL').appendChild( zeichnen.domElement );		                 
						
						 
     window.addEventListener( 'resize', onWindowResize, true );
		                 
     render();          

}
//Diese Funktion passt die Zeichefläche an das Browserfenster an.
function onWindowResize() {

	windowHalfX = window.innerWidth / 1.4;
	windowHalfY = window.innerHeight / 1.4;

	kamera.aspect = window.innerWidth / window.innerHeight;
	kamera.updateProjectionMatrix();

	zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );
                         
	render();
			            
}
//Animation	
function animate() {

	requestAnimationFrame( animate );
	steuerung.update();

}
						
//Ausgabe der 3D Welt
function render() {
    zeichnen.render( scene, kamera );
}
</script>

Das Resultat dieses Tutorials können Sie sich hier anschauen. Sehen Sie hier keine rote Kugel unterstützt ihr Browser kein WebGL.
Die Dateien zum nachvollziehen des Tutorials können Sie sich im Download::Bereich herunterladen.
Navigation mit der Maus, linke Maustaste gedrückt halten um sich im Raum um die Kugel zu drehen. Mit der mittleren Maustaste können Sie "zoomen".
Im 3. Teil des Tutorials fügen wir ein eigenes 3D-Modell ein.