Eine 3D-Szene mit einem Haus und einem Weg

Ralf Dreiundzwanzig

vor 9 Monaten

A-Frame ist ein Framework für die Entwicklung von Web-basierten Virtual Reality (VR) und Augmented Reality (AR) Anwendungen. A-Frame verwendet HTML-ähnliche Elemente, um 3D-Szenen zu erstellen, die in jedem Webbrowser oder VR-Headset angezeigt werden können. Three.js ist eine JavaScript-Bibliothek für die Erstellung von 3D-Grafiken im Web. Three.js ermöglicht es Ihnen, 3D-Objekte, Materialien, Lichter, Animationen und Effekte zu erstellen und zu manipulieren, die in einem WebGL-kompatiblen Browser gerendert werden können.

Seiteninhalt

Hinweis

Dieses Tutorial ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe.

Dieses Metaverse Tutorial mit A-Frame und Three.js entstand am 11.08.2023. Ich verwende eine Node.JS Node.js: 16.17.1 Umgebung mit Visual Studio Code Version: 1.81.1 unter Windows 11. Das gezeigte 3D-Modell ist ein Architekturexperiment für das Metaverse für unser Open Source Metaverse Commerce & Sales Projekt.

Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie. Der hier gezeigte Weg ist nicht der einzige, es ist lediglich, der, den ich bevorzuge.

Das Open Source Metaverse Commerce & Sales Projekt wird in der Regel am Freitag in der Entwicklungsphase auf unserer Projektseite veröffentlicht.

Wir möchten in einer Node.js-Umgebung mit A-Frame und Three.js ein Haus laden und als VR-Erlebnis mit den Tastaturen WASD und mit den Teleports betreten.

glb-Datei Laden

Um eine glb-Datei in Three.js zu laden, benötigen Sie die GLTFLoader-Klasse, die Sie aus dem examples/jsm/loaders-Ordner importieren können. Mit der load-Methode können Sie dann die glb-Datei als Parameter übergeben und eine Callback-Funktion definieren, die aufgerufen wird, wenn die Datei geladen ist. In dieser Funktion können Sie auf das geladene 3D-Objekt zugreifen und es Ihrer Szene hinzufügen. Zum Beispiel:

import { GLTFLoader } from '../js/examples/jsm/loaders/GLTFLoader.js';

var loader = new GLTFLoader();
loader.load( 'haus.glb', function ( gltf ) {
  var haus = gltf.scene; // das Haus-Objekt ist geladen
  haus.scale.set(1, 1, 1); // Sie können die Skalierung anpassen
  haus.position.set(0, 0, 0); // Sie können die Position anpassen
  scene.add(haus); // fügen Sie das Haus der Szene hinzu
} );

Um die glb-Datei in A-Frame zu laden, können Sie die gltf-model-Komponente verwenden, die ein gltf- oder glb-Attribut akzeptiert, das den Pfad zur Datei angibt. Sie können dann die A-Frame-Attribute verwenden, um die Position, Rotation und Skalierung des Modells anzupassen. Zum Beispiel:

<a-scene>
  <a-entity gltf-model="haus.glb" position="0 0 0" rotation="0 0 0" scale="1 1 1"></a-entity>
</a-scene>

Um die Szene als VR-Erlebnis zu betreten, müssen Sie sowohl in Three.js als auch in A-Frame einen VR-fähigen Renderer erstellen. In Three.js können Sie dazu die WebXRManager-Klasse verwenden, die eine Methode setSessionMode hat, um den VR-Modus zu aktivieren. In A-Frame können Sie einfach das vr-mode-ui-Attribut auf der a-scene-Komponente verwenden, um ein UI-Element zu erstellen, das es dem Benutzer ermöglicht, in den VR-Modus zu wechseln. Zum Beispiel:

// In Three.js
var renderer = new THREE.WebGLRenderer();
renderer.xr.setSessionMode( 'immersive-vr' ); // aktiviert den VR-Modus

// In A-Frame
<a-scene vr-mode-ui="enabled: true"> <!-- erstellt ein UI-Element für den VR-Modus -->
</a-scene>

// In Three.js
var controls = new PointerLockControls( camera, document.body );
scene.add( controls.getObject() ); // fügt die Steuerung der Szene hinzu

