WebGL Tutorial ( part 2 )

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

Zufallsbild

neueste Downloads

  03.12.2017
  01.09.2017
3d-hobby-art.de Logo

Sprache