AR.JS仅使用NFT 3D无法获得视频或图片 [英] AR.JS Can't get Video or Picture working with NFT only 3D
问题描述
我终于放弃了，因为我无法让AR.JS与简单的NFT标记一起运行，该标记应在其上显示Video或PNG图像.如果我使用GLTF模型运行它，则不会出现问题.我尝试更改比例和位置，以查看它是否在标记等后面，但这无济于事.
控制台也不会抛出任何错误.
有人尝试我做很多不同的事情，但是没有任何显示的情况，有人可以给我一个简短的解决方法吗.
链接到带有标记 https://natrium83.github.io
的页面链接到3D示例 https://natrium83.github.io/ar3d/
链接到图片示例 https://natrium83.github.io/arbild/
链接到视频示例 https://natrium83.github.io/arvideo/
以下是图片的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Image based tracking AR.js demo</title>
<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<!-- style for the loader -->
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<!-- a-frame scene -->
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
<!-- a-nft is the anchor that defines an Image Tracking entity -->
<!-- on 'url' use the path to the Image Descriptors created before. -->
<!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
<a-nft
type="nft"
url="https://natrium83.github.io/ar3d/assets/marker_image"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
<!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
<a-entity>
<a-image src="https://natrium83.github.io/arbild/assets/bild.png"
scale="5 5 5"
position="100 100 0"
crossorigin
></a-image>
</a-entity>
</a-nft>
<!-- static camera that moves according to the device movemenents -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
'''
问题可能出在媒体的大小上.尽管文档中说"1" = 1米，但我必须将尺寸设置为height ='160'width ='120'才能使矿井正常工作.希望它也对您有用.
I finally have given up as I can't get AR.JS to run with a simple NFT marker that should display a Video or a PNG image over it. If I run it with a GLTF Model it works without problems. I tried changing the scale and position to see if it is somehow behind the marker etc. but that doesn't help in any way.
The console doesn't throw me any errors as well.
Could anybody throw me a short fix as I tried a lot of different stuff but nothing gets displayed.
Link to page with marker https://natrium83.github.io
Link to 3D example https://natrium83.github.io/ar3d/
Link to Picture example https://natrium83.github.io/arbild/
Link to Video example https://natrium83.github.io/arvideo/
Here is the code for the image:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Image based tracking AR.js demo</title>
<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<!-- style for the loader -->
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<!-- a-frame scene -->
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
<!-- a-nft is the anchor that defines an Image Tracking entity -->
<!-- on 'url' use the path to the Image Descriptors created before. -->
<!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
<a-nft
type="nft"
url="https://natrium83.github.io/ar3d/assets/marker_image"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
<!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
<a-entity>
<a-image src="https://natrium83.github.io/arbild/assets/bild.png"
scale="5 5 5"
position="100 100 0"
crossorigin
></a-image>
</a-entity>
</a-nft>
<!-- static camera that moves according to the device movemenents -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
'''
The problem might be the size of the media. Despite the documentation saying '1' = 1 meter, I had to set the size to height='160' width='120' to get mine working. Hope it works for you as well.
这篇关于AR.JS仅使用NFT 3D无法获得视频或图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
