js实现vr

使用WebXR API实现VR体验

WebXR是浏览器中实现VR和AR体验的标准API，它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。

// 初始化WebXR场景
async function initXR() {
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const gl = canvas.getContext("webgl", { xrCompatible: true });

  const session = await navigator.xr.requestSession("immersive-vr");
  session.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  const referenceSpace = await session.requestReferenceSpace("local");
  const renderLoop = (time, frame) => {
    const pose = frame.getViewerPose(referenceSpace);
    if (pose) {
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      for (const view of pose.views) {
        const viewport = session.renderState.baseLayer.getViewport(view);
        gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
        // 在此处添加渲染代码
      }
    }
    session.requestAnimationFrame(renderLoop);
  };
  session.requestAnimationFrame(renderLoop);
}

// 检查VR支持并添加按钮
if (navigator.xr) {
  navigator.xr.isSessionSupported("immersive-vr").then((supported) => {
    if (supported) {
      const btn = document.createElement("button");
      btn.textContent = "进入VR";
      btn.onclick = initXR;
      document.body.appendChild(btn);
    }
  });
}

使用Three.js简化VR开发

Three.js提供了对WebXR的封装，大大简化了VR场景开发流程。

import * as THREE from 'three';
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);
document.body.appendChild(VRButton.createButton(renderer));

// 添加立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置渲染循环
function animate() {
  renderer.setAnimationLoop(function() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  });
}
animate();

处理控制器输入

VR体验通常需要处理运动控制器的输入。

// 在Three.js中设置控制器
let controller1, controller2;

function setupControllers() {
  controller1 = renderer.xr.getController(0);
  controller1.addEventListener('selectstart', onSelectStart);
  controller1.addEventListener('selectend', onSelectEnd);
  scene.add(controller1);

  controller2 = renderer.xr.getController(1);
  scene.add(controller2);
}

function onSelectStart() {
  // 控制器按钮按下时的逻辑
}

function onSelectEnd() {
  // 控制器按钮释放时的逻辑
}

优化VR性能

VR应用需要保持稳定的高帧率以避免用户不适。

// 性能优化建议
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// 使用低多边形模型
const loader = new THREE.GLTFLoader();
loader.load('lowpoly-model.glb', function(gltf) {
  scene.add(gltf.scene);
});

// 减少实时阴影计算
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

测试与调试

使用浏览器工具测试VR应用。

// 添加调试信息
const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
  stats.update();
  // 其他动画代码
}

// 使用WebXR模拟器扩展进行测试
// Chrome扩展: WebXR API Emulator

跨平台注意事项

确保应用在不同VR设备上的兼容性。

// 检测设备功能
if (navigator.xr) {
  navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
    console.log('VR支持:', supported);
  });

  navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
    console.log('AR支持:', supported);
  });
}

// 处理不同输入源
const gamepad = await navigator.getGamepads();
if (gamepad[0] && gamepad[0].hand) {
  console.log('控制器类型:', gamepad[0].hand);
}