A-Frame，AR.JS如何在NFT标记中放置对象？

问题描述

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

例如，是否可以获取标记的大小和位置并设置视频元素的确切大小和位置？

感谢您的帮助！

解决方法

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

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

此外，在 Safari 中使用 iphone 效果很好，但 chrome 上的 android 存在跟踪和位置问题。

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

aframe ar.js javascript three.js

A-Frame，AR.JS如何在NFT标记中放置对象？

问题描述

解决方法

相关问答