hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.19k stars 407 forks source link

How to make a .mind on the spot by camera and use it directly #237

Closed langxiankui closed 2 years ago

langxiankui commented 2 years ago

I took a photo, converted it into a DataList, and got the exportedBuffer and blob objects.

const dataList = await compiler.compileImageTargets([img], (progress) => {});
const exportedBuffer = await compiler.exportData();
const blob = new Blob([exportedBuffer]);

image

Then how can I replace the imageTargetSrc attribute inside mindar-image in the a-sence tag?

<a-scene id="example-scene" mindar-image="imageTargetSrc: ./targets2.mind; autoStart: false;"
    vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: true">
    <a-camera id="example-camera" position="0 0 0" look-controls="enabled: false"
        cursor="fuse: false; rayOrigin: mouse;" raycaster="far: ${customFields.libVersion}; objects: .clickable">
    </a-camera>
    <a-entity mindar-image-target="targetIndex: 0">
        <a-plane id="example-plane" class="clickable" color="blue" opacity="0" opaciy="0.5" position="0 0 0"
            height="1" width="1" rotation="0 0 0" zindex="10000"></a-plane>
        <a-plane id="example-plane2" class="clickable" color="red" opaciy="0.5" position="-0.5 0.5 0" height="0.1"
            width="0.1" rotation="0 0 0"></a-plane>
    </a-entity>
</a-scene>

I tried the following methods and modified this attribute, but the .mind modification did not take effect, and the .mind before modification will still prevail.

console.log(document.getElementById('example-scene').getAttribute('mindar-image'));
document.getElementById('example-scene').setAttribute('mindar-image', {
    imageTargetSrc: blob
})
console.log(document.getElementById('example-scene').getAttribute('mindar-image'));

image

hiukim commented 2 years ago

In that case, you have to initialize the a-scene after you generate the .mind file. You might need to go deeper into the aframe lifecycle.

langxiankui commented 2 years ago

In that case, you have to initialize the a-scene after you generate the .mind file. You might need to go deeper into the aframe lifecycle.

Thank you!