HTML5 实现 VR 效果主要依靠 WebGL（Web Graphics Library）和 WebXR Device API。WebGL 提供了在浏览器中渲染高性能 3D 图形的能力，而 WebXR 则是 W3C 制定的用于访问虚拟现实（VR）和增强现实（AR）设备的标准化接口。实际项目中，我们通常借助成熟的 3D 库（如 Three.js）来简化场景构建、光照、材质和动画的管理。下面将分享几种常见且实用的 VR 实现方案，包括全景漫游、陀螺仪交互以及配合 VR 头显的真沉浸式体验。
基础环境搭建：使用 Three.js 创建三维场景
Three.js 是目前最流行的 WebGL 库之一，它封装了底层 API，让开发者可以更关注场景逻辑。首先通过 npm 或 CDN 引入 Three.js 核心库和必需的扩展。
<!-- 使用 CDN 方式引入 Three.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
接下来创建一个包含立方体的基本场景，并添加轨道控制器以便鼠标拖拽旋转视角。
// 创建场景、相机和渲染器
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;
// 轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
controls.update();
renderer.render(scene, camera);
}
animate();
以上代码构建了最基础的 3D 场景。但实现 VR 效果需要将视角控制权交给用户，通过头部旋转或设备移动来改变视角方向。
方案一：基于 DeviceOrientation 的移动端 VR 交互
在不支持 WebXR 的移动浏览器中，可以利用 DeviceOrientation API 监听设备朝向，驱动相机旋转，实现类似 VR 头显的“转头看”效果。该方案适合全景照片或视频浏览。
// 监听设备方向事件
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(event) {
// 获取 alpha（绕Z轴）、beta（绕X轴）、gamma（绕Y轴）
const alpha = event.alpha; // 0-360
const beta = event.beta; // -180~180
const gamma = event.gamma; // -90~90
// 将角度映射到相机旋转
// 注意：不同设备的坐标系可能不同，需要根据实际调整
camera.rotation.order = 'YXZ';
camera.rotation.y = THREE.MathUtils.degToRad(alpha);
camera.rotation.x = THREE.MathUtils.degToRad(beta);
camera.rotation.z = THREE.MathUtils.degToRad(gamma);
}, true);
}
为了让体验更流畅，通常需要结合 requestPermission 方法（iOS 13+ 要求用户授权）。还需要注意坐标系转换和角度阈值过滤，防止抖动。
方案二：创建 360 度全景场景
全景 VR 是三维展示中最常见的应用，例如房产看房、旅游导览。实现原理是将一张等距柱状投影（Equirectangular）图片贴到一个球体内表面，相机置于球心。
// 加载全景纹理
const loader = new THREE.TextureLoader();
const texture = loader.load('panorama.jpg');
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.BackSide // 渲染球体内表面
});
const sphere = new THREE.Mesh(new THREE.SphereGeometry(500, 64, 32), material);
scene.add(sphere);
// 设置相机位置为原点
camera.position.set(0, 0, 0);
camera.lookAt(0, 0, -1);
配合 DeviceOrientation 或鼠标拖拽（OrbitControls 需禁用平移和缩放），即可实现全景漫游。若需要 VR 双屏渲染，可使用 StereoEffect 扩展。
方案三：使用 WebXR 实现真 VR 体验
WebXR 是目前主流的 VR 标准，支持 Oculus Quest、HTC Vive 等头显。Three.js 提供了 VRButton 和 WebXRManager，只需少量代码即可将普通 3D 场景转为 VR 模式。
// 引入 VRButton（需 CDN 或 npm）
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
// 设置渲染器启用 XR
renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));
// 在动画循环中使用 renderer.setAnimationLoop 替代 requestAnimationFrame
renderer.setAnimationLoop(function () {
controls.update(); // 需使用 XR 控制器（如 XRController）
renderer.render(scene, camera);
});
注意：使用 WebXR 时，需要通过 XRSession 请求 immersive-vr 模式，并且相机通常由头显提供位置数据。Three.js 的 WebXRManager 会自动处理相机更新。
方案四：用 A-Frame 快速搭建 VR 页面
A-Frame 是 Mozilla 推出的基于 Three.js 的 WebVR 框架，使用 HTML 标签声明式地构建 3D 场景，极大降低了入门门槛。适合原型快速开发。
<html>
<head>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" 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="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-camera position="0 1.6 0"></a-camera>
</a-scene>
</body>
</html>
A-Frame 内置了 VR 模式按钮（需要头显或模拟器），且自动处理了双屏渲染和控制器映射。它还提供了丰富的组件生态，例如 aframe-physics-system 用于物理交互。
性能优化与兼容性建议
VR 场景对帧率要求极高（通常需要 60fps 以上），否则会产生眩晕感。以下几点有助于提升性能：
- 减少 draw call：合并几何体、使用纹理图集、限制材质数量。
- 使用 LOD（细节层次）：根据物体距离调整网格复杂度。
- 纹理压缩：采用 WebP 或 Basis 格式，减小显存占用。
- 开启抗锯齿：
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))避免过高像素比。 - 移动端特别优化：避免透明物体叠加、减少后处理特效。
兼容性方面，WebXR 在 Chrome、Edge 和 Firefox 的较新版本中支持，移动端 Safari 部分支持 DeviceOrientation。建议通过 navigator.xr.isSessionSupported('immersive-vr') 检测能力，并提供降级方案（如无 VR 设备时显示普通全景模式）。
总结
HTML5 实现 VR 效果有多种路径：从简单的 DeviceOrientation 陀螺仪控制，到基于 Three.js 的全景场景，再到利用 WebXR 实现真正的头显沉浸体验。A-Frame 等框架进一步降低了开发门槛。开始你的 VR 展示项目时，建议先明确目标设备（移动端还是 VR 头显），再选择合适的方案。本文提供的代码示例均可直接运行，只需替换资源文件即可快速产出可交互的三维展示页面。