// In A-Frame
<a-camera wasd-controls="enabled: true"> <!-- aktiviert die WASD-Steuerelemente -->
</a-camera>

Um sich in der VR-Szene mit Teleports zu bewegen, können Sie in Three.js die TeleportControls-Klasse verwenden, die es Ihnen ermöglicht, einen Teleportationsstrahl mit dem Controller auszulösen und einen Zielort auszuwählen. In A-Frame können Sie die teleport-controls-Komponente verwenden, die ähnlich funktioniert. Zum Beispiel:

// In Three.js
var teleportControls = new TeleportControls( camera, controller );
scene.add( teleportControls ); // fügt die Teleport-Steuerelemente der Szene hinzu

// In A-Frame
<a-entity teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; button: trigger; collisionEntities: #ground, #objects;"> <!-- fügt die Teleport-Steuerelemente der Entität hinzu -->
</a-entity>

Böse Überraschung am Ende des Tages TeleportControls gibts es augenscheinlich nicht mehr. Eine Mischung aus alten Three.js Quellen und aktuellen Umgebungen empfinde ich nicht sinnvoll.

Wie aktiviere ich den VR-Modus in Three.js und A-Frame?

Um den VR-Modus in Three.js und A-Frame zu aktivieren, müssen Sie zunächst einen VR-fähigen Renderer erstellen, der die WebXR-API unterstützt. In Three.js können Sie dazu die WebXRManager-Klasse verwenden, die eine Methode setSessionMode hat, um den VR-Modus zu aktivieren. In A-Frame können Sie einfach das vr-mode-ui-Attribut auf der a-scene-Komponente verwenden, um ein UI-Element zu erstellen, das es dem Benutzer ermöglicht, in den VR-Modus zu wechseln. Zum Beispiel:

// In Three.js
var renderer = new THREE.WebGLRenderer();
renderer.xr.setSessionMode( 'immersive-vr' ); // aktiviert den VR-Modus

// In A-Frame
<a-scene vr-mode-ui="enabled: true"> <!-- erstellt ein UI-Element für den VR-Modus -->
</a-scene>

Wenn Sie den VR-Modus aktiviert haben, können Sie dann ein VR-fähiges Gerät wie eine Brille oder einen Controller verwenden, um die Szene zu erleben. Sie können auch die Enter VR-Schaltfläche auf dem Bildschirm anklicken, um in den VR-Modus zu wechseln, wenn Sie kein VR-Gerät haben.

Wie kann ich A-Frame und Three.js kombinieren?

Um A-Frame und Three.js zu kombinieren, können Sie entweder die A-Frame-Komponenten verwenden, die die Three.js-Objekte unter der Haube verwalten, oder direkt auf die Three.js-API zugreifen, die von A-Frame ausgesetzt wird. Beide Ansätze haben ihre Vor- und Nachteile, je nachdem, wie viel Kontrolle und Flexibilität Sie über die 3D-Szene benötigen.

Wenn Sie die A-Frame-Komponenten verwenden, können Sie die gltf-model-Komponente verwenden, um eine glb-Datei in Ihrer Szene zu laden, wie in dem Beispiel gezeigt. Dies ist der einfachste Weg, um ein 3D-Modell in A-Frame zu integrieren, da Sie nur das gltf- oder glb-Attribut angeben müssen, das den Pfad zur Datei angibt. Sie können dann die anderen A-Frame-Attribute verwenden, um die Position, Rotation und Skalierung des Modells anzupassen. Zum Beispiel:

<a-scene>
  <a-entity gltf-model="haus.glb" position="0 0 0" rotation="0 0 0" scale="1 1 1"></a-entity>
</a-scene>

Kann ich auch andere 3D-Modelle laden?

Ja, Sie können auch andere 3D-Modelle laden, die im glTF- oder glb-Format vorliegen. Diese Formate sind standardisierte Dateiformate für die Übertragung und das Laden von 3D-Szenen und -Modellen. Sie sind kompatibel mit vielen 3D-Anwendungen und -Bibliotheken, wie z.B. Three.js und A-Frame. Sie können 3D-Modelle im glTF- oder glb-Format aus verschiedenen Quellen beziehen, wie z.B.:

