javascript - A-Frame，AR.JS。如何在 NFT-Marker 中定位对象？-6ren

javascript - A-Frame，AR.JS。如何在 NFT-Marker 中定位对象？

转载作者：行者123 更新时间：2023-12-04 13:31:43

25

4

我在 NFT 标记区域内定位视频元素时遇到问题。
在没有运气的情况下挖掘了 AR.JS 和 AFRAME 文档。
问题:在具有不同屏幕分辨率和相机分辨率的每个设备上，视频的位置不同。
如果我根据我的 PC 网络摄像头设置 sourceWidth、sourceHeight、displayWidth、displayHeight，我将无法再在智能手机上看到该对象，因为它在屏幕外呈现。
第二个问题是使视频元素的大小与标记完全相同。在不同的设备和相机上视频大小是不同的。
See the screenshot
我的代码几乎类似于 ar.js 存储库中的 nft 示例。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@c5eabc1ac708a76a0dbe9538c40ecd290af65714/dist/aframe-master.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<script>
    window.onload = function() {
        AFRAME.registerComponent('videohandler', {
            init: function () {
                var marker = this.el;

                this.vid = document.querySelector("#vid");

                marker.addEventListener('markerFound', function () {
                    this.vid.play();
                }.bind(this));
    
        marker.addEventListener('markerLost', function() {
            this.vid.pause();
            this.vid.currentTime = 0;
        }.bind(this));
            }
        });
    };
</script>

<body style="margin: 0px; overflow: hidden">

    <a-scene vr-mode-ui="enabled: false;" renderer="logarithmicDepthBuffer: false; " embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false; sourceWidth:414; sourceHeight:736; displayWidth: 414; displayHeight: 736;">
      <a-assets>
        <video src="https://cors-anywhere.herokuapp.com/https://www.w3schools.com/html/mov_bbb.mp4" preload="auto" id="vid" response-type="arraybuffer" loop
          crossorigin webkit-playsinline autoplay muted playsinline preload="true"></video>
      </a-assets>

      <a-nft type="nft" videohandler url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/data/dataNFT/pinball" smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5" preload="true">
        <a-video src="#vid" position="0 0 0" width="300" height="424" rotation="-90 0 0" videoelement>
        </a-video>
      </a-nft>

      <a-entity camera></a-entity>
    </a-scene>
</body>

存储库中的实时示例: https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft-video/
扫描此图片: https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft-video/pinball.jpg
例如，有没有办法获取标记大小和位置并设置视频元素的确切大小和位置？
任何帮助表示赞赏!

最佳答案

我最近也遇到了这个问题，你可以在github上查看这个问题。但这个问题是开放的。
所以经过几天的搜索，我找到了 this令人惊叹的 Github 存储库，它似乎是 AR js 的包装器，解决了将 3d 对象/视频集中在检测到的图像上的问题。

Mind AR Github 存储库:https://github.com/hiukim/mind-ar-js

Mind AR 文档:https://hiukim.github.io/mind-ar-js-doc/

使用心灵增强现实

样板代码 https://hiukim.github.io/mind-ar-js-doc/quick-start/overview

编译目标图像(创建思维文件)https://hiukim.github.io/mind-ar-js-doc/tools/compile/

关于javascript - A-Frame，AR.JS。如何在 NFT-Marker 中定位对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64646001/

25

4

0

文章推荐： reactjs - 将 <script> 标签嵌入到 React Gatsby 组件中

文章推荐： jenkins - 在多分支管道中禁用分支并通过扫描事件重新打开

文章推荐： tensorflow - colab_utils.annotate()，注解格式

android - 如何创建我自己的 AR 引擎 : AR theory
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit th
招聘信息泄密，谷歌正开发新 AR 设备和 AR 操作系统
谷歌是现代增强现实 (AR) 领域的早期领导者之一，但该公司近年来的努力似乎并未取得太大进展。不过，随着苹果和 Facebook 都在 AR 上投入了大量资金，这种趋势很快就会逆转。 ▲
unity3d - 使用 kudan AR 旋转 AR 对象以始终面向相机
我正在 Unity3D 中开发一款类似于 Pokemon Go 的游戏。使用 Kudan 增强现实 SDK。我的要求很简单，AR 对象必须始终面向相机。我完全不知道如何使用 Kudan AR 完成这项
android - AR 应用程序不工作显示错误 "Failed to create AR session"
这是我的主要代码 package com.example.ar; import androidx.appcompat.app.AppCompatActivity; import android.app
ios - 从普通 AR View 切换到耳机 AR View
有任何方法可以从普通 View 切换到耳机 View ，并将所有模型保留在最后一个 View 中。我正在将模型放在普通 View 中的地面上，然后用户点击一个按钮切换到耳机 View (并佩戴谷歌纸板
javascript - 触摸 Ar.js 中的 ar 对象
我有一个关于 ar 对象触摸检测的问题。我将 A-Frame 与 Ar.js 结合使用在我的项目中，我有一个可以旋转的地球仪。现在我想添加特定于国家/地区的“标记”，它也应该是对象。我尝试过: A
html - AR.js 帮助/麻烦使用自定义 AR 标记
我需要一些关于将自定义 AR 标记与 AR.js 结合使用的帮助。从自定义标记生成器页面下载 .patt 文件后，我们遇到了一些问题，让对象在标记上初始化。一切都在 Node.js 服务器上的客户端进
javascript - AR.js:如何在单击按钮时启用/禁用相机并显示/隐藏 AR 内容
在浏览器上演示 AR.js AR 功能的所有示例和代码，在网页加载后立即运行。但是，我想为用户提供一个选项，以手动启动和停止扫描过程以及隐藏 AR 内容。基本上，我只想在用户单击网页上的按钮时加载
android - Android 中带有 ar-ae 和 ar-sa 语言环境的阿拉伯数字
正如我在以下问题中所问的那样: Arabic number in Arabic text in Android 如果我使用阿拉伯语语言环境 ar-ae 或 ar-sa，数字将使用印度-阿拉伯数字显示。
r - R 中 AR 模型选择的 auto.arima 和 ar 之间的区别
当尝试使用这些方法找到最佳 AR(p) 模型时，我得到了截然不同的结果。 ar {统计信息}:http://stat.ethz.ch/R-manual/R-patched/library/stats/
python - 为什么我从 "ar[i]"中的 "for i in ar"得到一个 IndexError(或 TypeError，或者只是错误的结果)？
我正在尝试使用 for 循环对列表的值求和。这是我的代码: def sumAnArray(ar): theSum = 0 for i in ar: theSum = t
node.js - 如何使用 node-ar-drone 为 AR.Drone 2.0 制作平面装饰？
我正在使用 node-ar-drone 来控制无人机，在起飞之前我想执行平面配平。但是，我注意到该模块中没有执行此操作的函数，所以我想知道如何做到这一点。最佳答案 node-ar-drone 有一个
android - 当我在 android 中安装 hello-ar 示例时，为什么我们需要安装 ar-core 预览版 apk？
为什么我需要在运行 hello-ar 示例之前安装 ar-core 预览版 apk 服务。如果我不安装 ar-core 预览版 apk，hello-ar 示例应用程序会崩溃。最佳答案您必须安装 a
AR/VR在制造业数字化转型中的作用
随着第四次工业革命的出现，制造业引入了工业4.0的概念。工业4.0实际上是通过使用机器人、物联网、网络安全、人工智能、增强现实(AR)、虚拟现实(VR)等先进技术对制造业进行数字化转型，它也被称
AR.js 多相机智能手机选择常规镜头
在 AR.JS 演示中，具有多个后置摄像头的 Android 手机往往会使用错误的镜头，例如伸缩镜头。比如华为mate 20 pro就使用了3倍镜头。如何选择合适的相机使用？最佳答案我遇到了同样的
android - 具有导入的ClassNotFoundException。 ar
我在公司项目中使用两个内部库。我导入了.aar文件，然后将它们作为依赖项添加到Projedt Structure->“+”按钮中已声明的依赖项下。这在我的应用程序级gradle文件中生成了以下几行:
android - AR Android应用程序的3D对象识别
我正在尝试开发AR Android应用程序。它应该检测并识别相机捕获的对象，为此，我正在使用OpenCV，但我对AR Realm 中的移动设备的对象识别不是很熟悉。我有两个问题: 1- SIFT，
android - ar 命令行长度
我有一个由 bjam 提供给 ar (android ar exactly) 的超长命令行，而 ar 只是破坏了一个文件路径和提示文件不存在。有没有办法让 ar 分配更大的命令行缓冲区？最佳答案
linux - "ar"工具允许创建空库
如果命令行中指定的某些库不存在，则来自 Binutils 的经典“ar”工具不会失败。它仅显示消息“ar: .a: No such file or directory”，但返回代码为零。这使得有时很
从图像创建 AR 标记
最近我在使用 ARToolKit 工作，我面临着从静态图像创建 AR 标记的必要性。因此，正如 ARToolKit 旧时事通讯中所建议的那样，我开始编写自己的视频函数，当我执行 mk_patt.exe

首页

博学

6Ren·AI

商城

javascript - A-Frame，AR.JS。如何在 NFT-Marker 中定位对象？