Rumah >hujung hadapan web >tutorial js >Ketahui tentang realiti maya dan realiti tambahan dalam JavaScript

Ketahui tentang realiti maya dan realiti tambahan dalam JavaScript

王林asal: 2023-11-03 13:57:27915semak imbas

Memahami realiti maya dan teknologi realiti tambahan dalam JavaScript memerlukan contoh kod khusus

Virtual Reality dan Augmented Reality) ialah dua teknologi baru muncul perhatian yang meluas dalam beberapa tahun kebelakangan ini. Mereka mengubah cara orang melihat dan berinteraksi dengan dunia dengan menggabungkan maklumat digital ke dalam pengalaman deria sebenar pengguna. Sebagai bahasa pengaturcaraan yang digunakan secara meluas, JavaScript juga memainkan peranan penting dalam bidang realiti maya dan realiti tambahan. Artikel ini akan memperkenalkan realiti maya dan teknologi realiti tambahan dalam JavaScript dan memberikan contoh kod khusus.

1. Teknologi realiti maya

Three.js library

Three.js ialah JavaScript berasaskan Web Pustaka grafik 3D yang membantu pembangun mencipta aplikasi realiti maya 3D dalam pelayar web. Berikut ialah kod contoh mudah:

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

Kod di atas mencipta pemandangan 3D mudah di mana kiub boleh dianimasikan dengan berputar.

A-Frame

A-Frame ialah rangka kerja sumber terbuka berdasarkan program Tiga. Ia menggunakan sintaks HTML, dan pembangun boleh mencipta adegan realiti maya yang kompleks dalam beberapa baris kod. Berikut ialah kod sampel asas 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>

Kod di atas menggunakan rangka kerja A-Frame untuk mencipta pemandangan realiti maya yang mengandungi kiub, sfera, silinder dan satah.

2. Augmented Reality Technology

AR.js library

AR.js adalah perpustakaan yang telah dibuat perpustakaan JavaScript realiti untuk aplikasi dunia sebenar. Ia boleh mengenal pasti penanda imej dalam strim video langsung dan menindih model 3D di atasnya. Berikut ialah kod contoh AR.js yang mudah:

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

Kod di atas menggunakan perpustakaan AR.js untuk mencipta aplikasi realiti tambahan berdasarkan penanda imej Apabila kamera mengimbas penanda imej "Hiro". , Sebuah kiub kecil akan ditindih pada penanda.

WebRTC Technology

WebRTC ialah standard terbuka untuk komunikasi masa nyata. Menggunakan WebRTC, pembangun boleh mencipta aplikasi realiti tambahan berasaskan pelayar yang membolehkan penstriman dan interaksi video masa nyata. Berikut ialah kod contoh mudah yang dilaksanakan menggunakan WebRTC:

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

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

Kod di atas memperoleh kebenaran kamera pengguna dan memaparkan strim video dalam elemen video HTML.

Ringkasan:

Melalui contoh kod di atas, kita boleh memahami penggunaan khusus JavaScript dalam realiti maya dan teknologi realiti tambahan. Dari segi realiti maya, kami boleh menggunakan perpustakaan Three.js dan rangka kerja A-Frame untuk mencipta adegan dan animasi 3D yang kompleks dari segi realiti tambahan, kami boleh menggunakan perpustakaan AR.js dan teknologi WebRTC untuk mencapai peningkatan berdasarkan; tag imej dan penstriman video Aplikasi dunia sebenar. Saya berharap melalui pengenalan artikel ini, pembaca akan mempunyai pemahaman awal tentang realiti maya dan teknologi realiti tambahan dalam JavaScript dan dapat mengaplikasikannya dalam pembangunan sebenar.

Atas ialah kandungan terperinci Ketahui tentang realiti maya dan realiti tambahan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html JS ar webgl

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Menguasai Kepintaran Buatan dan Pemprosesan Bahasa Semulajadi dalam JavaScriptArtikel seterusnya：Menguasai Kepintaran Buatan dan Pemprosesan Bahasa Semulajadi dalam JavaScript

Artikel berkaitan

Lihat lagi