Heim > Artikel > Web-Frontend > Erfahren Sie mehr über Virtual Reality und Augmented Reality in JavaScript

Erfahren Sie mehr über Virtual Reality und Augmented Reality in JavaScript

王林Original: 2023-11-03 13:57:27817Durchsuche

Um die Virtual-Reality- und Augmented-Reality-Technologie in JavaScript zu verstehen, sind spezifische Codebeispiele erforderlich.

Virtual Reality (Virtual Reality) und Augmented Reality (Augmented Reality) sind zwei aufstrebende Technologien, die in den letzten Jahren große Aufmerksamkeit erregt haben. Sie verändern die Art und Weise, wie Menschen die Welt wahrnehmen und mit ihr interagieren, indem sie digitale Informationen mit den realen Sinneserfahrungen der Benutzer verschmelzen. Als weit verbreitete Programmiersprache spielt JavaScript auch in den Bereichen Virtual Reality und Augmented Reality eine wichtige Rolle. In diesem Artikel werden die Virtual-Reality- und Augmented-Reality-Technologie in JavaScript vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Virtual-Reality-Technologie

Three.js-Bibliothek

Three.js ist eine auf WebGL basierende JavaScript-3D-Grafikbibliothek, die Entwicklern helfen kann, 3D-Virtual-Reality-Anwendungen in einem Webbrowser zu erstellen. Hier ist ein einfacher Beispielcode:

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 移动相机
camera.position.z = 5;

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

Der obige Code erstellt eine einfache 3D-Szene, in der ein Würfel durch Drehen animiert werden kann.

A-Frame

A-Frame ist ein Open-Source-Framework auf Basis von Three.js zur Erstellung von Virtual-Reality- und Augmented-Reality-Anwendungen. Es verwendet HTML-Syntax und Entwickler können in wenigen Codezeilen komplexe Virtual-Reality-Szenen erstellen. Das Folgende ist ein grundlegender A-Frame-Beispielcode:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder
        position="0 0 -5"
        radius="0.5"
        height="1.5"
        color="#FFC65D"
      ></a-cylinder>
      <a-plane
        position="0 0 -5"
        rotation="-90 0 0"
        width="4"
        height="4"
        color="#7BC8A4"
      ></a-plane>
    </a-scene>
  </body>
</html>

Der obige Code verwendet das A-Frame-Framework, um eine Virtual-Reality-Szene mit Würfeln, Kugeln, Zylindern und Ebenen zu erstellen.

2. Augmented-Reality-Technologie

AR.js-Bibliothek

AR.js ist eine JavaScript-Bibliothek zum Erstellen von Augmented-Reality-Anwendungen. Es kann Bildmarkierungen in Live-Videostreams identifizieren und 3D-Modelle darüber legen. Das Folgende ist ein einfacher AR.js-Beispielcode:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://github.com/AR-js-org/AR.js/releases/3.3.1/aframe/build/aframe-ar.js"></script>
  </head>
  <body style="margin: 0;overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-box position="0 0 0" color="tomato" scale="0.7 0.7 0.7"></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Der obige Code verwendet die AR.js-Bibliothek, um eine Augmented-Reality-Anwendung basierend auf Bildmarkierungen zu erstellen. Wenn die Kamera die Bildmarkierung „Hiro“ scannt, wird eine kleine überlagert Würfel.

WebRTC-Technologie

WebRTC ist ein offener Standard für Echtzeitkommunikation. Mit WebRTC können Entwickler browserbasierte Augmented-Reality-Anwendungen erstellen, die Video-Streaming und Interaktion in Echtzeit ermöglichen. Das Folgende ist ein einfacher Beispielcode, der mit WebRTC implementiert wurde:

const video = document.getElementById('video');

// 获取摄像头权限
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(error => {
    console.log("获取摄像头权限失败", error);
  });

Der obige Code ruft Berechtigungen für die Kamera des Benutzers ab und zeigt den Videostream in einem HTML-Videoelement an.

Zusammenfassung:

Anhand der obigen Codebeispiele können wir die spezifische Verwendung von JavaScript in der Virtual-Reality- und Augmented-Reality-Technologie verstehen. Im Hinblick auf die virtuelle Realität können wir die Three.js-Bibliothek und das A-Frame-Framework verwenden, um komplexe 3D-Szenen und Animationen zu erstellen. Im Hinblick auf die erweiterte Realität können wir die AR.js-Bibliothek und die WebRTC-Technologie verwenden, um eine Verbesserung basierend darauf zu erreichen Bild-Tags und Video-Streaming. Reale Anwendungen. Ich hoffe, dass die Leser durch die Einleitung dieses Artikels ein vorläufiges Verständnis der Virtual-Reality- und Augmented-Reality-Technologie in JavaScript erlangen und diese in der tatsächlichen Entwicklung anwenden können.

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Virtual Reality und Augmented Reality in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html JS ar webgl

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beherrschen Sie künstliche Intelligenz und Verarbeitung natürlicher Sprache in JavaScriptNächster Artikel：Beherrschen Sie künstliche Intelligenz und Verarbeitung natürlicher Sprache in JavaScript

In Verbindung stehende Artikel

Mehr sehen