Maison > Article > interface Web > Découvrez la réalité virtuelle et la réalité augmentée en JavaScript

Découvrez la réalité virtuelle et la réalité augmentée en JavaScript

王林original: 2023-11-03 13:57:27816parcourir

Comprendre la technologie de réalité virtuelle et de réalité augmentée en JavaScript nécessite des exemples de code spécifiques

La réalité virtuelle (Réalité Virtuelle) et la réalité augmentée (Réalité Augmentée) sont deux technologies émergentes qui ont attiré une grande attention ces dernières années. Ils changent la façon dont les gens perçoivent et interagissent avec le monde en fusionnant les informations numériques dans les expériences sensorielles réelles des utilisateurs. En tant que langage de programmation largement utilisé, JavaScript joue également un rôle important dans les domaines de la réalité virtuelle et de la réalité augmentée. Cet article présentera la technologie de réalité virtuelle et de réalité augmentée en JavaScript et fournira des exemples de code spécifiques.

1. Technologie de réalité virtuelle

Bibliothèque Three.js

Three.js est une bibliothèque graphique JavaScript 3D basée sur WebGL qui peut aider les développeurs à créer des applications de réalité virtuelle 3D dans un navigateur Web. Voici un exemple de code simple :

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();

Le code ci-dessus crée une scène 3D simple où un cube peut être animé par rotation.

A-Frame

A-Frame est un framework open source basé sur Three.js pour créer des applications de réalité virtuelle et de réalité augmentée. Il utilise la syntaxe HTML et les développeurs peuvent créer des scènes de réalité virtuelle complexes en quelques lignes de code. Ce qui suit est un exemple de code de base A-Frame :

<!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>

Le code ci-dessus utilise le framework A-Frame pour créer une scène de réalité virtuelle contenant des cubes, des sphères, des cylindres et des plans.

2. Technologie de réalité augmentée

Bibliothèque AR.js

AR.js est une bibliothèque JavaScript permettant de créer des applications de réalité augmentée. Il peut identifier les marqueurs d’image dans les flux vidéo en direct et superposer des modèles 3D dessus. Voici un exemple de code AR.js simple :

<!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>

Le code ci-dessus utilise la bibliothèque AR.js pour créer une application de réalité augmentée basée sur des marqueurs d'image. Lorsque la caméra scanne le marqueur d'image "Hiro", elle superpose un Small. cube.

Technologie WebRTC

WebRTC est un standard ouvert pour la communication en temps réel. Grâce à WebRTC, les développeurs peuvent créer des applications de réalité augmentée basées sur un navigateur qui permettent le streaming et l'interaction vidéo en temps réel. Voici un exemple de code simple implémenté à l'aide de WebRTC :

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

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

Le code ci-dessus obtient les autorisations pour la caméra de l'utilisateur et affiche le flux vidéo dans un élément vidéo HTML.

Résumé :

Grâce aux exemples de code ci-dessus, nous pouvons comprendre l'utilisation spécifique de JavaScript dans la réalité virtuelle et la technologie de réalité augmentée. En termes de réalité virtuelle, nous pouvons utiliser la bibliothèque Three.js et le framework A-Frame pour créer des scènes et des animations 3D complexes ; en termes de réalité augmentée, nous pouvons utiliser la bibliothèque AR.js et la technologie WebRTC pour réaliser des améliorations basées sur balises d'image et streaming vidéo Applications du monde réel. J'espère que grâce à l'introduction de cet article, les lecteurs auront une compréhension préliminaire de la technologie de réalité virtuelle et de réalité augmentée en JavaScript et pourront l'appliquer dans le développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html JS ar webgl

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Master Intelligence Artificielle et Traitement du Langage Naturel en JavaScriptArticle suivant：Master Intelligence Artificielle et Traitement du Langage Naturel en JavaScript

Articles Liés

Voir plus