Tutorials

UiKit, WebGL...

WebGL Tutorial ( part 1 )

Eine kurze und einfache Einführung in die WebGL Entwicklung mit Three.js.

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

Mit Hilfe von WebGL lassen sich 3D Animation, Spiele, Webseiten komplett in 3D erstellen. Technisch ist WebGL die Verbindung von Javascript und OpenGL. WebGL wird erst von wenigen Browser unterstützt:

  • Firefox ab v4.0
  • Chrome ab 9.0
  • Alphaversion von Opera 12

Zur 3D Programmierung im Browser mit WebGL sollten man auf jeden Fall ein Framework benutzen. Ich habe mich für three.js (aktuell v.50) entschieden.

Lerning by doing. Fangen wir an.

  • 1. Einbinden des script´s
<script src="/three.min.js"></script>

Die Codezeile muss in den Kopfteil des HTML-Dokumentes, <head> und </head>-Tags, eingefügt werden. Achten Sie auf das richtige Verzeichnis. Etwa so:

<html>
 <head>
  <title>Mein Dokument</title>
  <script src="/three.min.js"></script>
 </head>
<body>
...
  • 2. Das eigenliche script
<script type="text/javascript">
 init();
   //Variablen inititalisieren
 var SCREEN_WIDTH = window.innerWidth;
 var SCREEN_HEIGHT = window.innerHeight;
 var kamera;
 var scene;
 var zeichnen;

  function init() {
    //Erzeugen einer Szene, wenn Seite vollständig geladen ist
   scene = new THREE.Scene();

    //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 );

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

    //Hier wird ein WebGLRenderer verwendet.
   zeichnen = new THREE.WebGLRenderer();
		
    //Grösse des Renderers auf ca 1/4 der Fenstergrösse des Browsers setzen
   zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );


    //Erzeugtes Canvas Element in den body einfügen. / <div id="webGL"></div>
   document.getElementById('webGL').appendChild( zeichnen.domElement );
		
   render();
}
   //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.
Im 2. Teil des Tutorials fügen Sie einen Boden ein und Sie können Sich im Anschluss mit der Maus im "Raum" bewegen.


1000 Zeichen übrig

Allgemeine Geschäftsbedingungen

Abonnieren

Melden

Empfehlung

SuperClix.de
Über 650+ verschiedene Partnerprogramme für Ihre Homepage,
jetzt kostenlos anmelden !

themeforest.net
themes & templates

graphicriver.net
Grafik & Vectors