Einleitung
Ich habe für einige meiner Experimente Three.js verwendet und die 3D-Animation im Browser ganz schön abstrahiert. Damit können Sie Kameras, Objekte, Lichter, Materialien und mehr erstellen und zwischen einem Renderer wählen, der Sie entscheiden, ob Ihre Szene mit dem Canvas von HTML 5, WebGL oder SVG gezeichnet werden soll. Und da es eine Open-Source-Software ist, können Sie sich sogar in das Projekt einbringen. Jetzt konzentriere ich mich auf das, was ich gelernt habe, indem ich mit der Motorik lerne, und stelle einige Grundlagen vor.
Bei all den Vorteilen von Three.js kann es manchmal zu Problemen kommen. Normalerweise werden Sie ziemlich viel Zeit mit den Beispielen, Reverse Engineering und (in meinem Fall sicher) auf der Suche nach bestimmten Funktionen verbringen und gelegentlich Fragen über GitHub stellen. Mr. doob und AlteredQualia sind übrigens sehr hilfreich.
1. Grundlagen
Ich nehme an, dass Sie über 3D-Kenntnisse und angemessene JavaScript-Kenntnisse verfügen. Wenn nicht, lohnt es sich vielleicht, etwas mehr zu lernen, bevor Sie es ausprobieren, da es etwas verwirrend sein kann.
In unserer 3D-Welt gibt es einige der folgenden Elemente, die ich Ihnen durch den Erstellungsprozess erkläre:
- Eine Szene
- Einen Renderer
- Eine Kamera
- Ein oder zwei (mit Materialien)
Natürlich könnt ihr auch ein paar coole Sachen machen. Ich hoffe, ihr werdet das auch tun und in eurem Browser mit 3D experimentieren.
2. Support
Hier eine kurze Anmerkung zum Support in den Browsern. Der Chrome-Browser von Google ist meiner Erfahrung nach der beste Browser, um zu funktionieren, wenn es darum geht, welche Renderer unterstützt werden und wie schnell die zugrunde liegende JavaScript-Engine ist. Chrome unterstützt Canvas, WebGL und SVG und ist extrem schnell. Firefox ist mit der Version 4 eine knappe Sekunde. Die JavaScript-Engine von Chrome scheint etwas langsamer zu sein als die von Chrome, aber auch hier ist die Unterstützung der Rendering-Technologien hervorragend. In Opera und Safari wird derzeit WebGL-Unterstützung hinzugefügt, aber ihre aktuellen Versionen unterstützen nur Canvas. Internet Explorer (Version 9 und höher) unterstützt nur das Rendern von Canvas. Ich habe noch nicht gehört, dass Microsoft plant, WebGL-Funktionen hinzuzufügen.
3. Szene festlegen
Ich nehme an, Sie haben einen Browser ausgewählt, der alle Rendering-Technologien unterstützt, und dass Sie mit Canvas oder WebGL rendern möchten, da es sich hierbei um die Standardoptionen handelt. Canvas wird umfassender unterstützt als WebGL. Beachten Sie jedoch, dass WebGL auf der GPU Ihrer Grafikkarte ausgeführt wird. Das bedeutet, dass sich die CPU auf andere Aufgaben konzentrieren kann, die nicht gerendert werden, wie z. B. physikalische Daten oder Nutzerinteraktionen.
Unabhängig vom ausgewählten Renderer muss das JavaScript im Hinblick auf die Leistung optimiert werden. 3D ist keine leichte Aufgabe für einen Browser (und es ist sogar toll, dass es möglich ist). Achten Sie also darauf, wo im Code Engpässe liegen, und beseitigen Sie diese nach Möglichkeit.
Vorausgesetzt, Sie haben drei.js heruntergeladen und in Ihre HTML-Datei aufgenommen. Wie gehen Sie vor, um eine Szene einzurichten? Ein Beispiel:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
Nicht allzu knifflig!
4. Ein Mesh-Netzwerk erstellen
Wir haben also eine Szene, eine Kamera und einen Renderer (in meinem Beispielcode habe ich mich für WebGL entschieden), aber wir haben nichts zum Zeichnen. Three.js bietet Unterstützung für das Laden verschiedener Standarddateitypen, was sich besonders gut eignet, wenn Sie Modelle aus Blender, Maya, Cinema4D oder anderen Quellen ausgeben möchten. Der Einfachheit halber geht es ja schließlich um die ersten Schritte! Ich werde über Primitive sprechen. Primitive sind geometrische Gitter, relativ einfache Netze wie Kugeln, Ebenen, Würfel und Zylinder. Mit Three.js können Sie diese Primitive-Typen ganz einfach erstellen:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Alles in Ordnung, aber wie steht es mit dem Material für die Kugel? Im Code haben wir die Variable sphereMaterial verwendet, aber wir haben sie noch nicht definiert. Zunächst müssen wir etwas ausführlicher über die Materialien sprechen.
5. Material
Zweifellos ist dies einer der nützlichsten Teile von Three.js. Sie bietet Ihnen eine Reihe gängiger (und sehr praktischer) Materialien für Ihre Mesh-Netzwerke:
- „Basic“ – was bedeutet, dass es „nicht beleuchtet“ gerendert wird
- Lambert
- Phong
Es gibt noch mehr, aber aus Gründen der Einfachheit lasse ich Sie diese für sich selbst entdecken. Im Fall von WebGL können diese Materialien lebensrettend sein. Warum? In WebGL müssen Sie für alles, was gerendert wird, Shader schreiben. Shader sind an sich ein großes Thema, aber kurz gesagt sind sie in GLSL (OpenGL Shader Language) geschrieben, wodurch der GPU mitgeteilt wird, wie etwas aussehen soll. Dies bedeutet, dass Sie die mathematische Berechnung der Beleuchtung, der Reflexion usw. imitieren müssen. Es kann sehr schnell sehr kompliziert werden. Dank Three.js müssen Sie dies nicht tun, wenn Sie dies nicht möchten, da das für Sie abstrahiert. Wenn Sie Shader schreiben möchten, können Sie dies jedoch auch mit einem MeshShaderMaterial tun, sodass es eine flexible Einrichtung ist.
Jetzt wenden wir jedoch ein Lambert-Material auf die Kugel an:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Neben der Farbe können Sie beim Erstellen eines Materials noch weitere Eigenschaften angeben, z. B. Glättung oder Umgebungskarten. Auf der Wiki-Seite finden Sie die verschiedenen Eigenschaften, die Sie für die Materialien festlegen können, sowie alle Objekte, die die Engine für Sie bereitstellt. Außerdem wurde kürzlich threejs.org erstellt, die einen attraktiveren Blick auf die API bietet.
6. Licht!
Wenn Sie die Szene jetzt rendern, sehen Sie einen roten Kreis. Auch wenn wir ein Lambert-Material angewendet haben, gibt es kein Licht in der Szene. Daher kehrt Three.js standardmäßig zu einem vollen Umgebungslicht zurück, das der flachen Farbe entspricht. Lassen Sie uns das mit einem einfachen Punkt beheben:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. Rendern
Wir haben jetzt alles für das Rendering eingerichtet, erstaunlicherweise. Aber genau das müssen wir tun:
// draw!
renderer.render(scene, camera);
Wahrscheinlich werden Sie mehr als einmal rendern wollen. Wenn Sie also eine Schleife erstellen, sollten Sie in jedem Fall requestAnimationFrame verwenden. Dies ist die weitaus intelligenteste Methode, Animationen im Browser zu verarbeiten. Da es derzeit noch nicht vollständig unterstützt wird, empfehle ich Ihnen dringend, sich Paul Irish's Shim anzusehen.
8. Allgemeine Objekteigenschaften
Wenn Sie sich den Code für Three.js ansehen, werden Sie feststellen, dass viele Objekte von Object3D übernommen werden. Dies ist ein Basisobjekt, das einige sehr nützliche Eigenschaften wie die Informationen zu position, rotation und scale enthält. Sphere ist ein Mesh-Netzwerk, das von Object3D übernimmt und ihm seine eigenen Eigenschaften hinzufügt: Geometrie und Materialien. Warum erwähne ich diese? Es ist unwahrscheinlich, dass Sie auf Ihrem Bildschirm einfach eine Kugel haben wollen, die nichts tut. Diese Eigenschaften sind eine Untersuchung wert, da Sie damit die zugrunde liegenden Details der Netze und Materialien im Handumdrehen verändern können.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. Schmutzige kleine Geheimnisse
Ich wollte nur kurz auf ein schnelles Problem bei Three.js hinweisen: Wenn Sie beispielsweise die Eckpunkte eines Mesh ändern, werden Sie in Ihrer Renderingschleife feststellen, dass sich nichts ändert. Warum? Nun, weil Three.js (soweit ich weiß) die Daten für ein Mesh-Netzwerk im Cache speichert, bräuchte man eine Optimierung. Tatsächlich müssen Sie Three.js mitteilen, dass sich etwas geändert hat, damit die Datei neu berechnet werden kann. Dazu gehen Sie so vor:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Es gibt noch mehr, aber die beiden sind die nützlichsten. Um unnötige Berechnungen zu vermeiden, sollten Sie natürlich nur Änderungen melden.
Fazit
Ich hoffe, diese kurze Einführung in Three.js war hilfreich für Sie. Es gibt einfach nichts Besseres, als sich die Hände schmutzig zu machen und etwas auszuprobieren. Die native 3D-Ausführung im Browser macht viel Spaß. Mit einer Suchmaschine wie Three.js sparen Sie sich einen Großteil der Arbeit und können richtig coole Sachen erstellen. Zur weiteren Unterstützung habe ich den Quellcode in diesen Lab-Artikel verpackt, sodass Sie ihn als Referenz verwenden können. Wenn Ihnen das gefallen hat, teilen Sie mir dies über Twitter mit. Ich freue mich, von Ihnen zu hören.