straightforward way to handle cubes with 6 markers?

[labriata]

Hello! Being amazed with this tool, I'm writing to suggest a new feature.

In my AR applications I'm handling the markers in my/users' hands, and it would be awesome to have cube-shaped markers with 6 different faces all linked to the same object so as to have smooth rotations on all axis, not only on the plane of the screen.

I could have six 2D barcodes associated to different rotation states of my 3D objects, but that would make downstream processes very inefficient.

I guess something like what I ask for is available in artoolkit5, because they have this:

https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Cubes/cube00-05-a4.pdf

Maybe that gives you some clue on how to implement the cube marker? Ideally from the developer point of view, the easiest would be to have it as a new kind of .. I guess

I hope it will be if your interest! Thanks

[labriata]

Sorry, I just saw this page of yours on the topic: https://github.com/jeromeetienne/AR.js/issues/84 But the links don't work. Also, I'm not sure whether this can be used directly as HTML with a-frame?

[stemkoski]

@labriata There is an example of a cube of AR markers at: https://github.com/stemkoski/AR-Examples/blob/master/magic-cube.html which uses the markers arranged in the pattern: https://github.com/stemkoski/AR-Examples/blob/master/markers/cube.png Yyou can print the pattern on paper, cut it out, and fold it into a cube shape). Also, a video of this example is available at: https://www.youtube.com/watch?v=ZI6oJJFgACM Hope this helps!

[labriata]

Thank you @stemkoski , your example worked wonderfully. I will build on it !

[labriata]

Sorry @stemkoski but now I cannot figure out how to flip the video output (I'm using and want this on a laptop). Can you help please? You have the example at https://lucianoabriata.altervista.org/jsinscience/arjs/jsartoolkit5/pdbloader2.html Thanks again!

[labriata]

Sorry, that was very simple to solve. For the record:

canvas { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }

video { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }