问题标签 [web-ar]

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 回答
30 浏览

augmented-reality - 我可以使用 AR.js 构建具有第三个现实世界识别功能的 web-AR

我需要为现实世界中的物体检测建立基于增强现实的网站。 问题是: 我对 AR 完全陌生,我正在寻找项目所需的最佳工具和编程语言。我看到了使用 AR.js 的推荐,但我没有看到任何关于 3d 现实世界识别的教程或视频, 我的问题是可以使用 AR.js 来解决这类问题吗? 我感谢任何人提供的任何信息和指南

0 投票
0 回答
14 浏览

3d - 3d 对象在模式查看器 AR 模式下没有反射

我为 webAR 使用 Google 模型查看器,但是在网络浏览器的 3D 视图中,3D 对象在光线和反射下看起来很好,当我更改为 AR 模式时,对象显示没有任何反射。所以金属或玻璃看起来不正确。任何人都知道如何解决这个问题?

0 投票
0 回答
64 浏览

mobile - AR.JS 点击事件在 PC 和移动设备上都不起作用

我无法在为移动设备构建的 AR.js html 上的 a-image 上添加点击事件。

这是我的代码,但它不适用于电脑和移动设备。

有人能告诉我为什么吗?

0 投票
1 回答
89 浏览

three.js - 如何在一直检测到没有标记的标记后播放ar中的内容(一次检测然后播放)

我在 web ar 中开始了一些示例,我发现所有示例都适用于 nft 或标记。我想做的东西不应该总是依赖于标记或 nft。一旦检测到标记,我应该能够在 AR 中播放内容而不再需要标记。

对不起,我的英语很烂。等待帮助。谢谢

0 投票
0 回答
32 浏览

javascript - 如何在 web ar 中使用 nft 使内容(模型/视频)留在屏幕上?

我正在尝试使用Piotr Adam Milewski的示例 在我的工作中实现留在屏幕上的功能。

但我做不到。我是 JavaScript 的初学者,因为它是 web ar 所必需的,我正在学习它。我创建了 nft 示例,我计划包括手势控制(如旋转和缩放)等功能,我希望它是留在屏幕上。

这是我的工作

你可以在这里现场查看

使用这张图片

我面临的问题:

1.我无法将我的模型准确定位到 nft 的中心。

2.当我为我的模型包含旋转因子(-90 0 0)时,通过手势的旋转功能有效但方式不正确。如果我为我的模型移除旋转,则通过手/鼠标进行旋转效果很好,但模型将被反转。

3.我想包括留在屏幕上,但我缺乏在我的代码中实现的知识。

0 投票
0 回答
32 浏览

augmented-reality - 如何检查WebXR的命中测试结果中检测到的平面是否垂直?

我是 WebXR 的新手,并试图只在检测到的平面是垂直的(如墙壁)时才显示准星。我以这个基本的命中测试示例为起点。我没有看到任何用于垂直检测平面的参数,但在演示中,标线在垂直墙上时会改变颜色。

我在这里错过了什么吗?如果平面是垂直的,有没有办法只显示标线?

我可以看到这里设置的标线的位置和旋转:

有没有办法从这里访问标线方向?

演示:https ://immersive-web.github.io/webxr-samples/hit-test.html

0 投票
0 回答
35 浏览

model-viewer - google modelViewer 动画在预览中播放,但不在 XR/AR 空间中播放

我在模型查看器标签中链接了一个动画 .glb 文件。访问链接时,海报将显示几秒钟,然后模型动画将播放,其下方有一个按钮,可在 AR 空间中查看。按下按钮时,模型出现在空间中,但动画不再播放。有没有人有什么建议?我在https://gltf-viewer.donmccurdy.com/上查看了模型,那里没有任何错误。我还尝试为基本的搅拌机立方体设置动画,但仍然遇到同样的问题。

这是代码的链接:https ://glitch.com/edit/#!/speckled-therapeutic-gum 注意:您必须在手机上查看才能看到问题。

谢谢!

0 投票
0 回答
115 浏览

javascript - 如何在arjs中的a-marker中插入html内容

我正在使用这个库https://ar-js-org.github.io/AR.js-Docs/marker-based/开发 web ar ,我想在标记检测时呈现 html 内容。这是基于ARjs 标记的简单示例

我还发现了这个用于 html 嵌入的存储库https://github.com/supereggbert/aframe-htmlembed-component 。这显示 html 嵌入在 a-scene 标记中,但每当我在 a-marker 标记之间添加此内容时都不起作用。

我不确定库(https://github.com/supereggbert/aframe-htmlembed-component),我是否正在使用 ARJS。请建议是否有更好的方法来解决该问题或我的代码有问题。谢谢

0 投票
0 回答
93 浏览

javascript - ARnft 的 AR nft 标记链接问题 - 带有 NFT 的 WebAR

我从这里下载了这个 javascript 库:https ://github.com/webarkit/ARnft 我开始做一些测试。

如果我将此链接用于 nft:https ://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image -tracking/nft/trex/trex-image/trex

一切都很好,但是当我尝试使用上传自定义 nft 的链接时,什么都没有了。也许有人可以帮助我理解?我正在使用 arNEFT_gltf_example.html 这是我的代码:

谢谢

0 投票
2 回答
156 浏览

angular - 从 AWS S3 传递私有签名 URL 或公共 URL 时,Web 模型查看器不显示在 AR 中查看按钮

我开始在我的 Angular 项目中使用 google 的 ModelViewer 1.9.2 来渲染 3d 模型。目前可能进行表面检测以增强对象。最初我在应用程序资产中使用 3d 模型来增强,效果很好,我能够增强。现在我想从 s3 存储桶中获取文件并将 url 传递给模型查看器。这就是我卡住的地方。公共 URL 和私有签名 URL 都不允许我增加 3d 对象

这是我的 component.html

这是我的 component.ts 文件

当我将签名的 URL 传递给 modelViewer 时,我正在调用一个内置的 s3 服务,该服务将允许我使用凭据访问私有存储桶并返回一个签名的 URL,以便我可以将其传递给模型查看器

我已经为 s3 存储桶(公共和私有)启用了 CORS 策略,这是我应用的 CORS 策略

在这两种情况下,我都能看到模型查看器——模型预览。但“在 AR 中查看”按钮未启用。我没有 CORS 访问问题。我正在使用的设备是支持 Android ARCore 的设备。当我从本地应用程序资产传递相同的文件时,我可以看到“在 AR 中查看”按钮,因此我确信附加到 Angular 应用程序的模型查看器插件没有任何问题。

当我将公共或签名的 url 传递给模型查看器时,问题就出现了。如果我在此过程中遗漏了什么,请建议我。