如何通过 WebXR API 在移动端浏览器实现增强现实(AR)交互

陌伟酱_3589

陌伟酱_3589

2026-04-10

904人浏览

原创

移动端webxr ar交互已具备落地能力,但仅限android chrome(v120+)、samsung internet(v19+)、edge for android等支持immersive-ar的环境;ios safari仍不支持,须显式调用navigator.xr.issessionsupported('immersive-ar')探测,启用hit-test与xrcompatible canvas,并严格遵循session生命周期管理。

如何通过 webxr api 在移动端浏览器实现增强现实(ar)交互

移动端 WebXR AR 交互在当前(2026 年)已具备实际落地能力,但**必须依赖支持 immersive-ar 会话的浏览器 + 设备组合**。iOS Safari 仍不支持(截至 iOS 17.5),Android Chrome(v120+)、Samsung Internet(v19+)、Edge for Android 是主力可用环境;单纯靠 polyfill 或降级方案无法真正触发空间锚点与平面检测。

判断设备是否真正支持 immersive-ar

不能只检查 navigator.xr 是否存在——很多旧版 Chrome 虽暴露该对象,但不支持 immersive-ar 会话类型。必须显式探测:

  • 调用 navigator.xr.isSessionSupported('immersive-ar'),等待 Promise resolve 才能继续
  • 若返回 false,说明系统级 AR 支持缺失(如 iOS、部分低端 Android 机型),此时 fallback 到 inline 模式或提示“暂不支持”更诚实
  • 注意:Safari 会直接抛出 TypeError: navigator.xr is not a function,需先做存在性判断

必须启用 hit-test 才能实现真实世界交互

没有 hit-test 特性,你就只能渲染一个固定位置的 3D 物体,无法点击地面放置、拖拽模型贴合桌面。初始化会话时务必声明:

仿UC浏览器官方网站全屏jQuery幻灯片
仿UC浏览器官方网站全屏jQuery幻灯片

仿UC浏览器官方网站全屏jQuery幻灯片

下载
await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['local', 'hit-test']
});
  • local 是基础空间追踪,hit-test 才提供平面/点位检测能力
  • 某些 Android 设备(如 Pixel 系列)还需额外开启开发者选项中的 “ARCore 开发者模式”,否则 hit-test 返回空数组
  • hit-test 结果不是立刻可用的——需在每一帧中调用 frame.getHitTestResults(hitTestSource),并过滤出 hitTestResult.getPose(anchorSpace) 有效的结果

Three.js 渲染器必须启用 XR 支持且 canvas 需 xrCompatible

常见错误是直接 new WebGLRenderer() 后就塞进 DOM,这会导致 renderer.xr.setSession() 失败或黑屏:

  • 创建 canvas 时必须传入 { xrCompatible: true } 选项:canvas.getContext('webgl', { xrCompatible: true })
  • Three.js 渲染器初始化后,需立即设 renderer.xr.enabled = true,再调用 renderer.xr.setSession(session)
  • 渲染循环中,必须用 session.requestAnimationFrame() 替代 requestAnimationFrame(),否则姿态更新不同步
  • 相机矩阵不能靠 camera.position 手动更新——要从 frame.getViewerPose(refSpace) 中提取 view.transform.inverse.matrix 并赋给 camera.matrix

用户手势与 AR 交互必须解耦处理

移动端触摸事件(tap / longpress)和 WebXR 帧循环天然不同步,直接在 onXRFrame 里监听 touchend 会丢失事件或错位:

  • 用 addEventListener('click', ...) 监听 UI 层按钮(如“放置模型”),再在回调中触发一次 hit-test 查询,获取最近一次有效 hit 结果
  • 避免在 onXRFrame 内做 DOM 操作或复杂计算——它运行在高优先级渲染线程,卡顿会直接导致 AR 画面撕裂
  • 如果要做拖拽,需结合 XRReferenceSpace 的 getOffsetReferenceSpace() 创建相对坐标系,再将手指移动映射为虚拟空间位移,而非简单修改 mesh.position.x

最易被忽略的一点:WebXR session 生命周期完全由用户手势驱动。start/stop 必须包裹在用户可感知的交互内(如按钮点击),且每次 session.end() 后不能再复用旧 session ——重新 requestSession 是唯一合法路径。任何试图缓存 session 或跨页面复用的行为,都会在下次进入时触发权限拒绝或白屏。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4726

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1169

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4664

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

920

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1836

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3365

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

4373

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

2860

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

908

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习