WebVR与WebXR

已于 2023-02-16 10:27:21 修改
阅读量859 收藏 1
点赞数
分类专栏： Cesium JS 文章标签： VR WebVR WebXR Cesium Emulator
于 2022-11-21 16:59:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wml00000/article/details/127968352
版权
JS 同时被 2 个专栏收录
18 篇文章 1 订阅
订阅专栏
Cesium
9 篇文章 1 订阅
订阅专栏

WebVR

文章目录

1. 前言

WebVR技术可以实现在浏览器端接通VR设备，在VR模式下进行交互。

2. 在线示例

三维模型网站Sketchfab支持在VR模式下预览三维模型：https://sketchfab.com/3d-models/kirkaldys-testing-works-785d4675d66a425db33d98f0d8df587a

image.png

连接VR设备的具体操作可以参考链接：Virtual Reality (VR)

如果没有设备也可以通过模拟器来体验，需要安装浏览器插件：WebXR API Emulator，效果图如下：

image.png

3. 关于开发

通过WebXR Device API可以实现在自己的Web应用中接通VR或AR设备。具体教程可以参考：WebVR开发教程——标准入门

另外可以参考Getting started building a WebXR Website

4. 参考链接

[1] Mixed Reality for the Open Web

[2] WebXR

[3] Sketchfab Sample

[4] Sketchfab WebVR Help

[5] WebVR开发教程——标准入门

[6] WebXR 技术调研 - 在浏览器中构建扩展现实（XR）应用

