用JavaScript打造VR体验：WebXR入门教程

const isSupported = navigator.xr !== undefined;

if (!isSupported) {

  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', {

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

});