I just started trying the A-frame with AR.js to hopefully get an object to render on a piece of paper. I have tested the object and it is correctly rendered. However, when I try it with a custom image, it no longer works... I am trying to show a gltf file on a pattern. THe pattern is (in image form): and was made using https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
Does anyone see anything wrong with my code as to why that pattern is not being taken by the camera as a match? Is it my code? or is it something to do with the pattern file I am trying to load?
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<a-assets>
<a-asset-item id="mesh" src="./data/Camargue.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#mesh" rotation="0 180 0" modify-materials></a-entity>
<a-light type="directional" color="#fff" position="-1 -5 -5" look-at="a-entity"></a-light>
<a-light type="ambient" color="#fff" intensity="3" look-at="a-entity"></a-light>
<a-marker-camera type="pattern" patternUrl="data/pattern-logo.patt"></a-marker-camera>
</a-scene>
<script>
AFRAME.registerComponent('modify-materials', {
init: function () {
// Wait for model to load.
this.el.addEventListener('model-loaded', () => {
// Grab the mesh / scene.
const obj = this.el.getObject3D('mesh');
// Go over the submeshes and modify materials we want.
obj.traverse(node => {
if (node.name.indexOf('Loggia-frame') !== -1) {
var environment = new THREE.CubeTextureLoader().setPath('data/HDR/').load(
[
'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'
]
);
environment.format = THREE.RGBFormat;
environment.mapping = THREE.CubeReflectionMapping;
var material = node.material;
material.envMap = environment;
}
});
});
}
});
</script>
</body>
Related
I'm working on a project in which I want to repurpuse this example
https://aframe.io/aframe/examples/showcase/model-viewer/
all I want to add is a trigger that starts the animation on click event.
I have managed to implement this to run on my server
https://github.com/aframevr/aframe/tree/master/examples/showcase/model-viewer
but now struggling to code the event handler.
in model-viewer.js I can see a line that triggers animation at the start
modelEl.setAttribute('animation-mixer', '');
I cant seem to figure out how to play it on click.
I have done this implementation before in a simpler setup (https://codepen.io/wspluta/pen/rNwReNB)
<script>
AFRAME.registerComponent('animationhandler', {
init: function() {
let playing = false;
this.el.addEventListener('click', () => {
if (!playing) {
this.el.setAttribute('animation-mixer', 'clip:*; loop: once; clampWhenFinished: true; duration : 6');
playing=true;
} else {
this.el.removeAttribute('animation-mixer');
playing=false;
}
});
}
})
</script>
<body>
<a-scene>
<a-assets>
<a-asset id="sky" src="https://raw.githubusercontent.com/WSPluta/webxr102/main/tatooine.jpg"> </a-asset>
<a-asset-item id="tie" src="https://raw.githubusercontent.com/WSPluta/webxr102/main/newTie.gltf"></a-asset-item>
</a-assets> <a-entity id="tie" gltf-model="#tie" position="0 0.5 -5" scale="0.25 0.25 0.25" animationhandler></a-entity>
<a-plane id="background" position="0 5 -15" height="9" width="16" rotation="0 0 0" opacity="0.9"></a-plane>
<a-sky src="#sky"></a-sky>
<a-camera>
<a-cursor color="yellow"></a-cursor>
</a-camera>
</a-scene>
</body>
but I'm unable to figure out how to modify example/showcase document in order to implement it. I really want to reuse the camera movement and all the good stuff that comes from the example/showcase file.
I wanted to play an animation and used this code with react/nextjs to achieve this functionality.
const handleAnimate = useCallback(
(e) => {
const { keyCode } = e
const rot = document.getElementById("camOrbit").getAttribute("rotation");
// when w is pressed
if (keyCode === 87) {
document
.getElementById("modAnim")
.setAttribute("animation-mixer", `clip: Walk; loop: repeat`);
document.getElementById("modAnim").setAttribute("rotation", `0 ${rot.y} 0`);
//
//
//
//
// document.getElementById("modAnim").setAttribute("position", `${pos.x} 0 ${pos.z}`);
document.addEventListener("keyup", (event) => {
document
.getElementById("modAnim")
.setAttribute("animation-mixer", `clip: Idle; loop: repeat`);
});
}
},
[setAttribute]
);
I'm trying to play a sound just once when a marker is detected with the A-frame and AR.JS libraries.
I'm trying the code lines below but the sound is playing indefinite.
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;';>
<a-assets>
<audio id="sound" src="audio.mp3" preload="auto"></audio>
</a-assets>
<a-marker preset="hiro">
<a-entity id="examplemodel" gltf-model="./models/Example.glb" soundhandler></a-entity>
</a-marker>
<a-entity sound="src: #sound" autoplay="false"></a-entity>
<a-entity camera></a-entity>
</a-scene>
<script>
AFRAME.registerComponent('soundhandler', {
tick: function () {
var entity = document.querySelector('[sound]');
if (document.querySelector('a-marker').object3D.visible == true) {
entity.components.sound.playSound();
} else {
entity.components.sound.pauseSound();
}
}
});
</script>
When I changed tick for init I got this error:
Uncaught TypeError: Cannot read property 'playSound' of undefined
Could you please give me some ideas to solve this issue?
It's playing indefinetely, because once it's visible - on each render loop you call playSound().
If you add a simple toggle check - You'll get your "once per visible" result:
tick: function() {
// marker is the object3D of marker
if (marker.visible && !this.markervisible) {
// do your stuff here once per visible
this.markervisible = true;
} else if (!marker.visible) {
this.markervisible = false;
}
}
Check it out here
I'm trying to reparent an element (entity), keeping its position, rotation (and if possible, size, eg, scale) in the scene. Ideally, I would like to have a component (say "reparent") that when set on an entity, "moves" it to the specified parent, keeping the aspect of the entity in the scene. For example, for the next HTML code, the green entity would become a child of the red one, but would keep its position and rotation in the scene:
<a-scene id="scene" background="color: grey">
<a-entity id="red"
position="-1 3.5 -4" rotation="30 0 0" material="color: red"
geometry="primitive: cylinder"></a-entity>
<a-entity id="green" reparent="parent: #red"
position="-3 2 -4" rotation="0 45 0" material="color: green"
geometry="primitive: box"></a-entity>
</a-scene>
Apparently, this can be done at the three level using attach, but when I try to write a simple component using it, it doesn't work, apparently due to what the reparenting at the HTML does (I assume, because of AFrame).
I've written his test component to show the problem:
AFRAME.registerComponent('reparent', {
schema: {
parent: {type: 'selector', default: null},
},
init: function () {
const el = this.el;
const parent = this.data.parent;
move = function(evt) {
parent.object3D.attach(el.object3D);
console.log(el.object3D.parent.el.id, el.parentElement.id);
// parent.appendChild(el);
// console.log(el.object3D.parent.el.id, el.parentElement.id);
};
el.sceneEl.addEventListener('loaded', move);
}
});
When run, the result is red scene: the parent of object3D changed, but at the HTML level the parent of the element remains the scene. The green box appears as intended (in "-3 2 -4", world coordinates, and with the right rotation).
If I uncomment the two commented lines, I get a second line red red, but the green box disappears. In other words, now at the HTML the element got reparented, as intended, but somehow its object3D is not working anymore.
Any idea about why this fails, or some other idea for such a component?
All of this with AFrame 1.1.0.
After getting the advice that reusing the same element (entity) for reparenting is not a good idea (see Change parent of component and keep position), I explored the idea of copying the entity to be reparented in a new element under the new parent, and then remove the "old" one (instead of directly reparenting the entity). Granted, it is not the most clean hack in the world, but I hope it helps in my use case. So, I wrote a component:
AFRAME.registerComponent('reparent', {
schema: {
parent: {type: 'selector', default: null},
},
update: function () {
const el = this.el;
const parent = this.data.parent;
if (el.parentElement == parent) {
// We're already a child of the intended parent, do nothing
return;
};
// Reparent, once object3D is ready
reparent = function() {
// Attach the object3D to the new parent, to get position, rotation, scale
parent.object3D.attach(el.object3D);
let position = el.object3D.position;
let rotation = el.object3D.rotation;
let scale = el.object3D.scale;
// Create new element, copy the current one on it
let newEl = document.createElement(el.tagName);
if (el.hasAttributes()) {
let attrs = el.attributes;
for(var i = attrs.length - 1; i >= 0; i--) {
let attrName = attrs[i].name;
let attrVal = el.getAttribute(attrName);
newEl.setAttribute(attrName, attrVal);
};
};
// Listener for location, rotation,... when the new el is laded
relocate = function() {
newEl.object3D.location = location;
newEl.object3D.rotation = rotation;
newEl.object3D.scale = scale;
};
newEl.addEventListener('loaded', relocate, {'once': true});
// Attach the new element, and remove this one
parent.appendChild(newEl);
el.parentElement.removeChild(el);
};
if (el.getObject3D('mesh')) {
reparent();
} else {
el.sceneEl.addEventListener('object3dset', reparent, {'once': true});
};
}
});
You can check it works with the following HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="reparent.js"></script>
</head>
<body>
<a-scene id="scene" background="color: grey">
<a-entity id="red"
position="1 2 -4" rotation="30 0 0" material="color: red"
geometry="primitive: cylinder"></a-entity>
<a-entity id="green" reparent="parent: #red"
position="-1 0 -4" rotation="0 45 0" material="color: green"
geometry="primitive: box"></a-entity>
<a-entity id="wf"
position="-1 0 -4" rotation="0 45 0" material="wireframe: true"
geometry="primitive: box"></a-entity>
</a-scene>
</body>
</html>
The wireframe entity is just to show how the green box stays exactly in the same position, although it was "reparented" under the red entity (explore the DOM to check that). As explained above, the green box is really a new one, cloned from the original one, which was then deleted by the component.
The component should work when its parent property is changed, allowing for dynamic reparenting when needed.
I want to augment a video on multiple images .So i am trying to implementing 8th wall image tracking augmentation with multiple images . But I am not able to get the augmentation. I have an issue with image targets . If i mention the image target name in html then it works.
<a-entity target-video="name: imageTargets; video: #alpha-video;" material="shader: chromakey; src: #alpha-video; color: 0.1 0.9 0.2" geometry="primitive: plane; height: 0.6; width: 1.38;"> </a-entity>
name : imagetarget1 (one of the image target name in 8th wall console)
But when i try with multiple images then it doesn't works .
Can any one help me out solving this issue . I have uploaded 10 images in 8th wall console and the names are as following - 'imagetarget1', 'imagetarget2', 'imagetarget3', 'imagetarget4', 'imagetarget5', 'imagetarget6', 'imagetarget7', 'imagetarget8', 'imagetarget9', 'imagetarget10' .
AFRAME.registerComponent('target-video', {
schema: {
name: {
type: 'string'
XR8.XrController.configure({
imageTargets: ['imagetarget1', 'imagetarget2', 'imagetarget3', 'imagetarget4', 'imagetarget5', 'imagetarget6', 'imagetarget7', 'imagetarget8', 'imagetarget9', 'imagetarget10']
})
},
video: {
type: 'string'
},
},
init: function() {
const object3D = this.el.object3D
const name = this.data.name
object3D.visible = false
const v = document.querySelector(this.data.video)
const el = this.el
const showImage = ({
detail
}) => {
if (name != detail.name) {
return
}
v.play()
object3D.position.copy(detail.position)
object3D.quaternion.copy(detail.rotation)
object3D.scale.set(detail.scale, detail.scale, detail.scale)
object3D.visible = true
}
const hideImage = ({
detail
}) => {
if (name != detail.name) {
return
}
v.pause()
object3D.visible = false
}
this.el.sceneEl.addEventListener('xrimagefound', showImage)
this.el.sceneEl.addEventListener('xrimageupdated', showImage)
this.el.sceneEl.addEventListener('xrimagelost', hideImage)
}
})
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>8th Wall Alpha Video Example</title>
<script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script>
<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>
<!-- XR Extras - provides utilities like load screen, almost there, and error handling.
See github.com/8thwall/web/xrextras -->
<script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>
<!-- 8thWall Web - Replace the app key here with your own app key -->
<script src="//apps.8thwall.com/xrweb?appKey=XXXXXXXXXX"></script>
</head>
<body>
<a-scene xrweb="disableWorldTracking: true" xrextras-gesture-detector xrextras-almost-there xrextras-loading xrextras-runtime-error>
<a-assets>
<video id="alpha-video" autoplay playsinline crossorigin="anonymous" loop="true" src="https://cdn.glitch.com/087c366e-1fe1-4d07-8886-bfaf18fbc321%2Fdino.mp4?v=1588058174702">
</video>
</a-assets>
<a-camera position="0 4 10" raycaster="objects: .cantap" cursor="fuse: false; rayOrigin: mouse;">
</a-camera>
<a-light type="directional" intensity="0.5" position="1 1 1"></a-light>
<a-light type="ambient" intensity="1"></a-light>
<!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
<a-entity target-video="name: imageTargets; video: #alpha-video;" material="shader: chromakey; src: #alpha-video; color: 0.1 0.9 0.2" geometry="primitive: plane; height: 0.6; width: 1.38;">
</a-entity>
</a-scene>
<script>
</script>
</body>
</html>
Please try this might help you for multi AR marker
<a-scene
xrextras-almost-there
xrextras-loading
xrextras-runtime-error
config-targets=
"targets: macaw, owl, peacock, pelican, pigeon, puffin, cardinal, toucan, blue-jay, rooster"
xrweb="disableWorldTracking: true">
I'm using 2 custom patterns and trying to make AR.js recognize them. both of the markers are 6x6 barcodes that I've made into pattern using AR.js Marker Training, and put the downloaded pattens into the folder (as 500.patt and 600.patt). The result is both markers identified when I show it a single marker as showed in picture.
In addition, I would like to get a reaction when a marker is recognized (that's why the console prints are there), but although both markers' shapes are drawn, there are no prints in the console.
My code:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ar.js</title>
</head>
<!-- include A-Frame obviously -->
<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="patternRatio: 0.90">
<!-- create your content here. just a box for now -->
<!-- define a camera which will move according to the marker position -->
<a-marker-camera type='pattern' url='500.patt'>
<a-box position='0 0.5 0' material='opacity: 0.5; color: red;'></a-box>
console.log(500);
</a-marker-camera>
<a-marker-camera type='pattern' url='600.patt'>
<a-sphere position='0 0.5 0' material='opacity: 0.5; color: blue;'></a-sphere>
console.log(600);
</a-marker-camera>
</a-scene>
</body>
</html>`
Outcome:
How do I make the pattern recognition show only one item and print the correct pattern recognized?
Thanks
How to log something to the console when a marker is recognized:
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
marker.addEventListener('markerFound', function() {
var markerId = marker.id;
console.log('! markerFound', markerId);
// do additional things you want to do
});
marker.addEventListener('markerLost', function() {
var markerId = marker.id;
console.log('! markerLost', markerId);
// do additional things you want to do
});
}
});
Then add the registerevents component to your marker:
<a-marker id="marker" preset='hiro' registerevents>
That should do it.