Ausführliche Erklärung zum Erstellen von Szeneninstanzen mit three.js-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ausführliche Erklärung zum Erstellen von Szeneninstanzen mit three.js

小云云

Jan 18, 2018 am 09:41 AM

javascript 详解

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Lernen und Erstellen chinesischer Dokumente von Three.js ein. Der Artikel stellt sie anhand von Beispielcodes ausführlich vor. Es hat einen gewissen Referenzlernwert, damit jeder Three.js lernen oder verwenden kann. Freunde, die es brauchen. Lasst uns mit dem untenstehenden Herausgeber lernen.

Was ist Three.js?

Wenn Sie diesen Artikel lesen, haben Sie möglicherweise ein gewisses Verständnis für Three.js. Lassen Sie uns kurz vorstellen, was Three.js ist.
Three.js ist eine Bibliothek, die WebGL macht. 3D-Effekte sind einfach im Browser anwenden. Während sich ein einfacher Cube in rohem WebGL in Hunderte Zeilen Javascript- und Shader-Code verwandeln würde, gibt es zur Einführung drei js. Wir begannen mit dem Aufbau der Szene aus rotierenden Würfeln. Wenn Sie auf Schwierigkeiten stoßen und Hilfe benötigen, finden Sie unten auf der Seite den Quellcode als Referenz.

Mindestens drei Arten von Komponenten, die für eine Szene benötigt werden

Kamera/Entscheidung, was auf dem Bildschirm gerendert wird

Lichtquelle / Sie haben Einfluss darauf, wie Materialien angezeigt werden und wie Materialien bei der Erzeugung von Schatten verwendet werden
Objekte / Sie sind die wichtigsten Darstellungsformationen in der Kameraperspektive: Kästen, Kugeln, usw.
Bevor Sie beginnen

Speichern Sie den folgenden HTML-Code auf Ihrem Computer, fügen Sie three.js in das js-Verzeichnis ein und öffnen Sie es dann im Browser

Der folgende Code wird vom Skript-Tag heruntergeladen

<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  // Our Javascript will go here.
 </script>
 </body>
</html>

Nach dem Login kopieren

Erstellen Sie eine Beispielszene

Um Three.js für die Anzeige verwenden zu können, benötigen wir drei Elemente: Szene, Kamera, Renderer zum Rendern der Szene von der Kamera.

Nehmen wir uns einen Moment Zeit, um zu erklären, was los ist. Wir haben nun die Szene, die Kamera und den Renderer erstellt.

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

Es gibt mehrere Kameras in three.js. Wir verwenden vorübergehend PerspectiveCamera

Sein erstes Attribut ist der Sichtwinkel (FOV), der den sichtbaren Sichtbereich darstellt, und sein Wert stellt die Winkelgröße dar.

Das zweite Attribut ist das Seitenverhältnis. Meistens möchten Sie die Breite dividiert durch die Höhe verwenden, sonst erhalten Sie am Ende etwas wie alte Filme auf einem Breitbildfernseher – das Bild sieht gequetscht aus.

Die letzten beiden Attribute sind die Nahsichtfläche und die Fernsichtfläche. Nur der Bereich zwischen diesen beiden Flächen wird gerendert. Darüber müssen Sie sich vorerst keine Sorgen machen; die Verwendung dieser Parameter kann die Leistung verbessern.

Lassen Sie uns über den Renderer sprechen. Das ist die Magie. Zusätzlich zu dem hier verwendeten WebGLRenderer stellt three.js auch einige Renderer für die Verwendung in älteren Browsern bereit, die WebGL nicht unterstützen.

Zusätzlich zur Erstellung einer Renderer-Instanz müssen wir auch die Größe des Anwendungs-Renderings festlegen. Es wird empfohlen, eine Methode zu verwenden, die die gesamte Breite und Höhe der Anwendung ausfüllt – in diesem Fall die Breite und Höhe des Browserfensters. Für leistungsorientierte Anwendungen können Sie setSize verwenden, um kleinere Werte festzulegen, z. B. window.innerHeight/2, window.innerWidth/2, wodurch die halbe Größe gerendert wird.

Wenn Sie die gesamte Größe mit niedriger Auflösung rendern möchten, können Sie den dritten Parameter von setSize – uodateStyle auf false setzen Wide Wenn der hohe Wert 100 % beträgt, wird die Anwendung mit halber Auflösung gerendert.

Jetzt müssen wir gerenderte Elemente zum HTML hinzufügen. Der Renderer zeigt uns die Szene durch die Leinwand.

„Das ist alles gut, aber was ist mit dem Würfel, den ich zuvor erwähnt habe?“ Fügen wir das jetzt hinzu.

Wir benötigen BoxGeometry, um den Würfel zu erstellen. Dieses Objekt enthält alle Punkte (Eckpunkte) und Füllungen (Flächen) des Würfels. Das besprechen wir später.

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;

Nach dem Login kopieren