Sketchfab, eine Plattform, auf der Sie 3D-Modelle ansehen, kaufen und herunterladen können. Sie können nach dem Tag “glb” suchen, um Modelle zu finden, die in diesem Format verfügbar sind.
CGTrader, ein Marktplatz für 3D-Modelle, auf dem Sie Modelle in verschiedenen Dateiformaten kaufen oder kostenlos herunterladen können. Sie können nach dem Dateiformat “glTF” filtern, um Modelle zu finden, die in diesem Format oder in glb enthalten sind.
TurboSquid, eine Website, auf der Sie kostenlose oder kostenpflichtige 3D-Modelle in verschiedenen Dateiformaten finden können. Sie können nach dem Suchbegriff “glb-model” suchen, um Modelle zu finden, die in diesem Format verfügbar sind.

Wenn Sie ein eigenes 3D-Modell haben, das Sie in glTF oder glb konvertieren möchten, können Sie auch Online-Konverter wie GLB Packer oder Online 3D Model Converter verwenden, die verschiedene Eingabeformate unterstützen.

Unser Atelier erstellt Ihnen gerne nach Ihren Vorstellungen und Wünschen 3D-Modelle. Ich hoffe, diese Informationen helfen Ihnen bei Ihrem Projekt.

3D-Szene als VR-Erlebnis

Um eine 3D-Szene als VR-Erlebnis zu erstellen, können Sie entweder Three.js oder A-Frame verwenden, je nachdem, wie viel Kontrolle und Flexibilität Sie über die Szene benötigen. Three.js ist eine niedrigere Ebene der 3D-Programmierung, die Ihnen mehr Möglichkeiten bietet, die Szene zu gestalten und zu optimieren, aber auch mehr Code erfordert. A-Frame ist eine höhere Ebene der 3D-Programmierung, die auf Three.js aufbaut und Ihnen erlaubt, die Szene mit HTML-ähnlichen Tags zu erstellen, aber auch einige Einschränkungen hat.

Wenn Sie Three.js verwenden möchten, müssen Sie einen VR-fähigen Renderer erstellen, der die WebXR-API unterstützt. Dies können Sie tun, indem Sie die WebXRManager-Klasse verwenden, die eine Methode setSessionMode hat, um den VR-Modus zu aktivieren. Zum Beispiel:

var renderer = new THREE.WebGLRenderer();
renderer.xr.setSessionMode( 'immersive-vr' ); // aktiviert den VR-Modus

Wenn Sie A-Frame verwenden möchten, müssen Sie einfach das vr-mode-ui-Attribut auf der a-scene-Komponente verwenden, um ein UI-Element zu erstellen, das es dem Benutzer ermöglicht, in den VR-Modus zu wechseln. Zum Beispiel:

<a-scene vr-mode-ui="enabled: true"> <!-- erstellt ein UI-Element für den VR-Modus -->
</a-scene>

Sie können auch beide Ansätze kombinieren, indem Sie A-Frame verwenden, um die Szene zu erstellen, und dann auf die Three.js-API zugreifen, die von A-Frame ausgesetzt wird. Zum Beispiel können Sie die renderer-Komponente verwenden, um den WebXRManager von A-Frame zu erhalten und den VR-Modus zu aktivieren. Zum Beispiel:

<a-scene renderer="webxr: true"> <!-- aktiviert den WebXRManager von A-Frame -->
  <a-entity id="renderer"></a-entity> <!-- eine Entität, um auf den Renderer zuzugreifen -->
</a-scene>

var el = document.querySelector('#renderer'); // Zugriff auf die Entität
var renderer = el.components.renderer.renderer; // Zugriff auf den Renderer
renderer.xr.setSessionMode( 'immersive-vr' ); // aktiviert den VR-Modus

Um sich in der VR-Szene mit den Tastaturen WASD zu bewegen, können Sie in Three.js die PointerLockControls-Klasse verwenden, die es Ihnen ermöglicht, die Kamera mit der Maus zu steuern und sich mit den WASD-Tasten zu bewegen. In A-Frame können Sie die wasd-controls-Komponente verwenden, die standardmäßig auf der a-camera-Komponente aktiviert ist. Um sich in der VR-Szene mit Teleports zu bewegen, können Sie in Three.js die TeleportControls-Klasse verwenden, die es Ihnen ermöglicht, einen Teleportationsstrahl mit dem Controller auszulösen und einen Zielort auszuwählen. In A-Frame können Sie die teleport-controls-Komponente verwenden, die ähnlich funktioniert.

