JavaScript虚拟现实是基于WebXR标准的浏览器内沉浸式3D体验，无需安装App，支持VR/AR，主流浏览器已默认启用，但iOS Safari暂不支持VR模式。
JavaScript 的虚拟现实，本质是用浏览器运行的、基于 Web 技术的沉浸式 3D 体验。它不依赖独立 App，用户点开网页链接就能进入 VR 场景——比如在房产平台“走进”样板间，或在教学页面“站在”古罗马广场中央。核心支撑是 WebXR（已取代旧版 WebVR），配合 Three.js、A-Frame 等库完成渲染与交互。
WebXR 是当前唯一推荐的标准
WebVR 已被正式弃用，所有新项目必须使用 WebXR API。它统一支持 VR 和 AR，并能访问头显姿态、手柄输入、空间锚点、平面检测等能力。判断是否可用只需一行：
if (navigator.xr) { /* 可启动 XR 会话 */ }
主流浏览器如 Chrome、Edge、Firefox（部分版本）均已默认启用。移动端需注意：iOS Safari 目前仅支持 WebXR AR 模式（通过摄像头），暂不支持 VR 模式；Android Chrome 则完整支持。
立即学习“Java免费学习笔记（深入）”；
用 A-Frame 快速搭建可运行的 VR 场景
A-Frame 是最轻量、最易上手的方案，用 HTML 标签写 VR，适合原型验证或教育类应用。一个可直接运行的最小示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: true">
<a-box position="0 1.5 -5" rotation="0 45 0" color="#4CC3D9" depth="1" height="1" width="1"></a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
保存为 .html 文件，在支持 WebXR 的设备上打开，点击右下角 VR 图标即可进入头显模式。所有标签都对应实体：box 是立方体，sky 是环境背景，scene 是整个 VR 空间。
用 Three.js + WebXR 实现精细控制
当需要光影、物理、自定义着色器或复杂模型加载时，Three.js 是更底层的选择。关键步骤包括：
- 初始化 WebGL 渲染器并启用 XR：renderer.xr.enabled = true
- 创建场景、带 XR 支持的透视相机（无需手动处理左右眼）
- 通过 navigator.xr.requestSession('immersive-vr') 启动 VR 会话
- 调用 renderer.setAnimationLoop(render) 进入 XR 渲染循环（自动处理帧同步与畸变校正）
- 添加控制器模型：用 XRControllerModelFactory 加载手柄 3D 模型并绑定 select 事件
例如实现“凝视选择”：监听用户视线方向，计算是否与物体中心夹角小于阈值，持续 1.5 秒后触发动作——这比手柄更适配无控制器场景。
必须面对的现实问题
开发不是写完代码就结束。真实项目中要重点处理：
- 降级体验：检测到不支持 WebXR 时，自动切换为 360° 全景图或普通 3D 旋转模型
- 性能兜底：手机端限制模型面数、关闭阴影、启用实例化渲染（InstancedMesh）；用 renderer.getPixelRatio() 动态调整分辨率
- 权限与引导：首次请求 XR 权限时，需提供清晰图文说明；iOS 设备要提示“请用 Chrome 或 Meta Quest Browser”
- 空间定位兼容性：'local-floor' 类型参考空间在 Quest、Pico 上稳定，但部分低端一体机可能只支持 'viewer'（无地面坐标）
不复杂但容易忽略。
