Search code examples
javascriptthree.jsaugmented-realityaframear.js

Setting up barcode multimarkers // AR.js

I'm trying to set up AR.js for multimarkers as seen in the picture: barcode markers on wall The idea is to play one video in the space between the markers.

However, I'm confused as to how this can be done. I've tried to set up the multimarker player and learner, but many of the .js files they refer to are no longer found at the AR.js github. And I don't know how to tell them to look for these particular markers.

Would you be kind enough to guide me?

Thank you so much!

Solution

  • Try out this multimarker config generator.
    If You fill the inputs with <type, value/path> pairs, for example:

    enter image description here

    You should be able to use the generated config for creating as a marker area.

    The above config creates an area consisting of a "0" barcode and "hiro" marker - If the barcode or marker is covered, the model still stays visible ( drone by Willy Decarpentrie).

    enter image description here

    DIY

    Setting up ar.js for multimarkers works the same for patterns and barcodes.

    You need to

    1. Provide an array of {type, path/value} pairs to a THREEx.ArMultiMakersLearning object. This is done in the learner example.

    2. Grab the config string using the THREEx.ArMultiMakersLearnings .toJSON() function.

    3. Save the file at the ARjsMultiMarkerFile localStorage item.

    4. Set the marker type to area at your website.