Mögliche Fehler: 3D-Modelle werden nicht geladen

Es gibt mehrere mögliche Gründe, warum Ihre 3D-Modelle nicht geladen werden. Hier sind einige häufige Probleme und Lösungen, die ich gefunden habe:

Stellen Sie sicher, dass Sie einen lokalen Server verwenden, wenn Sie offline entwickeln. Einige Modelle können nicht direkt von der Festplatte geladen werden, sondern benötigen einen HTTP-Server.
Überprüfen Sie, ob Ihre Modelle im gltf-viewer geladen werden. Wenn nicht, liegt das Problem möglicherweise im Modell selbst. Möglicherweise müssen Sie das Modell konvertieren oder reparieren.
Achten Sie auf die Skalierung Ihrer Modelle. Einige Modelle sind standardmäßig zu groß oder zu klein für die Szene und müssen angepasst werden. Sie können die Skalierung mit dem scale-Attribut oder in Ihrem Code ändern.
Achten Sie auf CORS-Fehler, wenn Sie Modelle von einer anderen Website laden. CORS steht für Cross-Origin Resource Sharing und bedeutet, dass die Website, von der Sie das Modell laden, Ihnen die Erlaubnis geben muss, dies zu tun.
Verwenden Sie eine aktuelle Version von A-Frame und Three.js. Es kann sein, dass ältere Versionen nicht mit den neuesten GLTF-Standards kompatibel sind.

Skalierung von 3D-Modellen

Die Skalierung Ihrer Modelle hängt von der Größe Ihrer A-Frame-Szene ab. Es gibt keine feste Regel, wie groß Ihre Modelle in Blender sein sollten, aber Sie können einige Richtlinien befolgen, um eine konsistente und realistische Skalierung zu erreichen:

Verwenden Sie die gleichen Einheiten in Blender und A-Frame. Wenn Sie zum Beispiel Meter als Einheit in Blender verwenden, stellen Sie sicher, dass Sie auch Meter als Einheit in A-Frame einstellen.
Orientieren Sie sich an der Größe der Kamera oder des Spielers in Ihrer Szene. Die Kamera oder der Spieler repräsentiert die menschliche Perspektive in Ihrer Szene, daher sollten Ihre Modelle im Verhältnis zu ihnen skaliert werden. Eine typische Kamerahöhe ist etwa 1,6 Meter, aber Sie können diese je nach Bedarf anpassen.
Vergleichen Sie Ihre Modelle mit Referenzobjekten in Ihrer Szene. Wenn Sie zum Beispiel ein Haus modellieren, können Sie es mit einem anderen Objekt vergleichen, das eine bekannte Größe hat, wie zum Beispiel eine Tür oder ein Fenster. Dies hilft Ihnen, die Proportionen und die Detailgenauigkeit Ihrer Modelle zu beurteilen.
Testen Sie Ihre Modelle in VR oder AR, wenn möglich. Dies ist der beste Weg, um die Skalierung Ihrer Modelle aus erster Hand zu erleben und zu überprüfen, ob sie Ihren Erwartungen entsprechen. Sie können Ihre Modelle in VR oder AR testen, indem Sie einen WebXR-kompatiblen Browser und ein VR- oder AR-Headset verwenden.

Was sind die Vorteile von A-Frame und Three.js

A-Frame bietet viele Vorteile, wie zum Beispiel:

Einfachheit: Sie können VR- und AR-Anwendungen mit nur wenigen Zeilen HTML-Code erstellen, ohne viel Programmierkenntnisse zu benötigen.
Erweiterbarkeit: Sie können A-Frame mit verschiedenen Komponenten anpassen, die zusätzliche Funktionen und Interaktionen bieten. Sie können auch Ihre eigenen Komponenten erstellen oder die von anderen verwenden.
Kompatibilität: Sie können A-Frame mit anderen Webtechnologien wie JavaScript, CSS, WebGL oder WebXR kombinieren, um Ihre Anwendungen zu verbessern und zu erweitern.

Three.js bietet viele Vorteile, wie zum Beispiel:

