The following is the code from the example posed on the aframe blog. The result shows the camera image only; no box and no model:
not sure what to expect. The model is there and js libraries are there.
Should I see the box and model somewhere in my camera image?
<!DOCTYPE html>
<html>
<head>
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style=’margin : 0px; overflow: hidden;’>
<a-scene
embedded arjs=’sourceType: webcam;’>
<!-- create your content here. just a box for now -->
<a-box position='0 0.5 0' material='opacity: 1 scale = "2 2 2" color="red";'
>
</a-box>
<!-- define a camera which will move according to the marker position -->
<a-entity camera
>
</a-entity>
<a-marker preset=’hiro’>
</a-marker>
<a-collada-model
id = "titlexx1b"
src="models/man_default.dae" position = "1 1 1"
scale = "1 1 1"
>
</a-collada-model>
</a-scene>
</body>
</html>
You should add the box and the model to the markers you want to put them on. In this case the hiro marker. Usually, it's not recommended to put more than one object on a single marker.
Another thing is, I'm not sure that DAE files are supported by A-frame / AR.js. Consider using a supported format.
Related
Testing A Frame for use with augmented reality (AR)
I have read through documentation and tested a small a-box which displays fine on top of the marker, but when I add a gltf model it wont load, I have tried the model on an online gltf viewer and it works fine, but it wont work on A Frame code?
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script
src="https://unpkg.com/aframe-physics-system#^1.4.x/dist/aframe-physics-system.min.js"
data-component-description="Physics system for A-Frame VR, built on Cannon.js"
data-component-names="dynamic-body,static-body,constraint"
data-component-url="https://npmjs.com/package/aframe-physics-system"
data-package-name="aframe-physics-system"
></script>
</head>
<!-- https://cdn.glitch.global/40131ca8-3d08-4bae-ad16-b96766757df7/kit.gltf?v=1668698450644 -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden">
<a-scene embedded arjs>
<a-assets>
<a-asset-item id="tree" src="https://cdn.glitch.me/c7d0d4e9-d04a-4e56-989f-c554ae50c253%2Fwindmilmaster4.gltf"></a-asset-item>
</a-assets>
<!-- create your content here. just a box for now -->
<a-entity>
<a-box position="0 0 -2" material="opacity: 1;"></a-box>
<a-entity gltf-model="##tree" scale=".02 .02 .02"></a-entity>
</a-entity>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
</html>
I would love to hear your thoughts
Apologies after some time I have noticed some of the script werent upto date and more importantly were not inside of the
I'm trying to use Image Tracking with my own image. When I run the app I see that the NFT is loaded (console: [info] Loading of NFT data complete.) but when scanning the image nothing happens.
<!DOCTYPE html>
<html>
<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>
<body style="margin : 0px; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs>
<a-nft
type="nft"
url="nft_img/sImg"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-box
color="blue"
scale="0.07 0.07 0.07"
position="0 0 0">
</a-box>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
The NFT files are saved in the folder nft_img. The image that I'm using for NFT files is a very simple one.
Tested image
I suggest you to restart with the same code but using the descriptors (NFT marker) of the pinball.jpg image instead (included in AR.js and in jsartoolkit5). If the code is ok, that is you can track the pinball image and the box appear, this means that your initial image, that you want to track is not adequate. Also looking at your image that you provided I can almost certainly say that it is not suitable. If you can create the NFT marker with NFT-Marker-Creator this not means that will have sufficient descriptors for the detection and for the tracking.
For more information on this subject read carefully the wiki of NFT-Marker-Creator and especially the Creating good markers section.
in my tests I had to increase the scale because it seems that the size depends on those of the image to recognize (which is usually much larger than the box you are going to draw).
In any case, the extraction of the features for the test image you provided returns a confidence value of 0 (obviously too low).
I suggest you to use a more complex image (with more features) and increase the scale factor of the box.
PS: pay attention to properly close the a-nft tag after closing the a-box one.
I have started to look at Aframe to create a web based AR project but am not sure what I am doing. My goal is to be able to spawn a 3D model in AR and make the model clickable or tap to open a hyperlink to a website. Currently my code looks like this:
<html>
<head>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs cursor="rayorigin: mouse" raycaster="objects: #engine">
<!-- Grab models from here: https://github.com/KhronosGroup/glTF-Sample-Models -->
<a-asset-item id="engine" src="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/2CylinderEngine/glTF/2CylinderEngine.gltf"></a-asset-item>
<!-- add the model -->
<a-entity gltf-model="#engine" position="0 0 0" scale="0.001 0.001 0.001" startEvents: "clicked"></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
<script>
var toggleEl = document.querySelector('#engine')
toggleEl.addEventListener('click', function (evt){
toggleEl.emit("clicked");
});
</script>
</body>
</html>
For now it is just a simple 'point camera at a marker, spawn a 3D model from a github repo, be able to click/tap on the model to open a hyperlink to a website' project but I am unable to get it to work.
What I am doing wrong? I thank you for any help that can be given.
This isn't possible at present, there's no hit detection within webXR yet and regular user DOM events are disabled
https://aframe.io/blog/webxr-ar-module/
Under IOS, the solution no longer reacts to movements.
My solution has worked and now is no longer working.
Also the "hello world" example with the source code of Glitsch (see below) doesn't work anymore, but if you call the example from the a-frame start page (https://aframe.io/examples/showcase/helloworld/), it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR!Test VR</title>
<meta name="description" content="Test VR">
<script src="https://aframe.io/aframe/dist/aframe-master.min.js" ></script>
</head>
<body>
<a-scene background="color: yellow">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
What's the difference? What do I have to do to make my solution work under IOS again?
Unfortunately, Chrome (m74+) and Safari (iOS 12.2+) now ship with sensor access disabled by default. The user has to enable manually on settings:
chrome://flags/#enable-generic-sensor in Chrome
Settings -> Safari -> Motion & Orientation Access in Safari iOS
Content also must be served over https.
More info on: https://github.com/aframevr/aframe/issues/3976
I am trying to detect different markers. One is a pattern named and1painting.patt and the other is the preset 'hiro'
When I show the hiro pattern, it is detected by the and1painting.patt marker. E.g. in the following code, it always shows the blue box rather than red, when I show the hiro marker. Thoughts on why? I tried this with the sample1.patt that is already in the repo but it didn't work either.
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker type='pattern' patternUrl='Data/and1painting.patt'>
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:blue;'>
</a-box>
</a-marker>
<!-- handle marker with hiro preset -->
<a-marker preset='hiro'>
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
</a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Unfortunately AR.JS still is seriously broken at the moment:
https://github.com/jeromeetienne/AR.js/pull/236
You can hack your way to a working solution, if you follow the comments in the issue.
Actually, ar.js is not at all that broken. There is a syntax error in the code above and that is the reason it doesn't work. The correct syntax of the call for the pattern file is simply 'url = ' instead of 'patternUrl = ''.
Try this:
a-marker type='pattern' url='Data/and1painting.patt'
I know it works, because it took me forever to figure it out.