Heim > Artikel > Web-Frontend > Three.js-Tutorial zum Zeichnen eines 3D-Würfels
Three.js-Tutorial zum Zeichnen eines 3D-Würfels
- 小云云Original
- 2018-01-18 10:22:274726Durchsuche
Three.js ist eine 3D-JavaScript-Bibliothek, die auf dem rechten Koordinatensystem basiert. Sie kann einfache oder komplexere dreidimensionale Grafiken erstellen und farbenfrohe Lichtquellen hinzufügen und Objekte im 3D verschieben Erstellen Sie eine Szene oder fügen Sie geskriptete Animationen und mehr hinzu. In diesem Artikel wird erläutert, wie Sie mit three.js einen 3D-Würfel zeichnen. Bei Bedarf können Sie darauf zurückgreifen.
Einführung
Three.js ist ein WebGL-Framework, mit dem wir 3D-Effekte auf der Leinwand erzielen können. Die Realisierung von 3D-Effekten ist in China noch relativ neu und es stehen nicht viele Informationen als Referenz zur Verfügung. Bei diesem Artikel handelt es sich lediglich um einen Einführungsartikel, der das Zeichnen eines 3D-Würfels vorstellt.
Grundkonzepte in Three.js
Three.js enthält 3 Grundkonzepte: Szene, Kamera und Renderer.
Die Szene ist das Objekt, das gezeichnet werden muss, die Kamera stellt den Betrachtungswinkel dar und der Renderer ist der Träger der Zeichnung (kann an das DOM-Element des Browsers angehängt werden),
auch Das heißt, wir erfassen die Szene durch die Kamera und zeichnen sie dann in das Zielmedium.
Szene, Kamera und Renderer erstellen
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 );
Der obige Code erstellt zuerst eine Szene, dann eine PerspectiveCamera (stereoskopische Kamera) und dann einen WebGL-Renderer (beachten Sie auch Three.js). unterstützt Nicht-3D-Canvas-2D-Renderer) und hängt es dann an das DOM-Unterelement des HTML-Dokumentkörpers an.
Da die Einführung nun abgeschlossen ist, möchte ich zunächst die Renderings vorstellen:
Das ist das Rendering, es ist ziemlich dreidimensional, oder?
Vorbereitung vor dem Zeichnen
Bevor Sie Code schreiben, müssen Sie zunächst das neueste Three.js-Framework-Paket herunterladen und Ihre eigene Seite vorstellen.
Spezifischer Implementierungsprozess
Bereiten Sie eine Leinwand vor
Diese Leinwand ist die Leinwand, die wir verwenden, um das gesamte 3D-Quadrat anzuzeigen, bei dem es sich um das schwarze Quadrat handelt das Bild oben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 相机</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
</body>
</html>
Klare die Zeichenidee
Der nächste Zeichenprozess umfasst mehrere Konzepte: Leinwand, Szene, Kamera, Renderer.
Um den Code des Zeichenprozesses besser zu verstehen und das Gedächtnis zu unterstützen, verstehen wir zunächst diese Konzepte:
Angenommen, wir sind unterwegs und sehen eine sehr schöne Szene Ich möchte diese 3D-Welt aufnehmen
Diese schöne Szene ist die Szene, die wir mit der Kamera einfangen und zu einem Foto machen
In der richtigen Reihenfolge Um dieses Foto klar zu sehen, platzieren wir es auf einer Leinwand
Schließlich verwenden wir den Renderer, um es zu ändern und zu rendern
Auf diese Weise , können wir die 3D-Welt erfolgreich darstellen.
【Das Programm ist immer noch sehr nah am Leben.
Das obige ist der detaillierte Inhalt vonThree.js-Tutorial zum Zeichnen eines 3D-Würfels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!