问题
I'm really new to A-Frame and Ar.js, literally found out about this and started working on this today. It's for a project I'm doing and I'm using this tutorial https://aframe.io/blog/arjs3/#creating-image-descriptors I followed the instructions and uploaded the 'dinosaur' image into an NFT creator. It said I would get three images downloaded, I did and they end with fset3, fset and iset. I tried clicking on the downloaded images and got a message saying 'There is no application set to open the document and with what looks like the image link.(I'm using a mac by the way). Here is the code:
<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="<path-to-your-image-descriptors>"
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
gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
scale="5 5 5"
position="100 100 0"
>
</a-entity>
</a-nft>
<!-- static camera that moves according to the device movemenents -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>```
I understand that I need to input the image descriptor in "url="<path-to-your-image-descriptors>" but I'm stuck on getting to that point.
回答1:
If you serve it on web server the <path-yo-your-image-descriptors> will be like
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
focus on the URL second last, the trex-image/trex
The trex-image is folder containing trex.fset, trex.fset3, trex.iset. Hence /trex at the end of URL
trex-image
| -- trex.fset
| -- trex.fset3
| -- trex.iset
Or you can use localhost like XAMPP. See: https://stackoverflow.com/a/61083435/12958413
More info: AR.js Image Tracking
回答2:
How to deploy your WebAR app with NFT Markers
- First, create your code (HTML, javascript, css...)
- Second, create your NFT descriptors with NFT-Marker-Creator read this other stackoverflow article
- Third, set the correct path of the folder/location of the descriptors(NFT markers)
if your descriptors, three files with extension .fset .iset .fset3 named trex are in a folder trex-descriptors:
<a-nft
type="nft"
url="./trex-descriptors/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
Note that there is not extension in the files path. Do NOT put the extension !!!
Testing
At the end if you want to test in localhost (on your device) run a server.
For a python server ( you need to install python) run:
// Python 2.x
python -m SimpleHTTPServer
// Python 3.x
python -m http.server
your page will be served at this address in the browser:
http://localhost:8000/
If you prefer run a nodejs server, install the node server module:
npm install http-server -g
then run:
http-server . -p 8000
in this way your page will be served at:
http://localhost:8000/
Hosting on a WebServer (Github pages)
If your code is hosted on Github you probably need
to modify the url. this is related to how github treat the path urls.
If you are owner of a profile on github, and your profile name is myprofile :
https://github.com/myprofile
and you are owner of a repository myrepository on your profile:
https://github.com/myprofile/myrepository
you should add myrepository to the nft url:
<a-nft
type="nft"
url="./myrepository/trex-descriptors/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
or if you want:
<a-nft
type="nft"
url="https://github.com/myprofile/myrepository/trex-descriptors/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
but this won't work on localhost. You can set up a gh-pages branch on your repository and modify the url in order to have in master branch a version that works on localhost and and another for gh-pages served as website.
EXAMPLE:
https://github.com/kalwalt/kalwalt-interactivity-AR/blob/master/arjs/basic-nft-aframe.html master branch
https://github.com/kalwalt/kalwalt-interactivity-AR/blob/gh-pages/arjs/basic-nft-aframe.html gh-pages branch
Testing example: https://kalwalt.github.io/kalwalt-interactivity-AR/arjs/basic-nft-aframe.html
来源：https://stackoverflow.com/questions/61262063/image-tracking-and-location-based-ar-with-a-frame-and-ar-js-3-having-a-problem-w