Display entities permanently with Marker as trigger

[MalteJosten]

Do you want to request a feature or report a bug?

What is the current behavior? I'm scanning a barcode marker and an entity gets displayed. The entity disappears as soon as the marker isn't detected anymore.

If the current behavior is a bug, please provide the steps to reproduce.

Please mention other relevant information such as the browser version, Operating System and Device Name

What is the expected behavior? Is there a way that the an entity gets continouesly displayed, eventhough the marker isn't detected anymore (i.e. the marker is used as a trigger to permanently display an entity)?

If this is a feature request, what is motivation or use case for changing the behavior?

[kalwalt]

AR.js depends by Three.js under the hood, so if you have an obj, just do:

// if you want that your obj will be visible:
obj.visible = true;
// to not display it:
obj.visible = false;

[nicolocarpignoli]

It may be done but needed custom behaviour on three.js side (you can't reach that only with a-frame). Probably you won't need to change AR.js core.

[MalteJosten]

I've tried using @kalwalt answer and it displays the entity after scanning the marker. Unfortunately it only gets displayed as long as the marker is in the camera's fov. I switched from using <a-marker> and <a-entity camera> to <a-marker-camera> to make it easier, but at this point the entity doesn't get displayed at all. HTML-Code:

<a-entity id="box"
          geometry="primitive: box; width: 1; height: 1"
          material ="color: blue; opacity: 0.75"
          position="0 0 0"
          visible="false">
</a-entity>

<a-marker-camera barcode_marker
                 id="marker"
                 type="barcode"
                 value="1">
</a-marker-camera>

and JavaScript:

AFRAME.registerComponent('barcode_marker', {
    init: function () {
        const marker = document.querySelector('#marker');
        marker.addEventListener('markerFound', function () {
            if (!markerAlreadyDetected) {
                markerAlreadyDetected = true;
                displayEntity("#box");
                console.log("New marker has been detected.");
            } else {
                console.log("Already detected marker.");
            }
        });
    }
});

function displayEntity(e_id) {
    const el = document.querySelector(e_id);
    el.object3D.visible = true;
}

The marker seems to get detected and the visibility of the entity changes from 'false' to 'true', but it somehow doesn't get displayed.

[evercloud]

@MalteJosten any luck with this? I want to implement the same behaviour. Thanks :)

[MalteJosten]

I didn't try it. Just switched to another plattform/framework tbh :)

[meizano]

Manage to do this. The tricks is to use AFRAME.registerComponent to transform every tick, and change entity using the underlaying threejs object manipulation for performance. Create move attribute to assign to entity: <script> AFRAME.registerComponent("move", { tick: function() { let obj3d = this.el.sceneEl.querySelector("a-marker"); this.el.object3D.setRotationFromQuaternion(obj3d.object3D.quaternion); this.el.object3D.position.set(obj3d.object3D.position.x, obj3d.object3D.position.y, obj3d.object3D.position.z); } }); </script> Separate a-marker and the entity we want to manipute. `

    <!-- handle hiro marker -->
    <a-marker preset="hiro"></a-marker>

    <a-box move color="red" material="opacity: 0.5; color: red;"></a-box>

    <!-- add a simple camera -->
    <a-entity camera></a-entity>

</a-scene>`

You can see the result here Full source code here

[vadermemo]

Manage to do this. The tricks is to use AFRAME.registerComponent to transform every tick, and change entity using the underlaying threejs object manipulation for performance. Create move attribute to assign to entity: <script> AFRAME.registerComponent("move", { tick: function() { let obj3d = this.el.sceneEl.querySelector("a-marker"); this.el.object3D.setRotationFromQuaternion(obj3d.object3D.quaternion); this.el.object3D.position.set(obj3d.object3D.position.x, obj3d.object3D.position.y, obj3d.object3D.position.z); } }); </script> Separate a-marker and the entity we want to manipute. `

    <!-- handle hiro marker -->
    <a-marker preset="hiro"></a-marker>

    <a-box move color="red" material="opacity: 0.5; color: red;"></a-box>

    <!-- add a simple camera -->
    <a-entity camera></a-entity>

</a-scene>`

You can see the result here Full source code here

Bro, these links does not works. The object is invisible when the market is out (Tested on iphone 11, OS :13.7)

[Markkop]

Manage to do this. The tricks is to use AFRAME.registerComponent to transform every tick, and change entity using the underlaying threejs object manipulation for performance. Create move attribute to assign to entity: <script> AFRAME.registerComponent("move", { tick: function() { let obj3d = this.el.sceneEl.querySelector("a-marker"); this.el.object3D.setRotationFromQuaternion(obj3d.object3D.quaternion); this.el.object3D.position.set(obj3d.object3D.position.x, obj3d.object3D.position.y, obj3d.object3D.position.z); } }); </script> Separate a-marker and the entity we want to manipute. `

    <!-- handle hiro marker -->
    <a-marker preset="hiro"></a-marker>

    <a-box move color="red" material="opacity: 0.5; color: red;"></a-box>

    <!-- add a simple camera -->
    <a-entity camera></a-entity>

</a-scene>`

You can see the result here Full source code here

It worked for me, however it was not exactly what I was looking for. I was expecting to save the object world position and being able to keep the AR experience (not sure if it's asking too much). Does anyone have any idea on how doing this?

[AdamVI2]

Has anyone had any success with that? This is a really great feature that would enhance ar.js dramatically.

[neostim]

Just another person adding agreement, haven't found a way to do it yet :)

[Elle-C]

I also agree - I managed to do it using 8th wall with their image targets but don't know how it was working under the hood - also it was very sluggish to render there