by In den letzten Jahren hat sich der Funktionsumfang von Internet-Browsern wesentlich verändert. Browser haben sich von einer reinen Darstellung von HTML & CSS hin zu einer Platform für komplexe Web Applikationen entwickelt.
Aufgrund von Technologien wie WebGL oder tracking.js, können Entwickler nun großartige Produkte direkt im Browser entwickeln.
Vor kurzem sind wir bei Usersnap auf Three.js gestoßen und möchten Ihnen heute einen ersten Einblick in die 3D Welt von Three.js geben.
JavaScript Bibliotheken liegen im Trend.
Wir bei Usersnap lieben unsere Browser. Ja – das tun wir wirklich. OK, Internet Explorer ausgenommen. 😉 Ich denke, wir können uns als Fans von modernen Internet Browser bezeichnen. Und wir sind jeden Tag aufs Neue gespannt, welche Produkte im Browser entstehen.
Mit tracking.js und anderen mächtigen JavaScript Bibliotheken wird Computer Vision bereits in den Browser gebracht. Und täglich entstehen weitere Anwendungsbereiche.
Was ist WebGL?
Bevor wir uns nun mit Three.js beschäftigen, möchten wir einen Moment WebGL näher definieren.
WebGL steht für “Web Graphics Library” und ist ein Bestandteil von Webbrowsern, “mit dessen Hilfe hardware-beschleunigte 3D Grafiken direkt im Browser – ohne zusätzliche Erweiterungen – dargestellt werden können”.
Was bedeutet das aber konkret? WebGL ist im Grunde eine JavaScript API, die auf einer GPU ausgeführt wird um 3D Animationen / Grafiken in Echtzeit auszuführen.
Erinnern Sie sich an die alten Tage des 3D CAD Renderings und die dazu notwendigen Superkräfte? Glücklicherweise sind diese Zeit (bald) vorbei.
Unternehmen wie Onshape nützen WebGL zum Beispiel, um komplexe Renderings in den Webbrowser zu bringen.
Und das Beste daran? Bereits heute unterstützen alle gängigen Browser WebGL (ja, sogar der Internet Explorer).
Was ist Three.js?
Zurück zum Thema. Sie fragen sich wahrscheinlich nun was Three.js ist und in welcher Verbindung es zu WebGL steht.
Grundsätzlich kann hier festgehalten werden, dass Three.js eine Library ist, die die Handhabung von WebGL – also die Darstellung von 3D Objekten im Browser – vereinfacht.
Klingt gut, oder? 🙂
Mit WebGL würde selbst die einfache Darstellung eines Würfels eine Menge an JavaScript Code bedeuten. Im Gegensatz dazu benötigt Three.js nur ein kleines JavaScript Snippet.
Three.js ist eine schlanke JavaScript Library, die zur 3D Programmierung im Browser verwendet werden kann.
Wenn Sie detaillierte Informationen zu Three.js benötigen und wie Sie am Besten mit Three.js starten, dann empfehle ich Ihnen diesen Artikel.
Wie können Sie Three.js verwenden?
Um Three.js für ein Projekt zu verwenden, empfehle ich Ihnen Three.js von der angegebenen Website herunter zu laden. Sie können so einfach & unkompliziert Three.js ausprobieren. Auch kann ich die Verwendung von codepen.io zu Testzwecke empfehlen.
Erstellen Sie einfach ein neues HTML Dokument, das Sie benötigen um Three.js zum Laufen zu bringen.
<html>
<head>
<meta charset=utf-8>
<title>My three.js playground</title>
<style>
body { margin: 0; }
canvas { width:100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
// the javascript will be placed here
</script>
</body>
</html>
Das HTML Dokument setzt voraus, dass Sie die Three.js Library lokal im gleichen Ordner gespeichert haben.
Um nun etwas mittels Three.js anzeigen zu können, benötigen wir an dieser Stelle drei Dinge. Ich denke, dass ist auch der Grund, warum es Three.js heißt.
Wir benötigen eine Scene, Camera und einen Renderer. Der dazu gehörige Code sieht wie folgt aus:
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
Das erste PerspectiveCamera Attribut bezeichnet das Messefeld, während das zweite Attribut das Seitenverhältnis anzeigt.
Es wird empfohlen, die Breite des Elements durch die Höhe zu dividieren, da andernfalls das Bild verzerrt wird.
Für weitere Informationen zu Camera, Scene oder Renderer, empfehle ich Ihnen einen Blick auf diesen Three.js Guide zu werfen.
Im nächsten Schritt werde ich nun einen Würfen hinzufügen. Dazu füge ich die BoxGeometry hinzu, die als Objekt alle Punkte (vertices) und Füllungen (faces) des Würfels beinhaltet.
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
Wir benötigen nun an dieser Stelle einen sogenannten Mesh. Dieser bezeichnet ein Objekt das Material auf das zuvor erstellte Objekt hinzufügt.
Es ist hier auch möglich Bilder anstelle von Farbcodes zu verwenden.
var material = new THREE.MeshPhongMaterial( { map:THREE.ImageUtils.loadTexture('/image-url.png') } );
Würfel Animation
Wenn Sie nun alle zuvor gelisteten Codes verwendet haben, sehen Sie nun wahrscheinlich einen grünen Würfel. Um diesen Würfel zu animieren, fügen Sie an dieser Stelle eine Rotation hinzu.
cube.rotation.x += 0.1; cube.rotation.y += 0.1;
Damit erhält Ihr Würfel eine Rotation.
Das Gesamtergebnis.
Three.js ermöglicht einen einfachen Einstieg in die 3D Animationswelt direkt im Browser. Vor allem bei einem direkten Vergleich von Three.js mit WebGL.
Mein vollständiger Three.js Code ist übrigens hier verfügbar. Ich empfehle Ihnen einmal damit zu spielen, um so ein besseres Verständnis von Three.js zu erhalten.
See the Pen three.js Playground by tompeham (@tompeham) on CodePen.
Zusammenfassung.
Wie Sie in diesem ersten Bericht gesehen haben, ermöglicht Three.js eine Reihe an Funktionalitäten für 3D Animationen direkt im Browser. Für weitere Informationen empfehle ich Ihnen die offizielle Dokumentation.
Bei Fragen hinterlassen Sie einen Kommentar oder schreiben Sie mir per E-Mail oder Twitter.
Und falls Sie sich fragen, welche Praxisbeispiele bereits mit Three.js erstellt wurden, so empfehle ich Ihnen die Demoprojekte unter threejs.org näher zu begutachten.