Hey @AhUhmm,
A simple solution is making a component which reparents your content based on the attribute you provide it. Here’s an example:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("reparent", {
schema: {
entity: { type: "string", default: "group1" }
},
init: function () {
const group = document.getElementById(this.data.entity);
group.object3D.add(this.el.object3D);
},
update: function () {
const group = document.getElementById(this.data.entity);
group.object3D.add(this.el.object3D);
}
});
</script>
</head>
<body>
<a-scene>
<a-sphere
reparent="entity: group1"
radius="0.5"
position="0.0 0 -5"
id="myContent"
color="#ff0000"
></a-sphere>
<a-entity position="0.7 0 0" id="group0"> </a-entity>
<a-entity position="-0.7 0 0" id="group1"> </a-entity>
</a-scene>
<script>
let activeGroup = 0;
setInterval(() => {
const group = `group${++activeGroup % 2}`
document.getElementById("myContent").setAttribute("reparent", `entity: ${group}`);
}, 500);
</script>
</body>
</html>
The content should jump between the two groups every 500ms. The same can be applied to the tracker entities
You shouldn’t need to use two cameras, one should work fine. Just remember to disable the tracker that’s inactive. Here’s an example:
<a-entity zappar-image="target: #target-file; enabled: false" id="anchor">
</a-entity>
Hope this helps!