geschrieben von , Publiziert in Blog
Samstag, 29 September 2012 13:55

WebGL Tutorial ( part 3 )

    Artikel bewerten
    (0 Stimmen)

    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

      01.09.2017
      07.05.2016

    Zufallsbild

    3d-hobby-art.de Logo

    Sprache