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

WebGL Tutorial ( part 2 )

    Artikel bewerten
    (0 Stimmen)

    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
    1. <script type="text/javascript">
    2. init();
    3. animate();
    4. //Variablen inititalisieren
    5. var SCREEN_WIDTH = window.innerWidth;
    6. var SCREEN_HEIGHT = window.innerHeight;
    7. var kamera;
    8. var scene;
    9. var zeichnen;
    10. var steuerung;
    11.  
    12. function init()
    13. {
    14. //Erzeugen einer Szene
    15. scene = new THREE.Scene();
    16.  
    17. // Erzeugt Nebel
    18. //scene.fog = new THREE.FogExp2( 0xcccccc, 0.001 );
    19.  
    20. //Erzeugen einer Kamera. Man benötigt mindestens eine Kamera.
    21. kamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100000 );
    22. kamera.position.z = 700;
    23. kamera.position.y = 900;
    24. kamera.rotation.x = -0.78;
    25.  
    26. //Hinzufügen der Kamera zur Szene
    27. scene.add( kamera );
    28.  
    29. //Hinzufügen der Kamera-Steuerung
    30. steuerung = new THREE.OrbitControls( kamera );
    31. steuerung.addEventListener( 'change', render );
    32.  
    33. // licht --------------------------------------------------------------------------
    34. licht = new THREE.AmbientLight( 0xefefef );
    35. scene.add( licht );
    36.  
    37. // Boden --------------------------------------------------------------------------
    38. //Erzeugung des Materials für den Boden
    39. var material1 = new THREE.MeshBasicMaterial( { color: 0xfff000, wireframe: true } );
    40. //Erzeugung der Gemotrie / Boden
    41. boden = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 10, 10 ), material1 );
    42. boden.position.y = - 150;
    43. boden.rotation.x = - Math.PI / 2;
    44. //Hinzufügen des Bodens zur Szene
    45. scene.add( boden );
    46.  
    47. // Kugel --------------------------------------------------------------------------
    48. //Erzeugung des Materials für die Kugel
    49. var material2 = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
    50. //Erzeugung der Gemotrie / Kugel
    51. kugel = new THREE.Mesh( new THREE.SphereGeometry( 150, 20, 20 ), material2 );
    52. //Hinzufügen der Kugel zur Szene
    53. scene.add( kugel );
    54.  
    55. //Hier wird ein WebGLRenderer verwendet.
    56. zeichnen = new THREE.WebGLRenderer( { antialias: true } );
    57.  
    58. //Grösse der Zeichenflaeche
    59. zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );
    60.  
    61. //Erzeugtes Canvas Element in den body einfügen. / <div id="webGL"></div>
    62. document.getElementById('webGL').appendChild( zeichnen.domElement );
    63.  
    64.  
    65. window.addEventListener( 'resize', onWindowResize, true );
    66.  
    67. render();
    68.  
    69. }
    70. //Diese Funktion passt die Zeichefläche an das Browserfenster an.
    71. function onWindowResize()
    72. {
    73.  
    74. windowHalfX = window.innerWidth / 1.4;
    75. windowHalfY = window.innerHeight / 1.4;
    76.  
    77. kamera.aspect = window.innerWidth / window.innerHeight;
    78. kamera.updateProjectionMatrix();
    79.  
    80. zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );
    81.  
    82. render();
    83.  
    84. }
    85. //Animation
    86. function animate()
    87. {
    88.  
    89. requestAnimationFrame( animate );
    90. steuerung.update();
    91.  
    92. }
    93.  
    94. //Ausgabe der 3D Welt
    95. function render()
    96. {
    97. zeichnen.render( scene, kamera );
    98. }
    99. </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 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.

    Schreibe einen Kommentar

    neueste Downloads

      07.05.2016
      02.04.2016

    Zufallsbild

    3d-hobby-art.de Logo

    Sprache