WebGL Tutorial ( part 3 )

Eine kurze und einfache Einführung in die WebGL Entwicklung mit Three.js.
Laden eines eigenen 3D-Modell.

WebGL Tutorial ( part III ) Laden eines einfachen Blender JS (JSON Model) Modell

Im 3. Tutorial meiner WebGL Tutorial Reihe laden wir ein einfaches 3D Modell im JSON Format.

three.js (aktuell v.51)

 
  • 1. Exportieren des 3d-Models

In der folgenden Bilderserie finden sie die Einstellung für den export des 3d-Models im JSON Format.

 
.js export Blender
Blender Settings
  • 2. Das eigenliche script
  1. <script type="text/javascript">
  2. init();
  3. animate();
  4.  
  5. // Variablen inititalisieren
  6. var SCREEN_WIDTH = window.innerWidth;
  7. var SCREEN_HEIGHT = window.innerHeight;
  8. var kamera;
  9. var scene;
  10. var zeichnen;
  11. var steuerung;
  12. var loader;
  13. var mesh;
  14. var loadModel;
  15.  
  16. function init()
  17. {
  18. // Erzeugen einer Szene
  19. scene = new THREE.Scene();
  20.  
  21. // Lade Blender .js Model
  22. loader = new THREE.JSONLoader( );
  23. loadModel = function(geometry); }
  24. mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.refl.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true, shading: THREE.SmoothShading } ) );
  25. mesh.scale.set(150, 150, 150);
  26. mesh.position.set(0, 150, 0);
  27. scene.add( mesh );
  28. };
  29. loader.load('blender.js/untitled.js', loadModel );
  30. setInterval(render, 50);
  31.  
  32. // Erzeugen einer Kamera. Man benoetigt mindestens eine Kamera.
  33. kamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100000 );
  34. kamera.position.z = 1400;
  35. kamera.position.y = 1200;
  36. kamera.rotation.x = -0.78;
  37.  
  38. //Hinzufuegen der Kamera zur Szene
  39. scene.add( kamera );
  40.  
  41. //Hinzufuegen der Kamera-Steuerung
  42. steuerung = new THREE.OrbitControls( kamera );
  43. steuerung.addEventListener( 'change', render );
  44.  
  45. // licht
  46. licht = new THREE.AmbientLight( 0xefefef );
  47. scene.add( licht );
  48.  
  49. // Boden
  50. // Erzeugung des Materials fuer den Boden
  51. var material1 = new THREE.MeshBasicMaterial( { color: 0xfff000, wireframe: true, side: THREE.DoubleSide } );
  52. //Erzeugung der Gemotrie / Boden
  53. boden = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 10, 10 ), material1 );
  54. boden.position.y = 0;
  55. boden.rotation.x = - Math.PI / 2;
  56. //Hinzufuegen des Bodens zur Szene
  57. scene.add( boden );
  58.  
  59. //Hier wird ein CanvasRenderer verwendet.
  60. zeichnen = new THREE.CanvasRenderer( { antialias: true } );
  61.  
  62. //Groesse der Zeichenflaeche
  63. zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );
  64.  
  65. //Erzeugtes Canvas Element in den body einfuegen. / <div id="webGL"></div>
  66. document.getElementById('webGL').appendChild( zeichnen.domElement );
  67.  
  68. window.addEventListener( 'resize', onWindowResize, true );
  69. render();
  70. }
  71.  
  72. //Diese Funktion passt die Zeicheflaeche an das Browserfenster an.
  73. function onWindowResize()
  74. {
  75. windowHalfX = window.innerWidth / 1.4;
  76. windowHalfY = window.innerHeight / 1.4;
  77.  
  78. kamera.aspect = window.innerWidth / window.innerHeight;
  79. kamera.updateProjectionMatrix();
  80.  
  81. zeichnen.setSize( window.innerWidth / 1.4, window.innerHeight / 1.4 );
  82.  
  83. render();
  84.  
  85. }
  86. //Animation
  87. function animate()
  88. {
  89. requestAnimationFrame( animate );
  90. steuerung.update();
  91. }
  92.  
  93. //Ausgabe der 3D Welt
  94. function render()
  95. {
  96. zeichnen.render( scene, kamera );
  97. }
  98. </script>
 

Das Resultat dieses Tutorials können Sie sich hier anschauen. Sehen Sie hier kein Blender 3D "MONKEY" unterstützt ihr Browser kein WebGL.
Die Dateien zum nachvollziehen des Tutorials können Sie sich im Download::Bereich herunterladen.

Schreibe einen Kommentar

neueste Downloads

  20.05.2018
  03.12.2017
  01.09.2017

Empfehlung

codecanyon.net

Codeschnipsel & plugins

themeforest.net

themes & templates

3d-hobby-art.de Logo

Sprache