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>
