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
  1. <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:

  1. <html>
  2. <head>
  3. <title>Mein Dokument</title>
  4. <script src="three.min.js"></script>
  5. </head>
  6. <body>
  7. ...
  • 2. Das eigenliche script
  1. <script type="text/javascript">
  2. init();
  3. //Variablen inititalisieren
  4. var SCREEN_WIDTH = window.innerWidth;
  5. var SCREEN_HEIGHT = window.innerHeight;
  6. var kamera;
  7. var scene;
  8. var zeichnen;
  9.  
  10. function init() {
  11. //Erzeugen einer Szene, wenn Seite vollständig geladen ist
  12. scene = new THREE.Scene();
  13.  
  14. //Erzeugen einer Kamera. Man benötigt mindestens eine Kamera.
  15. kamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100000 );
  16. kamera.position.z = 700;
  17. kamera.position.y = 900;
  18. kamera.rotation.x = -0.78;
  19.  
  20. //Hinzufügen der Kamera zur Szene
  21. scene.add( kamera );
  22.  
  23. // Kugel
  24. //Erzeugung des Materials für die Kugel
  25. var material1 = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
  26. //Erzeugung der Gemotrie / Kugel
  27. kugel = new THREE.Mesh( new THREE.SphereGeometry( 150, 20, 20 ), material1 );
  28. //Hinzufügen der Kugel zur Szene
  29. scene.add( kugel );
  30.  
  31. //Hier wird ein WebGLRenderer verwendet.
  32. zeichnen = new THREE.WebGLRenderer();
  33.  
  34. //Grösse des Renderers auf ca 1/4 der Fenstergrösse des Browsers setzen
  35. zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );
  36.  
  37.  
  38. //Erzeugtes Canvas Element in den body einfügen. / <div id="webGL"></div>
  39. document.getElementById('webGL').appendChild( zeichnen.domElement );
  40.  
  41. render();
  42. }
  43. //Ausgabe der 3D Welt
  44. function render()
  45. {
  46. zeichnen.render( scene, kamera );
  47. }
  48. </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.

1 Kommentar

  • catherinebutler

    gepostet von catherinebutler

    • Dienstag, 16 Mai 2017 10:55

    I feel this is one of the most vital information for me.
    And i'm happy reading your article. But should observation on some common issues, The web site style is
    perfect, the articles is in point of fact nice :
    D. Excellent activity, cheers

Schreibe einen Kommentar

neueste Downloads

  30.07.2018
  20.05.2018
  03.12.2017

Empfehlung

codecanyon.net

Codeschnipsel & plugins

3D-Modell-Shop

fertige Milkshape/Blender Modelle Komplett und texturiert

3d-hobby-art.de Logo

Sprache