{"id":416,"date":"2016-04-28T11:01:20","date_gmt":"2016-04-28T09:01:20","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=416"},"modified":"2016-08-09T17:34:48","modified_gmt":"2016-08-09T15:34:48","slug":"3d-animationen-mit-three-js-im-browser","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/3d-animationen-mit-three-js-im-browser\/","title":{"rendered":"Interaktive 3D Animationen mit Three.JS im Browser. Wir zeigen wie es geht!"},"content":{"rendered":"<p>In den letzten Jahren hat sich der Funktionsumfang von Internet-Browsern wesentlich ver\u00e4ndert. Browser haben sich von einer reinen Darstellung von HTML &amp; CSS hin zu einer Platform f\u00fcr komplexe Web Applikationen entwickelt.<\/p>\n<p>Aufgrund von Technologien wie WebGL oder tracking.js, k\u00f6nnen Entwickler nun gro\u00dfartige Produkte direkt im Browser entwickeln.<\/p>\n<p>Vor kurzem sind wir bei Usersnap auf Three.js gesto\u00dfen und m\u00f6chten Ihnen heute einen ersten Einblick in die 3D Welt von Three.js geben.<\/p>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<h2>JavaScript Bibliotheken liegen im Trend.<\/h2>\n<p>Wir bei Usersnap lieben unsere Browser. Ja &#8211; das tun wir wirklich. OK, Internet Explorer ausgenommen. \ud83d\ude09 Ich denke, wir k\u00f6nnen uns als Fans von modernen Internet Browser bezeichnen. Und wir sind jeden Tag aufs Neue gespannt, welche Produkte im Browser entstehen.<\/p>\n<p>Mit <a href=\"http:\/\/usersnap.com\/blog\/tracking-js-the-computer-vision-power-of-javascript\/\"  target=\"_blank\"  target=\"_blank\">tracking.js<\/a> und anderen m\u00e4chtigen JavaScript Bibliotheken wird Computer Vision bereits in den Browser gebracht. Und t\u00e4glich entstehen weitere Anwendungsbereiche.<\/p>\n<h2>Was ist WebGL?<\/h2>\n<p>Bevor wir uns nun mit Three.js besch\u00e4ftigen, m\u00f6chten wir einen Moment WebGL n\u00e4her definieren.<\/p>\n<p><a href=\"https:\/\/de.wikipedia.org\/wiki\/WebGL\"  target=\"_blank\"  target=\"_blank\" rel=\"nofollow\" >WebGL<\/a> steht f\u00fcr \u201cWeb Graphics Library\u201d und ist ein Bestandteil von Webbrowsern, \u201c<em>mit dessen Hilfe hardware-beschleunigte 3D Grafiken direkt im Browser &#8211; ohne zus\u00e4tzliche Erweiterungen &#8211; dargestellt werden k\u00f6nnen<\/em>\u201d.<\/p>\n<p>Was bedeutet das aber konkret? WebGL ist im Grunde eine JavaScript API, die auf einer GPU ausgef\u00fchrt wird um 3D Animationen \/ Grafiken in Echtzeit auszuf\u00fchren.<\/p>\n<p>Erinnern Sie sich an die alten Tage des 3D CAD Renderings und die dazu notwendigen Superkr\u00e4fte? Gl\u00fccklicherweise sind diese Zeit (bald) vorbei.<\/p>\n<p>Unternehmen wie Onshape n\u00fctzen WebGL zum Beispiel, um komplexe Renderings in den Webbrowser zu bringen.<\/p>\n<p>Und das Beste daran? Bereits heute unterst\u00fctzen alle g\u00e4ngigen Browser WebGL (ja, sogar der Internet Explorer).<\/p>\n<h2>Was ist Three.js?<\/h2>\n<p>Zur\u00fcck zum Thema. Sie fragen sich wahrscheinlich nun was Three.js ist und in welcher Verbindung es zu WebGL steht.<\/p>\n<p>Grunds\u00e4tzlich kann hier festgehalten werden, dass Three.js eine Library ist, die die Handhabung von WebGL &#8211; also die Darstellung von 3D Objekten im Browser &#8211; vereinfacht.<\/p>\n<p>Klingt gut, oder? \ud83d\ude42<\/p>\n<p>Mit WebGL w\u00fcrde selbst die einfache Darstellung eines W\u00fcrfels eine Menge an JavaScript Code bedeuten. Im Gegensatz dazu ben\u00f6tigt Three.js nur ein kleines JavaScript Snippet.<\/p>\n<p>Three.js ist eine schlanke JavaScript Library, die zur 3D Programmierung im Browser verwendet werden kann.<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/xT1XGOb4Yc0pu9NCRa\" width=\"480\" height=\"297\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Wenn Sie detaillierte Informationen zu Three.js ben\u00f6tigen und wie Sie am Besten mit Three.js starten, dann empfehle ich Ihnen <a href=\"https:\/\/threejs.org\"  target=\"_blank\"  target=\"_blank\" rel=\"nofollow\" >diesen Artikel<\/a>.<\/p>\n<h2>Wie k\u00f6nnen Sie Three.js verwenden?<\/h2>\n<p>Um Three.js f\u00fcr ein Projekt zu verwenden, empfehle ich Ihnen Three.js von der angegebenen Website herunter zu laden. Sie k\u00f6nnen so einfach &amp; unkompliziert Three.js ausprobieren. Auch kann ich die Verwendung von <a href=\"https:\/\/codepen.io\"  target=\"_blank\"  target=\"_blank\" rel=\"nofollow\" >codepen.io<\/a> zu Testzwecke empfehlen.<\/p>\n<p>Erstellen Sie einfach ein neues HTML Dokument, das Sie ben\u00f6tigen um Three.js zum Laufen zu bringen.<\/p>\n<pre data-language=\"html\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=utf-8&gt;\r\n&lt;title&gt;My three.js playground&lt;\/title&gt;\r\n&lt;style&gt;\r\nbody { margin: 0; }\r\ncanvas { width:100%; height: 100% }\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script src=\"js\/three.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n\/\/ the javascript will be placed here\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><script src=\"js\/three.min.js\"><\/script><script>\/\/ <![CDATA[\n\/\/ the javascript will be placed here\n\/\/ ]]><\/script><\/p>\n<p>Das HTML Dokument setzt voraus, dass Sie die Three.js Library lokal im gleichen Ordner gespeichert haben.<\/p>\n<p>Um nun etwas mittels Three.js anzeigen zu k\u00f6nnen, ben\u00f6tigen wir an dieser Stelle drei Dinge. Ich denke, dass ist auch der Grund, warum es Three.js hei\u00dft.<\/p>\n<p>Wir ben\u00f6tigen eine Scene, Camera und einen Renderer. Der dazu geh\u00f6rige Code sieht wie folgt aus:<\/p>\n<pre data-language=\"javascript\">var scene = new THREE.Scene();\r\nvar camera = new THREE.PerspectiveCamera( 75, window.innerWidth \/ window.innerHeight, 0.1, 1000 );\r\n\r\nvar renderer = new THREE.WebGLRenderer();\r\nrenderer.setSize( window.innerWidth, window.innerHeight );\r\ndocument.body.appendChild( renderer.domElement );<\/pre>\n<p>Das erste PerspectiveCamera Attribut bezeichnet das Messefeld, w\u00e4hrend das zweite Attribut das Seitenverh\u00e4ltnis anzeigt.<\/p>\n<p>Es wird empfohlen, die Breite des Elements durch die H\u00f6he zu dividieren, da andernfalls das Bild verzerrt wird.<\/p>\n<p>F\u00fcr weitere Informationen zu Camera, Scene oder Renderer, empfehle ich Ihnen einen Blick auf diesen <a href=\"http:\/\/threejs.org\/docs\/index.html#Manual\/Introduction\/Creating_a_scene\"  target=\"_blank\"  target=\"_blank\" rel=\"nofollow\" >Three.js Guide<\/a> zu werfen.<\/p>\n<p>Im n\u00e4chsten Schritt werde ich nun einen W\u00fcrfen hinzuf\u00fcgen. Dazu f\u00fcge ich die BoxGeometry hinzu, die als Objekt alle Punkte (vertices) und F\u00fcllungen (faces) des W\u00fcrfels beinhaltet.<\/p>\n<pre data-language=\"javascript\">var geometry = new THREE.BoxGeometry( 1, 1, 1 );\r\nvar material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\r\nvar cube = new THREE.Mesh( geometry, material );\r\nscene.add( cube );\r\n\r\ncamera.position.z = 5;\r\n<\/pre>\n<p>Wir ben\u00f6tigen nun an dieser Stelle einen sogenannten Mesh. Dieser bezeichnet ein Objekt das Material auf das zuvor erstellte Objekt hinzuf\u00fcgt.<\/p>\n<p>Es ist hier auch m\u00f6glich Bilder anstelle von Farbcodes zu verwenden.<\/p>\n<pre data-language=\"javascript\">var material = new THREE.MeshPhongMaterial( { map:THREE.ImageUtils.loadTexture('\/image-url.png') } );\r\n<\/pre>\n<h3>W\u00fcrfel Animation<\/h3>\n<p>Wenn Sie nun alle zuvor gelisteten Codes verwendet haben, sehen Sie nun wahrscheinlich einen gr\u00fcnen W\u00fcrfel. Um diesen W\u00fcrfel zu animieren, f\u00fcgen Sie an dieser Stelle eine Rotation hinzu.<\/p>\n<pre data-language=\"javascript\">cube.rotation.x += 0.1;\r\ncube.rotation.y += 0.1;\r\n<\/pre>\n<p>Damit erh\u00e4lt Ihr W\u00fcrfel eine Rotation.<\/p>\n<h2>Das Gesamtergebnis.<\/h2>\n<p>Three.js erm\u00f6glicht einen einfachen Einstieg in die 3D Animationswelt direkt im Browser. Vor allem bei einem direkten Vergleich von Three.js mit WebGL.<\/p>\n<p>Mein vollst\u00e4ndiger Three.js Code ist \u00fcbrigens hier verf\u00fcgbar. Ich empfehle Ihnen einmal damit zu spielen, um so ein besseres Verst\u00e4ndnis von Three.js zu erhalten.<\/p>\n<p class=\"codepen\" data-height=\"266\" data-theme-id=\"dark\" data-slug-hash=\"ZWomey\" data-default-tab=\"js,result\" data-user=\"tompeham\" data-embed-version=\"2\">See the Pen <a href=\"https:\/\/codepen.io\/tompeham\/pen\/ZWomey\/\"  target=\"_blank\"  >three.js Playground<\/a> by tompeham (<a href=\"http:\/\/codepen.io\/tompeham\"  target=\"_blank\"  >@tompeham<\/a>) on <a href=\"http:\/\/codepen.io\"  target=\"_blank\"  >CodePen<\/a>.<\/p>\n<p><script src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\" async=\"\"><\/script><\/p>\n<h2>Zusammenfassung.<\/h2>\n<p>Wie Sie in diesem ersten Bericht gesehen haben, erm\u00f6glicht Three.js eine Reihe an Funktionalit\u00e4ten f\u00fcr 3D Animationen direkt im Browser. F\u00fcr weitere Informationen empfehle ich Ihnen die offizielle Dokumentation.<\/p>\n<p>Bei Fragen hinterlassen Sie einen Kommentar oder schreiben Sie mir per <a href=\"mailto:tp@usersnap.com\" target=\"_blank\">E-Mail<\/a> oder <a href=\"https:\/\/twitter.com\/tompeham\"  target=\"_blank\" rel=\"nofollow\"  target=\"_blank\" rel=\"nofollow\">Twitter<\/a>.<\/p>\n<p>Und falls Sie sich fragen, welche Praxisbeispiele bereits mit Three.js erstellt wurden, so empfehle ich Ihnen die Demoprojekte unter threejs.org n\u00e4her zu begutachten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In den letzten Jahren hat sich der Funktionsumfang von Internet-Browsern wesentlich ver\u00e4ndert. Browser haben sich von einer reinen Darstellung von HTML &amp; CSS hin zu einer Platform f\u00fcr komplexe Web Applikationen entwickelt. Aufgrund von Technologien wie WebGL oder tracking.js, k\u00f6nnen Entwickler nun gro\u00dfartige Produkte direkt im Browser entwickeln. Vor kurzem sind wir bei Usersnap auf [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,12],"tags":[82],"class_list":["post-416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-web-development","tag-threejs"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/418"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}