wml00000
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebXR API Emulator-crx插件
03-10
WebXR API仿真器 WebXR Emulator扩展使用户和开发人员无需使用真实的XR设备即可在桌面浏览器中运行和测试WebXR内容。 该扩展将在尚不支持WebXR的浏览器上模拟WebXR API，并提供XR设备列表及其控制器进行模拟。 GitHub：https://github.com/MozillaReality/WebXR-emulator-extension 支持语言:English
探索WebXR Emulator Extension：虚拟现实与增强现实的开发利器
最新发布
gitblog_00015的博客
04-18 274
探索WebXR Emulator Extension：虚拟现实与增强现实的开发利器 项目地址:https://gitcode.com/MozillaReality/WebXR-emulator-extension 项目简介 在Web开发的前沿领域，虚拟现实（VR）和增强现实（AR）的应用正逐渐崭露头角。为了帮助开发者在这个新兴领域中无畏前行，Mozilla Reality推出了一款名为WebXR...
Babylon.js实战WebXR/元宇宙
新缸中之脑
05-16 976
从 VR 音频实验到街机上的 VR 休闲游戏，再到使用 AR 或 VR 创建新协作方式的更严肃用途，阅读本文后，你应该对今天可以做什么有很好的了解。事实上，在本文中，我将分享我一直致力于使用 Babylon.js 构建沉浸式或增强现实 WebXR 体验的许多有趣实验，以及更严肃的/业务场景。你将能够通过试验和阅读每个演示的源代码来学习。如果你还没有兼容的设备，我将分享一些后备方案以及使用 Valve Index、Oculus Quest 2 或 HoloLens 2 的视频。推荐：用。
Cesium集成WebXR_连接VR设备
wml00000的博客
02-23 3195
通过WebXR接口，将浏览器端连接到VR头盔，实现再VR头盔中浏览Cesium场景，并可将头盔旋转的操作同映射到场景视角的变换，实现沉浸式体验。需要了解一些关于WebGL的基础知识，通过以下几个链接可快速了解：关于WebXR可参见MDN上有关介绍Fundamentals of WebXR。另外，MDN提供了一个例子可以帮助快速上手，该示例未依赖其他三维框架（如three.js），使用纯原生WebGL接口，相关介绍见Movement, orientation, and motion: A WebXR exam
WebVR手柄交互
qq_40147088的博客
06-04 726
在threejs中获取VR设备手柄并交互
webvr-polyfill:立即使用WebVR，无需特殊的浏览器构建
04-12
您也可以在与webvr-polyfill.min.js相同的位置使用缩小的文件。 < script src =' webvr-polyfill.js ' > </ script > <!-- or use a link to a CDN --> < script src =' ...
webxr-polyfill：立即使用WebXR设备API，提供对本机WebVR 1.1和Cardboard的后备
02-06
此polyfill允许开发人员编写最新的规范，以在实现浏览器上运行或在完全不支持WebVR / WebXR的移动设备上运行时提供支持。 polyfill反映了多个浏览器附带的API的稳定版本。 如果您要根据编写代码，请使用 ，它支持...
webvr-beatsaber:像 webxr 一样的节拍军刀
05-31
《WebVR Beatsaber：探索WebXR的音乐节奏体验》 在现代互联网技术的快速发展中，虚拟现实（VR）已经成为一种引人入胜的交互方式，它将用户带入了一个全新的三维数字世界。WebVR和WebXR是两种能够让用户通过浏览器...
webxr
03-30
以下是WebXR与CSS结合使用的一些核心知识点： 1. **CSS 3D Transformations**：在WebXR环境中，CSS 3D转换是关键，允许元素在3D空间内移动、旋转和缩放。使用`translate3d()`, `rotate3d()`, 和 `scale3d()`函数...
webxr_boilerplate：使用Aframe，Webpack和Firebase创建WebVR体验的工具包
02-05
WebVR样板 WebVR Boilerplate是WebVR创建者用于开发，构建和部署静态WebVR体验到Web的工具包。 WebVR Boilerplate带有一个热重载Web服务器，最新版本的 ，Aframe最好的社区组件以及Webpack构建管道，该管道打包内容...
WebXR：我一直在做的一堆webxr实验
02-06
WebXR示例 我从2020年8月开始学习WebXR开发。这是我在学习时进行的各种实验的回购。 一路走来的资源和教程：
WebXR-emulator-extension:WebXR仿真器扩展
04-30
WebXR仿真器扩展 WebXR模拟器扩展是一种浏览器扩展，可帮助您创建WebXR内容。 它使您能够在桌面浏览器上响应性地运行应用程序，而无需任何XR设备。 / / 特征 多个XR设备仿真 VR和AR均支持 使用图形化设备仿真器控制 跨浏览器的支持 地位 基于 尚无特定于设备的仿真 仅支持触发和挤压按钮，不支持其他按钮 浏览器 此扩展基于构建。 它可在Firefox，Chrome和其他支持该API的浏览器上使用。 如何使用 转到插件商店进行安装（ ， Chrome ） 转到WebXR应用程序页面（例如WebXR示例）。 您会注意到该应用程序检测到您具有XR设备（已仿真），并且可以让您进入沉浸式（VR，AR）模式。 在浏览器开发人员工具（ Firefox ， Chrome ）中打开“ WebXR”选项卡以控制仿真设备。 您可以移动耳机和控制器，并触发控制器按钮。 您将在WebXR
WebVR 技术栈个人理解
finalcj的博客
04-02 2533
说明：了解WebXR的过程中，遇到相关的知识点，因此需要对这些知识点也进行了解，下面按顺序进行描述。 1. webGL: ”WebGL是一套为Web设计的基于立即模型绘制3D的API。” 它来源于OpenGL ES2.0，提供了相似的3D绘图功能，只不过它运行在HTML网页中，简单上来理解， 你可以把它看成OpenGLES 2.0的JavaScript绑定，网页的开发者可以利用它来在网页中显示3D图形。WebGL定义的是一个被HTML Canvas元素创建的用来3D渲染的上下文接口。 个人理解
浅谈 WebVR 全景
趣谈前端
10-23 1334
大厂技术坚持周更精选好文前言近年来VR概念越来越火，相信大家在网上都有过VR的浏览体验，比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等，VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理，同时也会用threejs实现两个小的demo，希望对大家以后在业务上遇到类似的场景能有所帮助。什么是VR引用维基百科的定义：虚拟现实（英语：virtual ...
使用WebVR创建虚拟现实前端体验
sybh的博客
08-02 522
WebVR是一种Web技术，它允许用户通过虚拟现实头显（如Oculus Rift、HTC Vive等）或智能手机配合VR头盔体验虚拟现实。它的目标是在Web浏览器中实现跨平台、无需插件的虚拟现实体验。
动手实践WebVR 全景
Dream_travelerly的博客
01-31 1636
近年来VR概念越来越火，相信大家在网上都有过VR的浏览体验，比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等，VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理，同时也会用threejs实现两个小的demo，希望对大家以后在业务上遇到类似的场景能有所帮助。虚拟现实（英语：virtual reality，缩写VR），是利用电脑模拟产生一个三维空间的虚拟世界，提供用户关于视觉等感官的模拟，让用户感觉仿佛身历其境，可以即时、没有限制地观察三维空间内的事物。
WebXR 技术调研 - 在浏览器中构建扩展现实（XR）应用
字节跳动视频云
08-11 6302
利用 WebXR Device API 可以在 Web 环境访问到 XR 设备，它主要分为 3 种模式inline、和，inline模式还是渲染在浏览器页面中，而则是访问 VR 设备，将画面渲染到 VR 设备中，整体渲染过程与普通 WebGL 程序差不多，只不过画面要渲染到 XRWebGLLayer 的 framebuffer 中，并且区分左右眼。...
Cesium与VR技术整合概述 - 概述Cesium与VR技术的整合方式，例如使用Cesium VR扩展、WebVR/WebXR API等。 - 介绍Cesium中与VR相关的功能和特性，例如3D场景渲染、交互操作等。
07-13
Cesium与VR技术的整合可以通过多种方式实现。以下是一些常用的整合方式和Cesium中与VR相关的功能和特性。 1. 使用Cesium VR扩展：Cesium VR扩展是Cesium团队为了支持VR技术而开发的一个官方扩展。它提供了一组API和工具，使得在Cesium中创建和交互VR场景变得更加容易。通过引入Cesium VR扩展，开发者可以使用VR头显和手柄等设备在Cesium中浏览3D场景，并进行交互操作。 2. WebVR/WebXR API：WebVR和WebXR是一组Web标准，用于在浏览器中实现VR和AR体验。Cesium可以通过WebVR或WebXR API与VR设备进行通信，实现在VR环境中呈现Cesium场景的功能。通过使用这些API，开发者可以基于Cesium构建跨平台的VR应用程序。 在Cesium中，与VR相关的功能和特性包括： 1. 3D场景渲染：Cesium提供了强大的3D渲染引擎，可以呈现高度真实感的地球表面、地形、建筑物等元素。通过整合VR技术，用户可以身临其境地在虚拟地球中自由浏览，并感受到真实场景的沉浸感。 2. 交互操作：借助VR设备的头显和手柄，用户可以在Cesium中进行交互操作，例如选择和操控模型、导航浏览场景、测量距离和面积等。这些交互操作能够提供更加直观和沉浸式的用户体验。 总的来说，Cesium与VR技术的整合通过Cesium VR扩展、WebVR/WebXR API等方式实现，提供了3D场景渲染和交互操作等功能，为用户创造了更加沉浸式的虚拟地球体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值