Detailliertes Beispiel für das Zeichnen eines 3D-Würfels durch three.js-js-Tutorial-php.cn

Detailliertes Beispiel für das Zeichnen eines 3D-Würfels durch three.js

小云云

Freigeben： 2017-12-19 16:34:12

Original

2902 Leute haben es durchsucht

In diesem Artikel wird das Zeichnen eines 3D-Würfels mit Three.js anhand eines Beispiels ausführlich erläutert. Three.js ist eine 3D-JavaScript-Bibliothek, die auf dem rechten Koordinatensystem basiert und einfache oder komplexere dreidimensionale Grafiken erstellen kann und wenden Sie farbenfrohe Texturen und Materialien an, verschieben Sie Objekte in der 3D-Szene oder fügen Sie Skriptanimationen hinzu usw. 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 );

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 vonDetailliertes Beispiel für das Zeichnen eines 3D-Würfels durch three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!