Leistung: Three.js nutzt die Leistungsfähigkeit von WebGL, um 3D-Grafiken schnell und effizient zu rendern, ohne auf Plugins oder Erweiterungen angewiesen zu sein.
Flexibilität: Three.js bietet Ihnen eine große Auswahl an 3D-Objekten, Materialien, Lichtern, Animationen und Effekten, die Sie nach Ihren Wünschen anpassen und kombinieren können.
Kreativität: Three.js ermöglicht es Ihnen, Ihre eigene 3D-Welt zu erschaffen und zu gestalten, indem Sie Ihre Fantasie und Ihre Programmierfähigkeiten einsetzen.

A-Frame und Three.js sind eng miteinander verbunden, da A-Frame auf Three.js basiert und alle seine Funktionen nutzt. A-Frame ist jedoch eine höhere Abstraktionsebene als Three.js, die Ihnen eine einfachere und deklarativere Möglichkeit bietet, 3D-Szenen zu erstellen. Sie können jedoch immer noch auf die zugrunde liegende Three.js-API zugreifen, wenn Sie mehr Kontrolle oder Komplexität benötigen.

Wie kann ich A-Frame und Three.js in einem Projekt verbinden?

A-Frame und Three.js sind zwei Frameworks für die Entwicklung von 3D-Grafiken im Web. A-Frame basiert auf Three.js und nutzt alle seine Funktionen, bietet aber eine einfachere und deklarativere Möglichkeit, 3D-Szenen zu erstellen. Sie können jedoch immer noch auf die zugrunde liegende Three.js-API zugreifen, wenn Sie mehr Kontrolle oder Komplexität benötigen.

Um A-Frame und Three.js in einem Projekt zu verbinden und zu verwenden, müssen Sie Folgendes tun:

Laden Sie die Skripte von A-Frame und Three.js in Ihrem HTML-Dokument. Sie können dies tun, indem Sie die folgenden Zeilen in den <head>-Bereich Ihres HTML-Dokuments einfügen:

Erstellen Sie ein <a-scene>-Element in Ihrem HTML-Dokument. Dies ist das Hauptelement, das Ihre 3D-Szene enthält. Sie können verschiedene Attribute für das <a-scene>-Element verwenden, um die Eigenschaften Ihrer Szene anzupassen, wie zum Beispiel Hintergrundfarbe, Nebel, Schatten, etc.

<a-scene background=“color: #000000” fog=“type: linear; color: #FFFFFF; near: 1; far: 10”>  </a-scene>

Erstellen Sie verschiedene <a-entity>-Elemente in Ihrem <a-scene>-Element. Dies sind die Elemente, die Ihre 3D-Objekte repräsentieren. Sie können verschiedene Attribute für die <a-entity>-Elemente verwenden, um die Eigenschaften Ihrer Objekte anzupassen, wie zum Beispiel Position, Rotation, Skalierung, Material, etc.

<a-entity position=“0 1 -5” rotation=“0 45 0” scale=“2 2 2” material=“color: #FF0000”></a-entity>

Verwenden Sie verschiedene Komponenten für die <a-entity>-Elemente, um zusätzliche Funktionen und Interaktionen hinzuzufügen. Komponenten sind Module, die bestimmte Aspekte der <a-entity>-Elemente definieren oder ändern. Sie können vordefinierte Komponenten von A-Frame verwenden oder Ihre eigenen erstellen. Um eine Komponente zu einem <a-entity>-Element hinzuzufügen, müssen Sie sie als Attribut mit einem optionalen Wert angeben.

<a-entity position=“0 1 -5” rotation=“0 45 0” scale=“2 2 2” material=“color: #FF0000” animation=“property: rotation; to: 0 360 0; loop: true; dur: 5000”></a-entity>

Verwenden Sie die Three.js-API für die <a-entity>-Elemente, um direkt auf die zugrunde liegenden Three.js-Objekte zuzugreifen oder zu erstellen. Jedes <a-entity>-Element hat ein object3D-Attribut, das eine Instanz von THREE.Object3D ist. Sie können dieses Attribut verwenden, um die Three.js-Objekte zu manipulieren oder neue hinzuzufügen. Um dies zu tun, müssen Sie eine benutzerdefinierte Komponente erstellen oder eine vorhandene überschreiben.

