Wir haben Fähigkeiten in unseren Browsern, von denen wir vor fünf oder zehn Jahren nicht geträumt hätten. Ganze 3D-Spielwelten können im Browser laufen und interaktive Websites können eindringlicher sein.
Mit einer bestimmten Virtual-Reality-Firma, die von einem bestimmten Social-Media-Unternehmen gekauft wurde, ist jetzt der perfekte Zeitpunkt, um mit 3D zu arbeiten. Erstaunlicherweise können wir jetzt 3D mit reinem JavaScript erstellen, einschließlich Meshes und Materialien.
Obwohl es möglich ist, ist natürlich viel Code erforderlich, und hier kommt Three.js ins Spiel, sodass wir 3D-Umgebungen einfach und mit weniger Code erstellen können.
Da es neu ist, wird 3D leider nicht von allen Browsern unterstützt. Wir sind derzeit auf Chrome, Safari und Firefox beschränkt.
Im Laufe der Zeit wird sich die Unterstützung von IE verbessern, aber im Moment brauchen Sie einen Fallback für Microsoft-Anhänger.
Das erste, was wir tun müssen, ist zum three.js Webseite und laden Sie die neueste Version der Bibliothek herunter.
Als nächstes referenzieren Sie es wie jede andere JavaScript-Datei im Kopf Ihres Dokuments und schon können Sie loslegen.
Das erste, was wir tun müssen, um etwas mit three.js zu rendern, besteht darin, eine Szene, eine Kamera und einen Renderer zu erstellen. Beginnend mit einer Szene:
var scene = new THREE.Scene();Als nächstes brauchen wir eine Kamera. Stellen Sie sich das als den Standpunkt vor, von dem der Benutzer ausgeht. Three.js hat hier wirklich viele Optionen, aber wir werden der Einfachheit halber eine perspektivische Kamera verwenden:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Diese Methode verwendet vier Parameter: das erste ist das Sichtfeld, das zweite ist das Seitenverhältnis (ich würde empfehlen, dies immer auf das Benutzer-Viewport zu beziehen), die nahe Clipping-Ebene und schließlich die ferne Clipping-Ebene. Diese letzten beiden Parameter bestimmen die Grenzen des Renderings, so dass Objekte, die zu nah oder zu weit entfernt sind, nicht gezeichnet werden, was Ressourcen verschwenden würde.
Als nächstes müssen wir den WebGL-Renderer einrichten:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Wie Sie sehen können, müssen Sie als Erstes eine Instanz des Renderers erstellen und dann seine Größe auf das Ansichtsfenster des Benutzers festlegen. Schließlich fügen wir ihn der Seite hinzu, um eine leere Arbeitsfläche zu erstellen, mit der wir arbeiten können.
Bisher haben wir nur die Bühne aufgebaut, jetzt werden wir unser erstes 3D-Objekt erstellen.
Für dieses Tutorial wird es ein einfacher Zylinder:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Diese Methode benötigt auch 4 Parameter: der erste ist der Radius der Oberseite des Zylinders, der zweite ist der Radius des Bodens des Zylinders, der dritte ist die Höhe, der letzte ist die Anzahl der Höhensegmente.
Wir haben die Mathematik des Objekts eingerichtet, jetzt müssen wir es in ein Material einfügen, so dass es tatsächlich wie auf dem Bildschirm aussieht:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Dieser Code fügt ein einfaches Material für das Objekt hinzu, in diesem Fall eine blaue Farbe. Ich habe Drahtgitter auf " Wahr" gesetzt, weil es das Objekt deutlicher zeigt, sobald wir es animieren.
Schließlich müssen wir unseren Zylinder wie folgt hinzufügen:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Bevor Sie die Szene rendern können, müssen Sie erst die Kameraposition einstellen:
camera.position.z = 20;Wie Sie sehen können, ist das involvierte JavaScript extrem einfach, weil Three.js sich mit all den komplizierten Dingen beschäftigt, also müssen wir das nicht tun.
Wenn Sie die Datei jetzt in einem Browser testen, werden Sie feststellen, dass nichts passiert. Das liegt daran, dass wir der Szene nicht gesagt haben, dass sie rendern soll. Zum Rendern der Szene benötigen wir folgenden Code:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Wenn Sie sich jetzt die Datei in Ihrem Browser anschauen, werden Sie sehen, dass sie tatsächlich einen Zylinder rendert, aber es ist nicht sehr aufregend.
Um den Wert von 3D wirklich zu verbessern, müssen Sie mit der Animation beginnen, was wir mit ein paar kleinen Änderungen an unserer Renderfunktion tun können:
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Wenn Sie jetzt in Ihrem Browser testen, sehen Sie einen korrekt animierenden 3D-Zylinder.
Wenn Sie eine Demo sehen und mit dem Code herumspielen möchten, können Sie das tun mach es hier.
Wie Sie sehen können, benötigte die Erstellung dieser (zugegebenermaßen sehr einfachen) Szene weniger als zwei Dutzend Zeilen Code, und es ist sehr wenig Mathematik beteiligt.
Wenn Sie die Beispiele Auf der Website von three.js sehen Sie eine unglaubliche Arbeit, die geleistet wurde.
Diese erstaunliche Bibliothek für JavaScript hat das Einstiegslevel für die Codierung von 3D wirklich gesenkt, sodass jeder, der einfaches JavaScript schreiben kann, mitmachen kann.
Ausgewähltes Bild / Vorschaubild, 3D Bild über Shutterstock.