Neben der Geometrie benötigen wir auch Materialien, um sie einzufärben. three.js stellt einige Materialien bereit, aber wir werden vorerst MeshBasicMaterial verwenden. Alle Materialien akzeptieren und wenden ein Objekt an, das alle Eigenschaften enthält. Der Einfachheit halber stellen wir nur ein Farbattribut bereit: Grün – 0x00ff00 Verwendet die gleichen hexadezimalen Farben wie in CSS und PS.

Das dritte Element, das wir brauchen, ist Mesh. Ein Netz ist ein Objekt, das ein Material auf die Geometrie anwendet, das wir dann in der Szene platzieren und frei bewegen können.

Wenn wir scene.add() aufrufen, wird das, was wir hinzufügen, standardmäßig an den Koordinaten (0, 0, 0,) angezeigt. Dies führt dazu, dass sich Kamera und Würfel intern überlappen. Um dies zu vermeiden, rücken wir die Kamera einfach etwas weiter nach außen.

Szene rendern

Wenn Sie den obigen Code in die HTML-Datei kopieren, wird nichts auf dem Bildschirm angezeigt. Weil wir die Szene noch nicht gerendert haben. Wir müssen also den Renderer oder die Animationsschleife aufrufen.

Dadurch wird eine Schleife erstellt, in der der Renderer jede Sekunde ein Bild zeichnet. Wenn Sie nicht viel über die Programmierung von Webspielen wissen, könnten Sie sagen: „Warum schreiben wir nicht eine setInterval-Funktion?“ Tatsächlich können wir das, aber requestAnimationFrame hat mehr Vorteile. Der wichtigste Vorteil besteht darin, dass requestAnimationFrame das Rendern anhält, wenn der Browser zu einer anderen Registerkarte wechselt, sodass keine wertvolle Rechenleistung und Akkulaufzeit verschwendet wird.

function animate() {
 requestAnimationFrame( animate );
 renderer.render( scene, camera );
}
animate();

Nach dem Login kopieren

Bewegen Sie den Würfel

Wenn Sie den gerade erstellten Code einfügen, sollten Sie einen grünen Würfel sehen. Lass es drehen, damit es nicht langweilig wird.

Fügen Sie den folgenden Code zu renderer.render in der Animationsfunktion hinzu:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

Nach dem Login kopieren

它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。

结果

恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。

完整代码参考如下。琢磨一下并深刻理解其工作机理

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  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 );

  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;

  var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
  };

  animate();
 </script>
 </body>
</html>

Nach dem Login kopieren

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7519

CakePHP-Tutorial

1378

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Feb 22, 2024 pm 08:21 PM

Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen

Detaillierte Erläuterung des Linux-Befehls „curl'. Feb 21, 2024 pm 10:33 PM

Detaillierte Erläuterung des Linux-Befehls „curl“ Zusammenfassung: Curl ist ein leistungsstarkes Befehlszeilentool für die Datenkommunikation mit dem Server. In diesem Artikel wird die grundlegende Verwendung des Curl-Befehls vorgestellt und tatsächliche Codebeispiele bereitgestellt, um den Lesern zu helfen, den Befehl besser zu verstehen und anzuwenden. 1. Was ist Locken? Curl ist ein Befehlszeilentool zum Senden und Empfangen verschiedener Netzwerkanfragen. Es unterstützt mehrere Protokolle wie HTTP, FTP, TELNET usw. und bietet umfangreiche Funktionen wie Datei-Upload, Datei-Download, Datenübertragung und Proxy

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Detaillierte Analyse der C-Sprachlernroute Feb 18, 2024 am 10:38 AM

Als weit verbreitete Programmiersprache im Bereich der Softwareentwicklung ist die Sprache C für viele Programmieranfänger die erste Wahl. Das Erlernen der C-Sprache kann uns nicht nur dabei helfen, grundlegende Programmierkenntnisse zu erwerben, sondern auch unsere Problemlösungs- und Denkfähigkeiten verbessern. In diesem Artikel wird eine Roadmap zum Erlernen der C-Sprache im Detail vorgestellt, um Anfängern dabei zu helfen, ihren Lernprozess besser zu planen. 1. Grundlegende Grammatik lernen Bevor wir mit dem Erlernen der C-Sprache beginnen, müssen wir zunächst die grundlegenden Grammatikregeln der C-Sprache verstehen. Dazu gehören Variablen und Datentypen, Operatoren, Steueranweisungen (z. B. if-Anweisungen,

Erfahren Sie mehr über Promise.resolve() Feb 18, 2024 pm 07:13 PM

Eine detaillierte Erklärung von Promise.resolve() erfordert spezifische Codebeispiele. Promise ist ein Mechanismus in JavaScript zur Verarbeitung asynchroner Vorgänge. In der tatsächlichen Entwicklung ist es häufig erforderlich, einige asynchrone Aufgaben zu verarbeiten, die nacheinander ausgeführt werden müssen, und die Methode Promise.resolve () wird verwendet, um ein erfülltes Promise-Objekt zurückzugeben. Promise.resolve() ist eine statische Methode der Promise-Klasse, die a akzeptiert

See all articles