JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Box demo with Three.js</h1>
<p>On Chrome on Android, tap the screen to start playing video stream.</p>
<p>Show <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a> to camera to display a box on top of it. Tap the box to open it.


  <p>&larr; <a href="index.html">Back to examples</a></p>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="https://rawgit.com/Kaiido/jsartoolkit5/master/examples/js/third_party/three.js/three.min.js"></script>
  <script src="https://cdn.rawgit.com/Kaiido/jsartoolkit5/2b092219/build/artoolkit.min.js"></script>
  <script src="https://rawgit.com/Kaiido/jsartoolkit5/master/js/artoolkit.three.js"></script>

JavaScript

var findObjectUnderEvent = function(ev, camera, objects) {

  var style = getComputedStyle(ev.target);
  var elementTransform = style.getPropertyValue('transform');
  var elementTransformOrigin = style.getPropertyValue('transform-origin');

  var xyz = elementTransformOrigin.replace(/px/g, '').split(" ");
  xyz[0] = parseFloat(xyz[0]);
  xyz[1] = parseFloat(xyz[1]);
  xyz[2] = parseFloat(xyz[2] || 0);

  var mat = new THREE.Matrix4();
  mat.identity();
  if (/^matrix\(/.test(elementTransform)) {
    var elems = elementTransform.replace(/^matrix\(|\)$/g, '').split(' ');
    mat.elements[0] = parseFloat(elems[0]);
    mat.elements[1] = parseFloat(elems[1]);
    mat.elements[4] = parseFloat(elems[2]);
    mat.elements[5] = parseFloat(elems[3]);
    mat.elements[12] = parseFloat(elems[4]);
    mat.elements[13] = parseFloat(elems[5]);
  } else if (/^matrix3d\(/i.test(elementTransform)) {
    var elems = elementTransform.replace(/^matrix3d\(|\)$/ig, '').split(' ');
    for (var i = 0; i < 16; i++) {
      mat.elements[i] = parseFloat(elems[i]);
    }
  }

  var mat2 = new THREE.Matrix4();
  mat2.makeTranslation(xyz[0], xyz[1], xyz[2]);
  mat2.multiply(mat);
  mat.makeTranslation(-xyz[0], -xyz[1], -xyz[2]);
  mat2.multiply(mat);

  var vec = new THREE.Vector3(ev.layerX, ev.layerY, 0);
  vec.applyMatrix4(mat2);

  var width = parseFloat(style.getPropertyValue('width'));
  var height = parseFloat(style.getPropertyValue('height'));

  var mouse3D = new THREE.Vector3(
    (vec.x / width) * 2 - 1, -(vec.y / height) * 2 + 1,
    0.5
  );
  mouse3D.unproject(camera);
  mouse3D.sub(camera.position);
  mouse3D.normalize();
  var raycaster = new THREE.Raycaster(camera.position, mouse3D);
  var intersects = raycaster.intersectObjects(objects);
  if (intersects.length > 0) {
    var obj = intersects[0].object
    return obj;
  }
};


var createBox = function() {
  // The AR scene.
  //
  // The box object is going to be placed on top of the marker in the video.
  // I'm adding it...