JavaScript로 가상 현실과 증강 현실에 대해 알아보세요.-JS 튜토리얼-php.cn

JavaScript로 가상 현실과 증강 현실에 대해 알아보세요.

王林

풀어 주다： 2023-11-03 13:57:27

원래의

885명이 탐색했습니다.

JavaScript로 가상 현실과 증강 현실에 대해 알아보세요.

JavaScript에서 가상 현실과 증강 현실 기술을 이해하려면 구체적인 코드 예제가 필요합니다.

가상 현실(Virtual Reality)과 증강 현실(Augmented Reality)은 최근 몇 년 동안 널리 주목받고 있는 두 가지 신흥 기술입니다. 디지털 정보를 사용자의 실제 감각 경험에 융합함으로써 사람들이 세상을 인식하고 상호 작용하는 방식을 변화시킵니다. 널리 사용되는 프로그래밍 언어인 JavaScript는 가상 현실 및 증강 현실 분야에서도 중요한 역할을 합니다. 이 기사에서는 JavaScript의 가상 현실 및 증강 현실 기술을 소개하고 구체적인 코드 예제를 제공합니다.

1. 가상 현실 기술

Three.js 라이브러리

Three.js는 개발자가 웹 브라우저에서 3D 가상 현실 애플리케이션을 만드는 데 도움이 되는 WebGL 기반 JavaScript 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" 이미지 마커를 스캔하면 Small 입방체.

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로 가상 현실과 증강 현실에 대해 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!