如何利用JavaScript的WebVR/WebXR创建虚拟现实体验？

const isSupported = navigator.xr !== undefined;

if (!isSupported) {

立即学习“Java免费学习笔记（深入）”；

  console.log("您的浏览器不支持 WebXR");

  // 可提示用户升级或使用兼容浏览器如 Chrome 或 Edge

}

import * as THREE from 'three';

import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera();

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.xr.enabled = true; // 启用 WebXR 支持

document.body.appendChild(renderer.domElement);

const btn = document.createElement('button');

btn.innerHTML = '进入 VR';

btn.onclick = async () => {

  if (navigator.xr) {

    const session = await navigator.xr.requestSession('immersive-vr', {

讯飞智作-虚拟主播

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

6

查看详情

      requiredFeatures: ['local-floor']

    });

    renderer.xr.setReferenceSpaceType('local-floor');

    renderer.xr.setSession(session);

  }

};

document.body.appendChild(btn);

function animate() {

  renderer.setAnimationLoop(render);

}

function render() {

  renderer.render(scene, camera);

}

animate();

renderer.xr.addEventListener('sessionstart', () => {

  const controller1 = renderer.xr.getController(0);

  controller1.addEventListener('select', onControllerSelect);

  scene.add(controller1);

});