Grundlegende Einführung: WebGL-Entwicklung mit Three.js
3D-Grafiken im Browser sind seit ihrer Einführung ein heißes Thema. Wenn Sie jedoch eine Anwendung mit reinem WebGL erstellen möchten, dauert dies sehr lange. Aus diesem Grund sind in letzter Zeit einige wirklich nützliche Bibliotheken entstanden. Three.js ist eines der beliebtesten und in dieser Serie zeige ich Ihnen, wie Sie es am besten nutzen, um atemberaubende 3D-Erlebnisse für Ihre Benutzer zu erstellen.
Bevor wir beginnen, erwarte ich, dass Sie über ein grundlegendes Verständnis des 3D-Raums verfügen, bevor Sie mit der Lektüre dieses Tutorials beginnen, da ich Dinge wie Koordinaten, Vektoren usw. nicht erklären werde.
Schritt 1: Vorbereitung
Erstellen Sie zunächst drei Dateien: index.html、main.js 和 style.css。现在，下载 Three.js（带有示例和源代码的整个 zip 文件，或者单独的 JavaScript 文件，您可以选择）。现在，打开 index.html und fügen Sie den folgenden Code ein:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./style.css"> <script src="./three.js"></script> </head> <body> <script src="./main.js"></script> </body> </html>
Das ist alles, was Sie in dieser Datei benötigen. Nur Deklarationen von Skripten und Stylesheets. Die ganze Magie wird in main.js 中，但在我们实现这一点之前，我们还需要一个技巧来让应用程序看起来更好。打开 style.css geschehen und fügen Sie den folgenden Code ein:
canvas {
position: fixed;
top: 0;
left: 0;
}
Dadurch wird die Leinwand in der oberen linken Ecke positioniert, da body standardmäßig 8-Pixel-Ränder hat. Jetzt können wir mit dem JavaScript-Code fortfahren.
Schritt 2: Szene und Renderer
Three.js verwendet das Konzept der Anzeigelisten. Das bedeutet, dass alle Objekte in einer Liste gespeichert und dann auf dem Bildschirm angezeigt werden.
Three.js verwendet das Konzept der Anzeigelisten. Das bedeutet, dass alle Objekte in einer Liste gespeichert und dann auf dem Bildschirm angezeigt werden. Hier ist es ein THREE.Scene-Objekt. Sie müssen der Szene alle Objekte hinzufügen, die Sie auf dem Bildschirm zeichnen möchten. Sie können so viele Szenen haben, wie Sie möchten, aber ein Renderer kann jeweils nur eine Szene zeichnen (natürlich können Sie die angezeigten Szenen wechseln).
Der Renderer zeichnet einfach alles in der Szene auf die WebGL-Leinwand. Three.js unterstützt auch das Zeichnen auf SVG oder 2D Canvas, wir konzentrieren uns jedoch auf WebGL.
Lassen Sie uns zunächst die Breite und Höhe des Fensters in Variablen speichern, wir werden sie später verwenden:
var width = window.innerWidth; var height = window.innerHeight;
Definieren Sie nun den Renderer und die Szene:
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene;
Die erste Zeile definiert den WebGL-Renderer. Sie können die Renderer-Optionen im ersten Parameter als Karte übergeben. Hier setzen wir antialias auf true, weil wir möchten, dass die Kanten des Objekts glatt und nicht gezackt sind.
Die zweite Zeile stellt die Renderergröße auf die Größe des Fensters ein und in der dritten Zeile legen wir die des Renderers fest canvas 元素添加到文档中（您也可以使用库来执行此操作，例如 jQuery： $( 'body').append(renderer.domElement)).
Der letzte definiert die Szene, es sind keine Parameter erforderlich.
Schritt 3: Würfel
Jetzt fügen wir hinzu, was wir zeichnen möchten. Lassen Sie es einen Würfel sein, da es sich um das einfachste 3D-Objekt handelt. In Three.js werden die auf dem Bildschirm gezeichneten Objekte als Raster bezeichnet. Jedes Netz muss seine eigene Geometrie und seine eigenen Materialien haben. Geometrie ist eine Reihe von Punkten, die verbunden werden müssen, um ein Objekt zu erstellen. Ein Material ist einfach Farbe (oder Malerei, aber das ist nicht das Thema dieses Tutorials), die ein Objekt bedeckt. Also, lasst uns unseren Würfel erstellen. Glücklicherweise gibt es in Three.js einige Hilfsfunktionen zum Erstellen von Grundelementen (einfache Formen):
var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.y = Math.PI * 45 / 180;
scene.add(cube);
Wie Sie sehen, erstellen wir zunächst die Geometrie. Parameter definieren die Größe des Würfels: Breite, Höhe und Tiefe.
Als nächstes definieren wir das Material des Würfels. Es gibt einige Materialtypen in Three.js, aber dieses Mal werden wir THREE.MeshLambertMaterial verwenden, weil wir später etwas Beleuchtung benötigen (dieses Material verwendet Lamberts Algorithmus für Beleuchtungsberechnungen). Sie können die Optionen im ersten Argument als Karte übergeben, genau wie bei Renderern – das ist so ziemlich die Regel für komplexere Objekte in Three.js. Hier verwenden wir nur Farbe, die als Hexadezimalzahl übergeben wird.
In der dritten Zeile erstellen wir ein Netz mit der zuvor erstellten Geometrie und dem zuvor erstellten Material. Als nächstes drehen wir den Würfel um 45 Grad auf der Y-Achse, damit er besser aussieht. Wir müssen Grad in Bogenmaß umwandeln, was über eine Gleichung gehandhabt wird, die Sie vielleicht aus dem Physikunterricht an der High School kennen: Math.PI * 45 / 180. Abschließend wird der Würfel zur Szene hinzugefügt.
Jetzt können Sie index.html in Ihrem Browser öffnen, um die Ergebnisse anzuzeigen, aber Sie sehen nichts, da die Szene noch nicht gerendert wurde.
Schritt 4: Kamera!
Um etwas zu rendern, müssen wir zunächst eine Kamera zur Szene hinzufügen, damit der Renderer weiß, aus welchem Winkel der Inhalt gerendert werden soll. Es gibt verschiedene Arten von Kameras in Three.js, aber Sie werden wahrscheinlich nur THREE.PerspectiveCamera verwenden. Diese Art von Kamera zeigt eine Szene der Welt, wie wir sie sehen. Lasst uns eines erstellen:
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
“要渲染某些内容，首先我们需要将相机添加到场景中，以便渲染器知道应该从哪个角度渲染内容。”
创建相机比我们迄今为止所做的其他事情要复杂一些。第一个参数定义 FOV（视野），即从相机所在位置可以看到的角度。 45 度的 FOV 看起来很自然。接下来，我们定义相机的比率。这始终是渲染器的宽度除以高度，除非您想实现一些特殊效果。最后两个数字定义了对象与要绘制的相机的距离。
现在我们必须稍微向后和向上移动相机，因为在 Three.js 中创建的所有对象都将其位置设置在场景中间（x: 0, y: 0, z: 0）默认：
camera.position.y = 160; camera.position.z = 400;
z 坐标在观看者的方向上为正，因此具有较高 z 位置的对象会显得离您更近（在这种情况下，由于我们移动了相机，所有对象都会显得更远）来自您）。
现在，让我们将相机添加到场景并渲染它：
scene.add(camera); renderer.render(scene, camera);
添加相机就像添加立方体一样。下一行使用该相机渲染场景。现在您可以打开浏览器，您应该看到以下内容：
您应该只能看到立方体的顶部。这是因为我们将相机向上移动，但它仍然看起来在它的正前方。这个问题可以通过让相机知道它应该看什么位置来解决。在设置相机位置的行之后添加此行：
camera.lookAt(cube.position);
传入的唯一参数是相机将看到的位置。现在，场景看起来更好了，但立方体仍然是黑色，无论您在创建立方体时设置了什么颜色：
第 5 步： 灯！
立方体是黑色的，因为场景中没有灯光，所以它就像一个完全黑的房间。您会看到白色背景，因为除了立方体之外没有任何东西可以绘制。为了避免这种情况，我们将使用一种称为天空盒的技术。基本上，我们将添加一个大立方体来显示场景的背景（如果是开放空间，通常是一些远处的地形）。那么，让我们创建这个盒子。此代码应位于 renderer.render 调用之前：
var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
scene.add(skybox);
此代码与创建多维数据集的代码类似。但这一次的几何形状要大得多。我们还使用了 THREE.MeshBasicMaterial 因为我们不需要照亮天空盒。另外，请注意传递给材料的附加参数：side: THREE.BackSide。由于立方体将从内部显示，因此我们必须更改绘制的侧面（通常，Three.js 只绘制外墙）。
现在渲染的场景是全黑的。为了解决这个问题，我们必须向场景添加灯光。我们将使用 THREE.PointLight，它像灯泡一样发出光。在天空盒后添加这些行：
var pointLight = new THREE.PointLight(0xffffff); pointLight.position.set(0, 300, 200); scene.add(pointLight);
如您所见，我们创建了白色的点光源，然后将其位置设置为向上和向后一点，以照亮立方体的正面和顶部。最后，灯光像任何其他对象一样添加到场景中。打开浏览器，您应该会看到一个彩色阴影立方体：
但是立方体仍然很无聊。让我们为其添加一些动作。
第 6 步： 行动！
现在我们将为场景添加一些运动。让我们让立方体绕 Y 轴旋转。但首先，我们必须改变渲染场景的方式。一次 renderer.render 调用，渲染场景的当前状态一次。因此，即使我们以某种方式为立方体设置动画，我们也不会看到它移动。要改变这一点，我们必须将渲染循环添加到我们的应用程序中。这可以使用专门为此目的创建的 renderAnimationFrame 函数来实现。大多数主要浏览器都支持它，对于那些不支持它的浏览器，Three.js 附带了自己的 polyfill。那么，让我们改变一下：
renderer.render(scene, camera);
对此：
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
实际上，那里没有循环，因为它会冻结浏览器。 requestAnimationFrame 函数的行为有点像 setTimeout，但它会在浏览器准备就绪时调用该函数。因此，显示的场景没有任何变化，立方体仍然没有移动。让我们解决这个问题。 Three.js自带了THREE.Clock，可以用来实现对象的平滑动画。首先在render函数定义之前进行初始化：
var clock = new THREE.Clock;
现在，每次调用 clock.getDelta 时，它都会返回自上次调用以来的时间（以毫秒为单位）。这可以用来旋转立方体，如下所示：
cube.rotation.y -= clock.getDelta();
在 render 函数中的 renderer.render 和 requestAnimationFrame 调用之间添加此行。它只是减去立方体在 Y 轴上旋转所花费的时间（记住它以弧度为单位）来顺时针旋转立方体。现在打开浏览器，您应该看到立方体顺时针平稳旋转。
结论
在本系列的这一部分中，您学习了如何准备场景、添加对象和灯光以及如何为事物设置动画。您可以尝试该应用程序，添加更多或不同的对象、灯光。由你决定。下次我将向您展示如何使用纹理以及如何使用粒子创建一些漂亮的效果。如果遇到任何问题，请不要忘记查看文档。
Das obige ist der detaillierte Inhalt vonGrundlegende Einführung: WebGL-Entwicklung mit Three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
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
1386
52
Vier empfohlene KI-gestützte Programmiertools
Apr 22, 2024 pm 05:34 PM
Dieses KI-gestützte Programmiertool hat in dieser Phase der schnellen KI-Entwicklung eine große Anzahl nützlicher KI-gestützter Programmiertools zu Tage gefördert. KI-gestützte Programmiertools können die Entwicklungseffizienz verbessern, die Codequalität verbessern und Fehlerraten reduzieren. Sie sind wichtige Helfer im modernen Softwareentwicklungsprozess. Heute wird Dayao Ihnen 4 KI-gestützte Programmiertools vorstellen (und alle unterstützen die C#-Sprache). https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot ist ein KI-Codierungsassistent, der Ihnen hilft, Code schneller und mit weniger Aufwand zu schreiben, sodass Sie sich mehr auf Problemlösung und Zusammenarbeit konzentrieren können. Git
Welcher KI-Programmierer ist der beste? Entdecken Sie das Potenzial von Devin, Tongyi Lingma und SWE-Agent
Apr 07, 2024 am 09:10 AM
Am 3. März 2022, weniger als einen Monat nach der Geburt von Devin, dem weltweit ersten KI-Programmierer, entwickelte das NLP-Team der Princeton University einen Open-Source-KI-Programmierer-SWE-Agenten. Es nutzt das GPT-4-Modell, um Probleme in GitHub-Repositorys automatisch zu lösen. Die Leistung des SWE-Agenten auf dem SWE-Bench-Testsatz ist ähnlich wie die von Devin, er benötigt durchschnittlich 93 Sekunden und löst 12,29 % der Probleme. Durch die Interaktion mit einem dedizierten Terminal kann der SWE-Agent Dateiinhalte öffnen und durchsuchen, die automatische Syntaxprüfung verwenden, bestimmte Zeilen bearbeiten sowie Tests schreiben und ausführen. (Hinweis: Der obige Inhalt stellt eine geringfügige Anpassung des Originalinhalts dar, die Schlüsselinformationen im Originaltext bleiben jedoch erhalten und überschreiten nicht die angegebene Wortbeschränkung.) SWE-A
Zusammenfassung der fünf beliebtesten Go-Sprachbibliotheken: wesentliche Tools für die Entwicklung
Feb 22, 2024 pm 02:33 PM
Zusammenfassung der fünf beliebtesten Go-Sprachbibliotheken: wesentliche Werkzeuge für die Entwicklung, die spezifische Codebeispiele erfordern Seit ihrer Geburt hat die Go-Sprache große Aufmerksamkeit und Anwendung gefunden. Als aufstrebende effiziente und prägnante Programmiersprache ist die schnelle Entwicklung von Go untrennbar mit der Unterstützung umfangreicher Open-Source-Bibliotheken verbunden. In diesem Artikel werden fünf beliebte Go-Sprachbibliotheken vorgestellt. Diese Bibliotheken spielen eine wichtige Rolle bei der Go-Entwicklung und bieten Entwicklern leistungsstarke Funktionen und praktische Entwicklungserfahrung. Um die Verwendung und Funktion dieser Bibliotheken besser zu verstehen, werden wir sie gleichzeitig anhand konkreter Codebeispiele erläutern.
Erfahren Sie, wie Sie mobile Anwendungen mit der Go-Sprache entwickeln
Mar 28, 2024 pm 10:00 PM
Tutorial zur Entwicklung mobiler Anwendungen in der Go-Sprache Da der Markt für mobile Anwendungen weiterhin boomt, beginnen immer mehr Entwickler damit, sich mit der Verwendung der Go-Sprache für die Entwicklung mobiler Anwendungen zu befassen. Als einfache und effiziente Programmiersprache hat die Go-Sprache auch großes Potenzial für die Entwicklung mobiler Anwendungen gezeigt. In diesem Artikel wird detailliert beschrieben, wie die Go-Sprache zum Entwickeln mobiler Anwendungen verwendet wird, und es werden spezifische Codebeispiele angehängt, um den Lesern den schnellen Einstieg und die Entwicklung eigener mobiler Anwendungen zu erleichtern. 1. Vorbereitung Bevor wir beginnen, müssen wir die Entwicklungsumgebung und die Tools vorbereiten. Kopf
Welche Linux-Distribution eignet sich am besten für die Android-Entwicklung?
Mar 14, 2024 pm 12:30 PM
Die Android-Entwicklung ist eine arbeitsreiche und spannende Aufgabe, und die Auswahl einer geeigneten Linux-Distribution für die Entwicklung ist besonders wichtig. Welche der vielen Linux-Distributionen eignet sich am besten für die Android-Entwicklung? In diesem Artikel wird dieses Problem unter verschiedenen Aspekten untersucht und spezifische Codebeispiele aufgeführt. Werfen wir zunächst einen Blick auf einige derzeit beliebte Linux-Distributionen: Ubuntu, Fedora, Debian, CentOS usw. Sie alle haben ihre eigenen Vorteile und Eigenschaften.
Erkundung der Front-End-Technologie der Go-Sprache: eine neue Vision für die Front-End-Entwicklung
Mar 28, 2024 pm 01:06 PM
Als schnelle und effiziente Programmiersprache erfreut sich Go im Bereich der Backend-Entwicklung großer Beliebtheit. Allerdings assoziieren nur wenige Menschen die Go-Sprache mit der Front-End-Entwicklung. Tatsächlich kann die Verwendung der Go-Sprache für die Front-End-Entwicklung nicht nur die Effizienz verbessern, sondern Entwicklern auch neue Horizonte eröffnen. In diesem Artikel wird die Möglichkeit der Verwendung der Go-Sprache für die Front-End-Entwicklung untersucht und spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis dieses Bereichs zu erleichtern. In der traditionellen Frontend-Entwicklung werden häufig JavaScript, HTML und CSS zum Erstellen von Benutzeroberflächen verwendet
VSCode verstehen: Wofür wird dieses Tool verwendet?
Mar 25, 2024 pm 03:06 PM
„VSCode verstehen: Wofür wird dieses Tool verwendet?“ „Als Programmierer, egal ob Sie Anfänger oder erfahrener Entwickler sind, können Sie auf den Einsatz von Codebearbeitungstools nicht verzichten.“ Unter vielen Bearbeitungstools ist Visual Studio Code (kurz VSCode) bei Entwicklern als Open-Source-, leichter und leistungsstarker Code-Editor sehr beliebt. Wofür genau wird VSCode verwendet? Dieser Artikel befasst sich mit den Funktionen und Verwendungsmöglichkeiten von VSCode und stellt spezifische Codebeispiele bereit, um den Lesern zu helfen
Ist PHP Front-End oder Back-End in der Webentwicklung?
Mar 24, 2024 pm 02:18 PM
PHP gehört zum Backend in der Webentwicklung. PHP ist eine serverseitige Skriptsprache, die hauptsächlich zur Verarbeitung serverseitiger Logik und zur Generierung dynamischer Webinhalte verwendet wird. Im Vergleich zur Front-End-Technologie wird PHP eher für Back-End-Vorgänge wie die Interaktion mit Datenbanken, die Verarbeitung von Benutzeranfragen und die Generierung von Seiteninhalten verwendet. Anschließend wird anhand konkreter Codebeispiele die Anwendung von PHP in der Backend-Entwicklung veranschaulicht. Schauen wir uns zunächst ein einfaches PHP-Codebeispiel zum Herstellen einer Verbindung zu einer Datenbank und zum Abfragen von Daten an:
