A-Frame，AR.JS。如何在 NFT-Marker 内定位对象？答案

【问题标题】：A-Frame, AR.JS. How to position object within the NFT-Marker?A-Frame，AR.JS。如何在 NFT-Marker 内定位对象？
【发布时间】：2021-02-15 03:16:53
【问题描述】：

我在将视频元素定位在 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>

repo 中的实时示例：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

有没有办法，例如，获取标记大小和位置，并设置视频元素的确切大小和位置？

感谢任何帮助！

【问题讨论】：

标签： javascript three.js aframe ar.js

【解决方案1】：

我最近也遇到了这个问题，你可以在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/

【讨论】：

看起来很有希望，我去看看！
很想看到你的作品@alpha-helix

【解决方案2】：

我最近在使用 NFT 时遇到了这个问题，发现 x、y、z 位置轴在您一次修改多个轴之前不会真正调整（或不正常）。

不确定它是否有帮助，但这对我有用，因为一次更改一个轴并检查位置是一件令人头疼的事情。另外，让你的调整剧烈+/- 300，这样你就知道它调整了哪个角度，因为我很确定我的轴被搞砸了。我不确定方向是否希望我将跟踪的对象放在表面上而不是在我的手中 - 但这使得测试变得困难。

另外在 Safari 中使用 iphone 运行良好，但 chrome 上的 android 存在跟踪和定位问题。

我在 Safari 上使用 iphone 设置跟踪和位置，然后用不同的设备进行验证。

【讨论】：