AFRAME.registerComponent(‘mythreejsthing’, { 
	init: function () { 
		var el = this.el; // Das <a-entity>-Element 
		var object3D = el.object3D; // Das Three.js-Objekt 

		// Machen Sie etwas mit dem Three.js-Objekt 
		// Zum Beispiel fügen Sie ein neues Mesh hinzu 
		var geometry = new THREE.BoxGeometry(1, 1, 1); 
		var material = new THREE.MeshBasicMaterial({color: #00FF00}); 
		var mesh = new THREE.Mesh(geometry, material); object3D.add(mesh); 
	}	 
});

<a-entity position=“0 1 -5” rotation=“0 45 0” scale=“2 2 2” mythreejsthing></a-entity>

Dies sind die grundlegenden Schritte, um A-Frame und Three.js in einem Projekt zu verbinden und zu verwenden.

Was ist Floor in A-Frame?

Floor ist ein Begriff, der in A-Frame verwendet wird, um eine ebene Fläche zu beschreiben, die als Boden für eine virtuelle Szene dient. Ein floor kann aus verschiedenen Materialien bestehen, wie zum Beispiel Holz, Stein, Gras oder Teppich. Ein floor kann auch verschiedene Eigenschaften haben, wie zum Beispiel Textur, Farbe, Reflexion oder Physik.

Um einen floor in A-Frame zu erstellen, können Sie verschiedene Methoden verwenden, wie zum Beispiel:

Verwenden Sie ein <a-plane>-Element mit dem Attribut rotation=“-90 0 0”, um eine horizontale Ebene zu erzeugen. Sie können auch die Attribute width und height verwenden, um die Größe des floors anzupassen.
Verwenden Sie ein <a-box>-Element mit dem Attribut height=“0.01”, um eine dünne Box zu erzeugen. Sie können auch die Attribute width und depth verwenden, um die Größe des floors anzupassen.
Verwenden Sie ein <a-entity>-Element mit dem Attribut gltf-model=“url”, um ein 3D-Modell eines floors zu laden. Sie können auch die Attribute scale, position und rotation verwenden, um die Größe und Ausrichtung des floors anzupassen.

Hier ist ein Beispiel für eine A-Frame-Szene mit einem floor aus einem 3D-Modell:

<a-scene> <a-assets> <a-asset-item id=“floor” src=“model/floor.glb”></a-asset-item> </a-assets> <a-entity gltf-model=“#floor” position=“0 0 0” rotation=“0 0 0”></a-entity> </a-scene>

Ich hoffe, diese Informationen helfen Ihnen, einen floor in A-Frame zu erstellen.

Fehlermeldung Fetch API cannot load

Die Fehlermeldung deutet darauf hin, dass Sie versuchen, ein 3D-Modell mit einer ungültigen URL zu laden. Die URL-Schemata "src" und "model" werden von der Fetch-API nicht unterstützt, die von A-Frame verwendet wird, um Modelle zu laden. Sie müssen eine gültige URL verwenden, die mit "http", "https" oder "file" beginnt.

Um Ihr Problem zu lösen, müssen Sie Folgendes tun:

Ändern Sie das Attribut gltf-model in Ihrem -Element, um eine gültige URL anzugeben. Zum Beispiel: gltf-model="https://example.com/hall.glb".
Stellen Sie sicher, dass Sie einen lokalen Server verwenden, wenn Sie offline entwickeln. Einige Modelle können nicht direkt von der Festplatte geladen werden, sondern benötigen einen HTTP-Server.
Überprüfen Sie, ob Ihre Modelle im gltf-viewer geladen werden. Wenn nicht, liegt das Problem möglicherweise im Modell selbst. Möglicherweise müssen Sie das Modell konvertieren oder reparieren.

Fehler in: gltf-model="src: hall.glb; scale: 2 2 2; position: -5 0 -10; rotation: 0 -45 0

Der Grund, warum Ihr Code nicht in der A-Frame-Szene funktioniert, ist, dass Sie das Attribut gltf-model falsch verwenden. Das Attribut gltf-model erwartet eine URL als Wert, die auf eine glTF-Datei verweist. Sie können keine anderen Parameter wie scale, position oder rotation innerhalb des Attributs angeben. Diese Parameter müssen als separate Attribute für das <a-entity>-Element definiert werden.

Um Ihren Code zu korrigieren, müssen Sie Folgendes tun:

Ändern Sie das Attribut gltf-model in Ihrem <a-entity>-Element, um nur die URL der glTF-Datei anzugeben. Zum Beispiel: gltf-model=“https://example.com/model/hall.glb”.
Fügen Sie die Attribute scale, position und rotation zu Ihrem <a-entity>-Element hinzu, um die Größe und Ausrichtung des Modells anzupassen. Zum Beispiel: scale=“2 2 2” position=“-5 0 -10” rotation=“0 -45 0”.
Entfernen Sie den Code, der die AFRAME.registerComponent (‘gltf-model’, …) Funktion aufruft. Diese Funktion ist nicht notwendig, da A-Frame bereits eine integrierte Komponente namens gltf-model hat. Wenn Sie diese Funktion verwenden, überschreiben Sie die vorhandene Komponente und verursachen möglicherweise Konflikte.

Ihr korrigierter Code sollte so aussehen:

<a-entity gltf-model=“https://example.com/model/hall.glb” scale=“2 2 2” position=“-5 0 -10” rotation=“0 -45 0”></a-entity>

Ich hoffe, diese Erklärung hilft Ihnen, Ihren Code zu verbessern.

Kamerahöhe

Um die Höhe Ihrer Kamera in A-Frame zu ändern, müssen Sie das Attribut position für das <a-entity>-Element verwenden, das die Kamera enthält. Das Attribut position erwartet drei Werte, die die x-, y- und z-Koordinate der Kamera in der Szene angeben. Die y-Koordinate bestimmt die Höhe der Kamera. Zum Beispiel bedeutet position=“0 1.6 0”, dass die Kamera auf einer Höhe von 1,6 Metern positioniert ist.

In unserem Code haben wir das <a-entity>-Element mit der ID “head” als Kamera definiert. Um die Höhe dieser Kamera auf 1,6 Meter zu setzen, müssen wir also das Attribut position=“0 1.6 0” zu diesem Element hinzufügen. Unser korrigierter Code sieht nun so aus:

<a-entity id=“cameraRig”>  <a-entity id=“head” camera wasd-controls look-controls=“pointerLockEnabled: true” position=“0 1.6 0”></a-entity>  <a-entity id=“left-hand” teleport-controls=“cameraRig: #cameraRig; teleportOrigin: #head; button: trigger; collisionEntities: #floor; hitCylinderColor: #99ff99; curveHitColor: #99ff99;”></a-entity> <a-entity id=“right-hand” teleport-controls=“cameraRig: #cameraRig; teleportOrigin: #head; button: trigger; collisionEntities: #floor; hitCylinderColor: #99ff99; curveHitColor: #99ff99;”></a-entity> </a-entity>

Ich hoffe, diese Anleitung hilft Ihnen. Viel Spaß beim Erstellen Ihrer VR-Erfahrungen! Wir veröffentlichen heute unsere Entwicklerversion, damit Sie Ihre Änderungen einbauen können. Wir freuen uns auf Sie.

Was sind einige der neuesten Technologien in der Webentwicklung?

Die Webentwicklung ist ein sich ständig weiterentwickelndes Gebiet, das von neuen Innovationen und Trends geprägt ist. Einige der neuesten Technologien in der Webentwicklung sind:

Cloud Computing: Cloud Computing ermöglicht es, Webanwendungen und Dienste über das Internet zu hosten, zu verwalten und zu skalieren, ohne sich um die Infrastruktur kümmern zu müssen. Cloud Computing bietet viele Vorteile, wie zum Beispiel Kosteneffizienz, Flexibilität, Sicherheit und Zuverlässigkeit.
Automatisierte Code Reviews: Automatisierte Code Reviews sind Prozesse, die die Qualität und Sicherheit des Codes überprüfen, ohne menschliches Eingreifen. Automatisierte Code Reviews können Fehler, Schwachstellen, Stilprobleme und andere Probleme im Code identifizieren und beheben.
Web 3: Web 3 ist eine neue Version des Webs, die dezentrale Apps auf der Blockchain ausführt. Web 3 basiert auf drei Schichten der IT-Architektur: Interaktion, Berechnung und Information. Web 3 ermöglicht es den Nutzern, die volle Kontrolle über ihre Daten und Identität zu haben, ohne auf zentrale Autoritäten angewiesen zu sein.
Fortgeschrittene KI: Fortgeschrittene KI ist die Anwendung von künstlicher Intelligenz (KI) auf Webentwicklung und Design. Fortgeschrittene KI kann helfen, personalisierte und interaktive Erlebnisse für die Nutzer zu schaffen, indem sie Daten analysiert, Muster erkennt, Vorhersagen trifft und Empfehlungen gibt.
Progressive Web Apps: Progressive Web Apps (PWAs) sind Webanwendungen, die wie native Apps aussehen und sich verhalten, aber im Browser laufen. PWAs bieten viele Vorteile, wie zum Beispiel schnelle Ladezeiten, Offline-Funktionalität, Push-Benachrichtigungen und Zugriff auf Gerätefunktionen. Unser Blog ist zum Beispiel eine Progressive Web App. Sie können unsere Seite als App installieren. Die Vorteile beschreiben wir in einem Blogbeitrag.

Dies sind nur einige der neuesten Technologien in der Webentwicklung. Es gibt noch viele andere spannende Technologien, die Sie erkunden können, wie zum Beispiel moderne Sprachen, Low-Code/No-Code-Entwicklung, Motion UI und mehr.

Was sind einige der besten Frameworks für die Webentwicklung?

Die Webentwicklung ist ein spannendes und vielfältiges Gebiet, das ständig neue Technologien und Trends hervorbringt. Es gibt viele Frameworks für die Webentwicklung, die Ihnen helfen können, Ihre Webanwendungen schneller, einfacher und effizienter zu erstellen und zu warten. Einige der besten Frameworks für die Webentwicklung sind:

React: React ist eine beliebte JavaScript-Bibliothek für die Erstellung von benutzerfreundlichen und interaktiven Benutzeroberflächen. React ermöglicht es Ihnen, Ihre Anwendung in wiederverwendbare Komponenten aufzuteilen, die einen eigenen Zustand und eine eigene Logik haben. React verwendet auch eine virtuelle DOM-Technologie, die die Leistung verbessert und das Rendering optimiert.
Angular: Angular ist ein umfassendes Framework für die Entwicklung von Single-Page-Anwendungen mit TypeScript. Angular bietet Ihnen eine Reihe von Funktionen, wie zum Beispiel Datenbindung, Routing, Formulare, Abhängigkeitsinjektion, HTTP-Anfragen und mehr. Angular verwendet auch eine Komponentenstruktur, die eine klare Trennung von Anliegen ermöglicht.
Vue: Vue ist ein progressives Framework für die Entwicklung von reaktiven Benutzeroberflächen mit JavaScript. Vue ist leichtgewichtig, flexibel und einfach zu erlernen. Vue ermöglicht es Ihnen, Ihre Anwendung in deklarative Komponenten aufzuteilen, die reaktiv auf Datenänderungen reagieren. Vue unterstützt auch erweiterte Funktionen wie Routing, Zustandsverwaltung, Serverseitiges Rendering und mehr.
Laravel: Laravel ist ein elegantes und leistungsstarkes PHP-Framework für die Entwicklung von Webanwendungen mit dem MVC-Muster (Model-View-Controller). Laravel bietet Ihnen eine Reihe von Funktionen, wie zum Beispiel Authentifizierung, Routing, Datenbankmigrationen, ORM (Object-Relational Mapping), Blade-Vorlagenmotor und mehr. Laravel ist auch bekannt für seine ausdrucksstarke und flüssige Syntax.
Django: Django ist ein hochwertiges Python-Framework für die Entwicklung von Webanwendungen mit dem MVT-Muster (Model-View-Template). Django bietet Ihnen eine Reihe von Funktionen, wie zum Beispiel ORM, URL-Routing, Formulare, Authentifizierung, Admin-Schnittstelle und mehr. Django ist auch bekannt für seine Sicherheit und Skalierbarkeit.

Dies sind nur einige der besten Frameworks für die Webentwicklung. Es gibt noch viele andere Frameworks, die Sie je nach Ihren Projektanforderungen und Präferenzen auswählen können.