- 综合排序
- 最热优先
- 最新优先
- 来自专栏杂谈
WebXR教学 01 什么是WebXR？
什么是WebXR？ 定义 XR = VR + AR Web上使用XR技术的API WebXR 是一组用于在 Web 浏览器中实现虚拟现实（VR）和增强现实（AR）应用的技术标准。 • 解决方案：WebXR 为未来的沉浸式 Web 体验奠定了基础，使得 Web 能够跟上 VR/AR 技术的发展趋势。 如何学习WebXR 1. 了解 WebXR 核心概念 • WebXR Device API：学习 WebXR Device API 的基本概念和结构，包括 XRSystem、XRSession 和 XRFrame。 学习资源 • 官方文档：阅读 WebXR Device API 官方文档。 • 教程和课程：参考在线教程和课程，如 MDN Web Docs、Google Developers 的 WebXR 教程。 • 示例代码：研究开源项目和示例代码，如 WebXR Samples。
99110编辑于 2025-02-25 使用 WebXR + three.js 在 Magic Leap 上创建简单交互应用
作者：科采通 标签：Magic Leap、WebXR、three.js、AR开发、浏览器渲染 随着 WebXR 标准的发展，越来越多的增强现实（AR）与虚拟现实（VR）设备开始支持基于网页的三维交互内容 本文将介绍如何使用 three.js + WebXR 在 Magic Leap 1 设备上构建一个简单的交互式 3D 应用。 证书） 必要资源： Magic Leap WebXR polyfill： https://www.npmjs.com/package/magicleap-helio-webxr-polyfill 控制器模型文件 参考资源 Magic Leap WebXR 指南（官方）： https://creator.magicleap.com/learn/guides/webvr-webxr Magic Leap Helio Polyfill（GitHub）： https://github.com/mvilledieu/magicleap-helio-webxr-polyfill Three.js WebXR 示例： https
33700编辑于 2025-06-26- 来自专栏码
PHP核心作者转战VR，作为前端的你还没了解过WebXR就out了！
作为前端开发者，实际上在我们前端领域，已经有WebXR这个标准在发展了。 WebXR是2019年10月提出的一项web标准，你可以简单地把WebXR理解为WebVR+WebAR的组合。 整套标准设计了一组 WebXR Device API ( https://www.w3.org/TR/webxr/ )，它主要包含： 查找兼容的VR或AR输出设备 以适当的帧率将3D场景渲染到设备 （可选 基于WebXR的应用，可以在浏览器等设备上运行，这也就意味着，只要在马路边立一块显示屏，内置一个浏览器，就可以运行XR应用，随时和路过的路人进行实时的虚拟现实互动，从而达到非常酷炫的沉浸式体验，让产品营销更上一个台阶 目前主流的WebXR应用开发主要有三种方式： 基于封装好的框架开发，如three、aframe等 使用WebGL + WebXR的组合进行开发 使用传统的3D引擎+已有的C/C++ XR引擎（编译到WASM ）进行开发，如unity等 要掌握WebXR的开发，不仅仅要掌握WebXR Device API，更要掌握一些图形学知识、游戏开发知识、空间模型知识。
83250编辑于 2022-04-28 - 来自专栏腾讯高校合作
【犀牛鸟·视野】SIGGRAPH Asia 2017 (DAY 3)：领略前沿poster papers，关注WebXR新技术
今天是SIGGRAPH Asia 2017的第三天，也是Poster papers讲解的最后一天（总共两天，每天中午13:00-14:00）。今年中了poster的文章总共有58篇，分为10个类别，分别有：Animation，Hardware，Image and Video，Interaction，Methods and Applications，Modeling，Multimedia，Rendering，Virtual Environments和Visualization。大部分的文章都附有演示的DEMO
1.1K60发布于 2018-03-21 - 来自专栏数字孪生
WebGL开发VR软件的测试
WebXR模拟器：使用浏览器提供的WebXR模拟器，可以在没有实际VR设备的情况下进行初步测试。 4.功能测试WebXR支持检测：使用navigator.xr对象检测浏览器是否支持WebXR。 5.跨浏览器测试支持的浏览器：确保应用在支持WebXR的浏览器上正常运行，如Chrome、Firefox等。测试不同浏览器之间的差异，确保兼容性。
29100编辑于 2025-03-17 - 来自专栏禅林阆苑
【元宇宙】iOS16将支持WebXR！一起来撸个WebVR华容道吧
图片【元宇宙】iOS16将支持WebXR！一起来撸个WebVR华容道吧1. 背景：浏览器的革命WebXR6月7日凌晨，苹果举行了2022年的WWDC全球开发者大会，在iOS16-Beta开发者预览版中，Safari已支持WebXR标准api。 早在2018年，Chrome79 和 Firefox Reality 就已支持 WebXR 标准，而苹果可能是出于对自家 App Store 的保护，迟迟未跟进，被业内人士指责"拖累WebXR技术发展的最大障碍 再说回WebXR的概念，可以简单理解为 WebXR = Web + VR + AR + ?R，由W3C发布于2019年。 与传统VR技术不同，WebXR 技术不需要下载任何应用程序或插件，将VR体验搬到浏览器中。
3.3K30编辑于 2022-06-20 - 来自专栏BestSDK
Android版Chrome 67发布，为AR和VR带来全新API接口
Android版新版Chrome自带一个新的WebXR设备API，旨在实现基于Web的AR和VR体验。新API仍在测试中，但在其发布版本中，开发人员将能够开始使用它，并看到它为移动平台带来的好处。 除了新的WebXR设备API之外，Chrome 67还为其带来了通用传感器API，使开发人员能够轻松获取传感器数据，从而为我们创建身临其境的游戏，健身追踪和AR或VR体验的Web应用程序。 WebXR设备API和通用传感器API都在今年4月份公布，现在可以在Chrome 67中使用。 开发人员需要注册原始试用程序员才能开始使用WebXR设备API，但其开始的好处肯定值得在早期实施。
67020发布于 2018-07-30 - 来自专栏数字孪生
WebGL技术开发MR应用
4.浏览器兼容性浏览器差异: 不同浏览器对 WebGL 和 WebXR API 的支持可能存在差异，需要进行兼容性测试。 2.WebXR APIWebXR Device API: 提供了访问 MR 设备的接口，支持 MR 头盔、手柄等设备。 WebXR Session Management: 管理 MR 会话的创建和销毁，支持沉浸式和非沉浸式 MR 体验。 WebXR Polyfill: 提供对不支持 WebXR API 的浏览器的兼容性支持。 通过结合 WebGL 框架（如 Three.js、Babylon.js、A-Frame）和 WebXR API，开发者可以克服这些挑战，创建高质量的 MR 应用。
48910编辑于 2025-01-17 - 来自专栏VRPinea
谷歌I/O大会进行时：AR/VR、AI愈发高冷？谷歌决定把他们low下来
推出Chrome WebXR标准，可将XR内容带至网页端 今年年初，Mozilla推出了名为WebXR的新标准，可将XR（AR、VR和MR)内容直接集成至网络浏览器。 而现在，谷歌也为自家的Chrome浏览器带来了WebXR。 在今天的I/O大会上，主题为“The Future of the Web Is Immersive”的演讲者Brandon Jones和John Pallett给大家演示了WebXR的一些新功能。 而WebXR正是为了解决所述问题而诞生的新标准，同时将把AR和MR内容带至网页端。 Brandon Jones表示，WebXR针对浏览器进行了更多的优化，将为程序员的开发带来便利。 但在WebXR标准下，可达到1603×2529分辨率，400万像素，同时还能维持相同的高帧率。这意味着这项新技术可以使AR/VR内容在网页运行时，画面将更优秀、更流畅。
809120发布于 2018-05-11 - 来自专栏数字孪生
WebGL 技术开发 MR 应用的技术难点
解决方案:使用 WebXR API: WebXR 提供了访问 MR 设备的接口，支持手柄、手势识别等输入设备。 解决方案:使用 WebXR Polyfill: 提供对不支持 WebXR API 的浏览器的兼容性支持。设备检测和适配: 根据设备性能动态调整渲染质量和交互方式。 浏览器兼容性难点: 不同浏览器对 WebGL 和 WebXR API 的支持可能存在差异，需要进行兼容性测试和适配。 通过使用 WebGL 框架（如 Three.js、Babylon.js）、WebXR API、物理引擎、手势识别库等工具和技术，开发者可以克服这些难点，创建高质量的 MR 应用。
36410编辑于 2025-01-17 - 来自专栏VRPinea
Google I/O 2018丨AR/VR、AI“高冷”？谷歌正把它们变得更加亲民
推出Chrome WebXR标准，可将XR内容带至网页端 今年年初，Mozilla推出了名为WebXR的新标准，可将XR（AR、VR和MR)内容直接集成至网络浏览器。 而现在，谷歌也为自家的Chrome浏览器带来了WebXR。 在今天的I/O大会上，主题为“The Future of the Web Is Immersive”的演讲者Brandon Jones和John Pallett给大家演示了WebXR的一些新功能。 而WebXR正是为了解决所述问题而诞生的新标准，同时将把AR和MR内容带至网页端。 ? Brandon Jones表示，WebXR针对浏览器进行了更多的优化，将为程序员的开发带来便利。 但在WebXR标准下，可达到1603×2529分辨率，400万像素，同时还能维持相同的高帧率。这意味着这项新技术可以使AR/VR内容在网页运行时，画面将更优秀、更流畅。
56260发布于 2018-06-11 - 来自专栏数字孪生
WebGL的3D展示开发框架
Babylon.js：简介： Babylon.js 是另一个强大的 WebGL 引擎，功能类似于 Three.js，也提供了 WebXR 支持。 A-Frame：简介： A-Frame 是一个基于 HTML 的 WebXR 框架，它使用自定义的 HTML 标签来创建 3D 场景和 VR 体验，降低了 WebXR 开发的门槛。 支持 WebXR： 可以轻松创建 VR 和 AR 体验。 与 Three.js 集成： 底层基于 Three.js，可以使用 Three.js 的 API 进行更高级的定制。 除了以上介绍的框架，还有一些其他的 WebGL 框架，例如 Cesium (用于地球和地理空间可视化)、Oculus Three.js WebXR Boilerplate (用于 WebXR 开发) 等
63810编辑于 2024-12-25 - 来自专栏数字孪生
WebGL开发VR软件的注意事项
WebXR支持检测：使用navigator.xr对象检测浏览器是否支持WebXR。确保应用能够优雅地处理不支持WebXR的设备。 6.测试和调试跨浏览器测试：确保应用在支持WebXR的浏览器上正常运行，如Chrome、Firefox等。测试不同浏览器之间的差异，确保兼容性。
24910编辑于 2025-03-17 - 来自专栏数字孪生
WebGL开发VR软件框架
Three.js简介：这是一个非常流行的JavaScript 3D库，封装了WebGL的底层API，提供了更高级的抽象和工具，大大简化了3D场景的创建和管理，也对WebXR提供了很好的支持。 Babylon.js简介：另一个强大的JavaScript 3D引擎，功能与Three.js类似，也提供了WebXR支持。 A-Frame简介：一个基于HTML的WebXR框架，由Mozilla开发，它使用自定义的HTML标签来创建3D场景和VR体验，降低了WebXR开发的门槛。 跨平台支持：支持桌面浏览器、移动设备和VR/AR设备，无需额外适配，借助WebXR可以在支持的设备上直接进入沉浸式体验。
30310编辑于 2025-03-17 - 来自专栏数字孪生
WebGL 技术在 AR 中的应用及其优势
4.浏览器兼容性浏览器差异: 不同浏览器对 WebGL 和 WebXR API 的支持可能存在差异，需要进行兼容性测试。 2.WebXR APIWebXR Device API: 提供了访问 AR 设备的接口，支持 AR 头盔、手柄等设备。 WebXR Session Management: 管理 AR 会话的创建和销毁，支持沉浸式和非沉浸式 AR 体验。 WebXR Polyfill: 提供对不支持 WebXR API 的浏览器的兼容性支持。 通过结合 WebGL 框架（如 Three.js、Babylon.js、A-Frame）和 WebXR API，开发者可以克服这些挑战，创建高质量的 AR 应用。
53610编辑于 2025-01-17 - 来自专栏code秘密花园
WWDC24 - iOS18 下的 WebKit 有哪些更新？
Web API - WebXR 支持 Safari 18 forvisionOS 2 beta 增加了对沉浸式 WebXR 的支持。 WebXR 场景使用由 WebGL 驱动的硬件加速图形来显示。 如果我们想制作用户手部的 3D 模型动画，VisionOS 2 Beta 版的 Safari 还支持 WebXR 手部跟踪。 为了确保隐私，将在 WebXR 会话开始时向用户请求允许进行手部跟踪的许可。 《Build immersive web experiences with WebXR》专题详细介绍了这个话题。
97710编辑于 2024-07-01 - 来自专栏数字孪生
WebGL技术开发VR应用
4.浏览器兼容性浏览器差异: 不同浏览器对 WebGL 和 WebXR API 的支持可能存在差异，需要进行兼容性测试。 2.WebXR APIWebXR Device API: 提供了访问 VR 设备的接口，支持 VR 头盔、手柄等设备。 WebXR Session Management: 管理 VR 会话的创建和销毁，支持沉浸式和非沉浸式 VR 体验。 WebXR Polyfill: 提供对不支持 WebXR API 的浏览器的兼容性支持。
55310编辑于 2025-01-17 - 来自专栏VRPinea
4.19 VR扫描：Valve最新VR控制器发布新的固件更新；新版Edge将支持WMR头显
并且，开发者版本和Canary版本现已支持WMR头显，用户可以通过相关的头显直接浏览WebVR/WebXR内容。 而要使用这一功能，只需在地址栏输入edge://flags，并启用WebVR或WebXR flag即可。
86440发布于 2019-05-07 - 来自专栏开发经验
前端开发新趋势：Web3、区块链与虚拟现实
文章目录 Web3：下一代互联网 区块链技术 去中心化应用程序（DApps） 区块链：重塑数字世界 数字钱包 NFT（非同质化代币） 虚拟现实：沉浸式体验 WebVR和WebXR 三维图形 新挑战与机会 WebVR和WebXR WebVR和WebXR是使虚拟现实内容在Web浏览器中运行的开放式标准。前端开发者可以使用WebVR和WebXR API来创建支持虚拟现实头戴设备的Web应用程序。 // 使用WebXR API启用虚拟现实 if ('xr' in navigator) { navigator.xr.requestSession('immersive-vr').then((session
77510编辑于 2023-12-13 - 来自专栏Web前端
前端新技术探索：WebAssembly、Web Components与WebVR/AR
</custom-button></body></html>WebVR/AR：开启沉浸式Web体验WebVR（现已被WebXR取代）与WebAR技术则致力于打破虚拟现实（VR）与增强现实（AR）内容与Web 以下是一个简单的WebXR AR示例，使用Three.js与WebXR API创建一个可以在真实环境中放置3D模型的AR场景：<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>WebXR AR Example</title> <
47010编辑于 2024-04-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号