JavaScript の仮想現実と拡張現実について学ぶ-jsチュートリアル-php.cn

JavaScript の仮想現実と拡張現実について学ぶ

王林

リリース： 2023-11-03 13:57:27

オリジナル

871 人が閲覧しました

JavaScript の仮想現実と拡張現実について学ぶ

JavaScript での仮想現実と拡張現実のテクノロジを理解するには、具体的なコード例が必要です

仮想現実 (仮想現実) と拡張現実 (拡張現実) は、近年人気が高まっています。 . 広く注目を集めている 2 つの新興テクノロジー。デジタル情報をユーザーの実際の感覚体験に融合することで、人々が世界を認識し、対話する方法を変えます。広く使用されているプログラミング言語として、JavaScript は仮想現実や拡張現実の分野でも重要な役割を果たしています。この記事では、JavaScript の仮想現実および拡張現実テクノロジーを紹介し、具体的なコード例を示します。

1. バーチャルリアリティテクノロジー

Three.js ライブラリ

Three.js は、開発者がWeb ブラウザーの 3D 仮想現実アプリケーション。簡単なコード例を次に示します。

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

ログイン後にコピー

上記のコードは、立方体を回転させることでアニメーション化できる単純な 3D シーンを作成します。

A-Frame フレームワーク

A-Frame は、仮想現実および拡張現実アプリケーションを作成するための Three.js に基づくオープンソースフレームワークです。 HTML 構文を使用しており、開発者は数行のコードで複雑な仮想現実シーンを作成できます。以下は、基本的な 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>

ログイン後にコピー

上記のコードは、A-Frame フレームワークを使用して、立方体、球、円柱、平面を含む仮想現実シーンを作成します。

2. 拡張現実テクノロジー

AR.js ライブラリ

AR.js は、拡張現実アプリケーションを作成するための JavaScript ライブラリです。ライブビデオストリーム内の画像マーカーを識別し、その上に 3D モデルをオーバーレイできます。以下は、単純な AR.js サンプルコードです:

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

ログイン後にコピー

上記のコードは、AR.js ライブラリを使用して、画像タグに基づいて拡張現実アプリケーションを作成します。カメラが「hiro」画像タグをスキャンすると、小さな立方体がマーカーの上に重ねられます。

WebRTC テクノロジー

WebRTC は、リアルタイム通信のオープンスタンダードです。 WebRTC を使用すると、開発者はリアルタイムのビデオストリーミングとインタラクションを可能にするブラウザベースの拡張現実アプリケーションを作成できます。以下は、WebRTC を使用して実装された簡単なサンプルコードです。

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

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

ログイン後にコピー

上記のコードは、ユーザーのカメラの権限を取得し、HTML ビデオ要素にビデオストリームを表示します。

概要:

上記のコード例を通じて、仮想現実および拡張現実テクノロジーにおける JavaScript の具体的な使用方法を理解できます。仮想現実に関しては、Three.js ライブラリと A-Frame フレームワークを使用して複雑な 3D シーンとアニメーションを作成でき、拡張現実に関しては、AR.js ライブラリと WebRTC テクノロジを使用して、イメージタグとビデオストリーミング現実世界のアプリケーション。この記事の紹介を通じて、読者が JavaScript の仮想現実および拡張現実技術について予備的な理解を深め、実際の開発に適用できるようになることを願っています。

以上がJavaScript の仮想現実と拡張現実について学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。