geschrieben von , Publiziert in Blog
Donnerstag, 23 August 2012 20:19

WebGL Tutorial ( part 1 )

    Artikel bewerten
    (2 Stimmen)

    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

    • http://friendlyquagmir13.snack.ws

      gepostet von http://friendlyquagmir13.snack.ws

      • 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

      01.09.2017
      07.05.2016

    Zufallsbild

    3d-hobby-art.de Logo

    Sprache