ホームページ > 記事 > ウェブフロントエンド > JavaScript の仮想現実と拡張現実について学ぶ
JavaScript の仮想現実と拡張現実について学ぶ
- 王林オリジナル
- 2023-11-03 13:57:27817ブラウズ
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 サイトの他の関連記事を参照してください。