Wie funktioniert three js - Ein Anfängerhandbuch

Three.js ist eine JavaScript-Bibliothek, mit der interaktive 3D-Diagramme von Webseiten erstellt und angezeigt werden können. Es ermöglicht Ihnen, komplexe 3D-Szenen, Animationen und Visualisierungen mit einer relativ einfachen API zu erstellen.

Installation und Verbindung

Um mit three zu beginnen.js muss die Bibliothek herunterladen oder über ein CDN verbinden. Um eine Verbindung über CDN herzustellen, fügen Sie den folgenden Code zu Ihrer HTML-Datei hinzu:

Erstellen einer Szene

Bevor Sie Objekte und Elemente in Ihrer 3D-Szene erstellen können, müssen Sie eine Instanz der Klasse erstellen Scene. Dies kann wie folgt erfolgen:

const scene = new THREE.Scene();

Erstellen einer Kamera

Die Kamera wird verwendet, um zu bestimmen, was der Benutzer Ihrer 3D-Szene genau sehen wird. Normalerweise wird eine Perspektivkamera verwendet PerspectiveCamera. Verwenden Sie den folgenden Code, um eine Kamera zu erstellen:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Erstellen eines Renderers

Der Renderer wird verwendet, um Ihre 3D-Szene auf einer Webseite anzuzeigen. Three.js unterstützt mehrere Arten von Renderern, aber am gebräuchlichsten ist dies WebGLRenderer. Verwenden Sie den folgenden Code, um einen Renderer zu erstellen:

const renderer = new THREE.WebGLRenderer();

Nachdem Sie den Renderer erstellt haben, müssen Sie seine Größe mithilfe der Methode angeben setSize und fügen Sie es mit einer Methode zur Seite hinzu appendChild. Zum Beispiel:

renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);

Szene anzeigen

Um eine Szene anzuzeigen, müssen Sie in der Hauptaktualisierungsschleife (allgemein als "render loop" bezeichnet) die Methode aufrufen render ihren Renderer. Zum Beispiel:

function animate() animate();

Erstellen von Geometrie und Material

Um Objekte zu Ihrer Szene hinzuzufügen, müssen Sie zuerst die Geometrie (Form) des Objekts und das Material (wie es aussehen wird) erstellen. Um beispielsweise einen roten Würfel mit der Größe 1x1x1 zu erstellen, können Sie den folgenden Code verwenden:

const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial(< color: 0xff0000 >);const cube = new THREE.Mesh(geometry, material);scene.add(cube);

Hinzufügen von Beleuchtung

Um Ihre Szene realistischer aussehen zu lassen, können Sie Beleuchtung hinzufügen. Three.js bietet verschiedene Beleuchtungstypen an, einschließlich AmbientLight (einfache Farbsättigung) und DirectionalLight (gerichtetes Licht). Um beispielsweise Richtungslicht zu Ihrer Szene hinzuzufügen, verwenden Sie den folgenden Code:

const light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(1, 1, 1);scene.add(light);

Dies sind die Grundlagen der Arbeit mit three.js. Sie können komplexere Szenen erstellen, Objekte animieren und andere Elemente wie Texturen und Shader hinzufügen. Es wird empfohlen, die Dokumentation und die Beispiele von three zu lesen.js, um die Möglichkeiten dieser Bibliothek tiefer zu verstehen.

Grundprinzipien der Arbeit

Die Grundprinzipien der Arbeit mit Three.js sind:

1. Szene (Scene): Dies ist das Objekt, in dem die gesamte Visualisierung stattfindet. Es enthält alle Objekte, Licht und Kamera. Um eine Szene zu erstellen, müssen Sie eine Instanz der Klasse erstellen THREE.Scene.
2. Kamera (Camera): Die Kamera bestimmt, welche Szenenobjekte für den Benutzer sichtbar sind. Three.js bietet verschiedene Kameratypen wie perspektivisch, orthographisch und andere. Um eine Kamera zu erstellen, müssen Sie eine Instanz der entsprechenden Klasse erstellen, z. B., THREE.PerspectiveCamera.
3. Renderer (Renderer): Dies ist das Objekt, das für das Rendern einer Szene auf Leinwand (Canvas) verantwortlich ist. Three.js bietet verschiedene Renderer-Typen an, zum Beispiel, THREE.WebGLRenderer. Um einen Renderer zu erstellen, müssen Sie eine Instanz der entsprechenden Klasse erstellen und der Webseite eine Leinwand hinzufügen.
4. Materialien und Texturen: Materialien bestimmen das Aussehen eines Objekts, und Texturen fügen Details und Bilder zur Oberfläche des Objekts hinzu. Three.js bietet viele eingebettete Materialien und Texturen sowie die Möglichkeit, eigene zu erstellen.
5. Geometrie (Geometry) und Modelle (Mesh): Geometrie definiert die Form eines Objekts, und das Modell (Mesh) kombiniert Geometrie und Material, um ein bestimmtes Objekt zu erstellen. Three.js bietet viele integrierte Geometrien und Modelle sowie die Möglichkeit, eigene zu erstellen.
6. Beleuchtung (Lighting): Beleuchtung bestimmt, wie Objekte auf Licht reagieren. Three.js bietet verschiedene Arten von Licht, wie Ambient, direktional, Punkt und andere.
7. Animation: Three.js bietet die Möglichkeit, Animationen zu erstellen, mit denen Sie Objekte visuell positionieren, drehen, skalieren oder andere Eigenschaften davon ändern können. Sie müssen Klassenobjekte verwenden, um Animationen zu erstellen THREE.AnimationMixer und THREE.AnimationClip.

Die Grundprinzipien der Arbeit mit Three.mit js können Sie komplexe und interessante 3D-Szenen, Visualisierungen und Spiele auf Webseiten mit einem offenen und flexiblen Tool erstellen. Diese Bibliothek hat eine große Gemeinschaft von Entwicklern, die sie aktiv entwickeln und unterstützen, was sie bei Anfängern und professionellen Entwicklern sehr beliebt macht.