问题标签 [webxr]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
417 浏览

reactjs - VideoTexture 不使用 react-three-fiber

我需要在 VR 中播放 360° 视频。我对three.js等很陌生,所以这可能是一个菜鸟错误,但我似乎无法弄清楚。

这是我的代码:我有ImmersiveVideoCamvas,其中包含视频的画布和ImmersiveVideo组件。

ImmersiveVideoCanvas

ImmersiveVideo

当我在我的 oculus 浏览器中进入 VR 时,我得到一个黑屏。我读到如果video.play()丢失它可能会发生,但在我的情况下它并没有丢失......除非它写在错误的地方。我知道这captureStream()不是问题,因为如果我只是捕获流并在另一个常规<video />元素中播放它就可以了。(因为我对此真的很陌生,所以我尝试将我的代码基于此讨论的回复https://github.com/pmndrs/react-three-fiber/discussions/786

谢谢!

0 投票
0 回答
139 浏览

three.js - Aframe/Three/WebXR:在 VR 模式下禁用设备方向

我正在使用 AFrame 1.2.0 开发一个 VR 应用程序,并且我在几天内都在为一个问题苦苦挣扎。我的目标是让用户看到以编程方式设置且与当前设备方向完全无关的特定视图。换句话说,我应该:

  • 阻止用户根据其设备方向查看世界;
  • 强制用户查看特定点(我以编程方式设置);

这些步骤基本上意味着我应该能够:

  • 禁用用户设备旋转(VR-Mode 未解决)
  • 以“刷新”率(完成)将视图设置到特定位置

正如我所写,问题与第一点有关:禁用用户设备方向,它只影响VR 模式。确实,当视图不在 VR 模式下时,一切正常,但是当进入 VR 模式时,我不能再这样做了。

我尝试管理这些框架/库/API:

  • AFrame,外观控制:我知道可以使用某些属性(例如启用、magicWindowTrackingEnabled、magicWindowControls)禁用外观控制:它有效,但仅当视图不处于 VR 模式时;(请注意,hmdEnabled 从 0.8v 开始在 AFRAME 中不再存在,因为据我了解,WebXR 的引入不允许直接从 AFrame 管理设备);
  • THREE.DeviceOrientationControls:我知道外观控制组件在后台使用这个 THREE 元素,所以我对其进行了调试并尝试直接管理它(例如调用断开连接、处置、启用 = false):再次,它工作但仅当视图不在 VR 模式下;
  • WebXR:在最低级别,WebXR 是最后使用的 API。我调试了它并尝试管理 WebXR 会话,但一切都处于只读模式,似乎没有激活/停用设备传感器的功能。

所以,这里的问题是:如何在 VR 模式下使用 AFrame/THREE/WebXR 或其他方式禁用设备方向?

谢谢你们。

0 投票
0 回答
219 浏览

blender - Babylon - 使用 SceneLoader 打开 glb 时图像质量(纹理)差

我正在使用 BabylonJS 渲染我用 Blender 生成的 glb 文件。

我有一些图像纹理,在模型的墙上显示为海报。它们是非常清晰的图像。

当我将模型导出为 gltf 文件并加载到 babylonJS 时,这些纹理的图像质量是完美的。但是,如果我导出为 glb 文件,我会发现我的图像质量显着下降。

这就是我使用巴比伦加载模型的方式。

不确定,为什么.glb仅格式会导致问题。

0 投票
0 回答
44 浏览

aframe - 如何使用 webxr API 从 webxr 获取现有的 webxr 会话视频帧?

我正在使用 aframe 进行沉浸式体验(webxr)。有人可以帮我获取现有的 webxr 会话吗?

0 投票
1 回答
481 浏览

javascript - 我只想在模型查看器中播放带有音频的动画

我想在模型查看器中增强动画 3d 模型,其中动画应该与音频同步播放。我有实现,但增强表面指向和与不同浏览器(Android 和 iOs)的音频同步存在一些问题。故障编辑器

谁能帮我解决这个问题。音频与动画模型不正确同步。模型渲染也有一些问题。预先感谢

0 投票
0 回答
20 浏览

javascript - 不能在 AR 会话后面使用共享对话框

我正在使用three.js 创建沉浸式xr AR 视图,并使用该dom-overlay功能显示共享按钮。

单击共享按钮时,共享对话框位于 xr-session 后面,用户没有任何迹象表明共享对话框在会话后面等待结束。

在 IOS 设备上进行测试时,结果令人满意,因为 AR 会话上方出现了共享对话框,因此我相信这个问题与 android 相关。

我创建了一个基于three.js webxr 演示(链接)的最小可重现示例(链接) ,并带有额外的dom覆盖:

HTML:

JS:

0 投票
0 回答
24 浏览

javascript - SteamVR 启动后重新检查 WebXR 支持

我正在改进 WebXR 应用程序的错误处理,并且在用户启动浏览器应用程序而没有运行 SteamVR(至少对于 VIVE)的常见实例中,我想在提示用户后重新检查 XR 支持运行他们的 XR 平台的软件。

问题是缺少页面刷新,我不知道如何让 navigator.xr 刷新自己。

目前我有以下内容:

0 投票
1 回答
86 浏览

canvas - 如何将 WebXR 'immersive-xr' HMD 视图镜像/克隆到浏览器

如何WebXR 'immersive-xr'在使用相同的浏览器中从 HMD(如 VIVE 或 Oculus)镜像或克隆视图WebGL canvas

关于将像素复制到纹理 2D,然后将其应用为渲染纹理,或使用调整后的viewTransform. 如果您要渲染不同的视图,例如远程摄像头或第三人称旁观者视图,这些效果很好,但是如果只想在桌面上镜像当前的 HMD 视图,两者都是资源浪费。

自我回答如下,因为当我遇到这个问题时没有可靠的答案,我想为未来的开发人员节省时间。(特别是如果他们不是都精通WebGl2and WebXR

请注意,出于“原因”,我没有为此项目使用任何现有框架。如果您是,它不应该有太大变化,您只需要在库的渲染管道中的适当位置执行这些步骤。

0 投票
0 回答
63 浏览

javascript - 是否可以在 WebXR 模式下强制鼠标移动事件?

问题与用例:

在 WebXR 模式下,鼠标事件在浏览器内部被禁用或屏蔽,显然是因为 WebXR 开发人员认为您不想要或不能在 VR/AR 中使用鼠标。

但他们错了,假设太多,尤其是最终用户不能做的事情总是错误的。鼠标是一个指针,您可以握在手中而不是将它们拖到表面上,提供连续数据并且可以在许多 WebXR 案例中使用,但它们的决定使它们无法使用。

更糟糕的是,Web API 中存在一个错误,使得尽管 MDN 的兼容性图表在所有移动浏览器中都无法锁定指针,即使在非 WebXR 操作中也是如此,这进一步破坏了此类低成本设备的使用,包括在使用自定义 VR 代码时(polyfills)指针锁在 Android 浏览器上不起作用(官方演示)

我试过的

我尝试了通常的鼠标事件功能,例如:

或者:

或者:

我注意到,每次单击指针时,我都会获得该瞬间的坐标(但不是在移动期间),因此我尝试使用:

在每一帧上,但它也不起作用,显然是因为点击是“合成的”。

我还尝试将焦点放在每一帧的窗口或元素上。

显然事情没那么简单。也许解决方案就在 webvr/webxr polyfills 的某个地方,它们是在最终 API 被广泛采用之前开发的。

有任何想法吗?

0 投票
0 回答
91 浏览

aframe - 无法通过 A 帧中的耳机移动更新相机的旋转

我目前正在研究允许我在另一台设备的浏览器上流式传输“耳机所看到的内容”的东西。我正在使用 A-frame (v 1.2.0) 体验和 Oculus Quest。我使用 Socket.io 和 Web rtc 建立连接并在参与者之间发送流,到目前为止一切正常

我基于此示例的代码来流式传输画布的内容:

https://developers.google.com/web/updates/2016/10/capture-stream

像这样 :document.querySelector("canvas").captureStream(30);

一旦套接字建立了对等连接,我就会用 webrtc 发送它。一切正常,我可以通过我定义的相机从浏览器(查看器端)看到场景:

当我们在 2D 模式下(在 PC 浏览器上或在耳机上进入 VR 模式之前)使用鼠标拖动移动相机时,流跟随得非常好

但是当耳机用户进入 VR 模式时,摄像头并没有跟随用户的眼睛。(但是当我移动控制器时,我可以看到我的光线投射器的激光在移动)

我做了一些测试来理解,我看到“手动更新”相机的旋转正在工作:我制作了一个组件,允许我用操纵杆旋转相机的 Y 轴,它在流上也能很好地工作,我的意思是它证明了我指的是好相机。这是否意味着耳机没有更新我的相机轴?

该相机具有绑定到自身的核心“外观控制”组件。

https://aframe.io/docs/1.2.0/components/look-controls.html

我在官方文档上阅读了这个并看到:

当我们旋转 VR 头戴式显示器 (HMD) 时旋转实体。

这似乎回答了我的问题,但对我不起作用。我尝试了该组件的几乎所有属性,例如强制/检查“hmdEnabled”属性是否设置为 true,但我无法使其工作。