Establishing a system for utilizing barcode multimarkers in AR.js

Currently, I am attempting to configure AR.js for multimarkers, as illustrated in this image: barcode markers on wall. The plan is to display a single video within the area encompassed by the markers.

Despite my efforts to set up the multimarker player and learner, I am facing confusion. Many of the .js files mentioned in the instructions are no longer available on the AR.js GitHub. Moreover, I am unsure how to instruct them to recognize these specific markers.

Would you be willing to offer some assistance on this matter?

Thank you for your help!

Answer №1

Check out this multifunction marker configuration generator.
If you input <type, value/path> pairs, like:

https://i.sstatic.net/1Ilj0.png

You can then use the generated configuration to create a marker area.

The provided configuration creates an area with a "0" barcode and "hiro" marker - even if the barcode or marker is obstructed, the model remains visible (crafted by Willy Decarpentrie).

https://i.sstatic.net/ScDKu.gif


Do It Yourself (DIY)

The setup process for ar.js with multimarkers is the same for patterns and barcodes.

You must:

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

  2. Retrieve the configuration string using the THREEx.ArMultiMakersLearning's .toJSON() function.

  3. Save the file to the ARjsMultiMarkerFile localStorage item.

  4. Designate the marker type as area on your website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I incorporate an external template in Mustache.js?

Welcome, I am a beginner in using Mustache.js. Below is the template and JS code that I have: var template = $('#pageTpl').html(); var html = Mustache.to_html(template, data); $('#sampleArea').html(html); Here is the template ...

Exploring how to compare time in hh:mm format using JavaScript

After switching to 24-hour format for my strings, I'm confused as to why the times are not comparing correctly. What am I doing incorrectly? function convertToTwentyFourHourTime(amPmString) { var d = new Date("1/1/2013 " + amPmString); ...

What is preventing me from passing a JSON array as data in a GET request using jQuery Ajax?

When sending a get request like the one below: $.ajax({ url: 'http://localhost:8000/api/points/', contentType:"application/json", dataType: "json", data: JSON.stringify({"content_type":content_type,"object_id":object_id}), t ...

What is this error: "Unknown authentication strategy 'loca'"?

Whenever I try to utilize passport.js, it keeps throwing the following error: Unknown authentication strategy "local"! config/configuration.js var passport = require('passport') , LocalStrategy = require('passport-local').Strategy; ...

Display title upon hovering over image linked to mysql with php

Is there a way to display the image title when hovering over images connected to MySQL using PHP? Below is the code I have been using: <div class="galleryko"> <?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?> <div clas ...

Implementing html5mode in Express.js and Angular.js for cleaner URLs

I've been working on resolving the issue of avoiding # in my Angular app with an ExpressJS server-side setup. I found a solution to enable html5mode and it worked well. However, whenever there is another 'get' request to fetch data from a di ...

Exploring VueJS reactivity: Updating an array with new data

I am struggling to understand why certain methods of changing data seem to work while others do not. In an attempt to clarify, I experimented with the following example: watch: { '$store.state.linedata': function() {this.redraw()} } ...

Using the power of jQuery to load Ajax content, unfortunately, the content remains

Hey there, I'm currently working with an HTML file that utilizes AJAX to load content from other HTML files on the same server. However, for some reason, it's not functioning properly. I'm new to AJAX and I'm not sure what could be caus ...

An error has occurred: Expected a string as the element type in React when attempting to update the state

I encountered an issue while trying to update the state after fetching data. Error: Element type is invalid - expected a string (for built-in components) or a class/function (for composite components), but received: undefined. This could be due to forgett ...

Node.js suffering from 'empty post method' issue

I am encountering an issue while retrieving values from certain fields in an index HTML. The post method is returning empty values, with { } being returned instead of the expected email, nick, name, and pass values. Here is my server.js code: var mongoos ...

Unable to retrieve data from PHP using AJAX request

My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...

Thumbnail Carousel Caption in Bootstrap 3

Is it possible to create a Bootstrap 3 carousel where the image changes when the mouse cursor hovers over the thumbnail under the carousel? Currently, I have a setup with the carousel and thumbnails below it. Typically in Bootstrap, the image changes autom ...

Having trouble getting the CSS class to work in MVC4 with jQuery implementation

I recently created a view page where I implemented some jQuery code: <script type="text/javascript"> $(document).ready(function () { var hdrname = $('#headername').text(); alert(hdrname); if (hdrname == "Pending Assignment") { ...

Access the value of a submitted form using jQuery, when there are multiple forms with identical class names

I've looked for a solution here but couldn't find one that meets my needs. I have multiple forms with the class name .sbt-form: <form class='sbt-form'> <input name='kord' val=1/> </form> <form class= ...

Puppeteer exhibiting unexpected behavior compared to the Developer Console

My goal is to extract the title of the page using Puppeteer from the following URL: Here's the code snippet I am working with: (async () => { const browser = await puppet.launch({ headless: true }); const page = a ...

Interactive sidebar scrolling feature linked with the main content area

I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...

Incorporate JavaScript code into an Angular UI-Router view

I can't seem to find an answer to this question anywhere, so I'm hoping someone here can help me out. In my AngularJS app, I am using ui-router to load multiple views into the same <ui-view> element. I am trying to implement Jquery UI&apos ...

What is the purpose of encasing the routes within the <Switch> element in react-router, when they seem to function perfectly fine without it

Currently utilizing react-router-dom version 5.2.0. As a practice, I typically enclose all my Route components within a Switch component. For instance: const MyRoutes = () => ( <Switch> <Route path='/route1' exact ...

Issue with activation of onClick event in case/switch statement

Currently working on a JavaScript project to recreate the Fallout terminal game, with one of the main aspects being comparing words selected by the user to those chosen by the computer. The concept of this hacking game is reminiscent of the board game Mas ...

Concealing option value based on ng-if conditions in AngularJS: A guide

I am designing an Input form with two input fields that need to be compared and values displayed if a certain condition is met. The input fields are: <td class="td_label"><label>Client Age :</label></td> <td class="td_input"> ...