JSFiddle - React, Tailwind, and code Playground

by Sangyong Lee

HTML

<script src="https://cdn.rawgit.com/kig/JSARToolKit/master/JSARToolKit.min.js"></script>
<script src="https://cdn.rawgit.com/kig/JSARToolKit/master/demos/magi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<video id="video" width="640" height="480"></video>
<canvas id="test" width="640" height="480"></canvas>
<div id="container" width="640" height="480"></div>
<textarea id="tetete"></textarea>
<button id="eee">
  submit
</button>

CSS

video,
canvas#test {
  display: none;
}

JavaScript

var video, canvas, context;
var pastResults = {};
var currId;

var MARParser = function(node) {
  var doc = document.createElement('html');
  doc.innerHTML = node;

  this.parseNode = $(doc);
  this.textNode = node;

  this.scene = this.parseNode.find('scene');
  this.sensor = this.parseNode.find('sensor');
  this.background = this.parseNode.find('background');

  this.aobject = function() {
    return this.parseNode.find('aobject').map(function(idx, m) {
      return {
        aobject: m,
        aobject_reference: this.parseNode.find($(m).attr('placeholder-for'))
      }
    }.bind(this));
  };
  this.robject = function() {
    return this.parseNode.find('robject').map(function(idx, m) {
      return {
        robject: m,
        robject_reference: this.parseNode.find($(m).attr('placeholder')),
        referenece_transform: this.parseNode.find('Matrix' + this.parseNode.find($(m).attr('placeholder')).attr('transform'))[0]
      }
    }.bind(this));
  };

  this.MAREvent = function() {
    return this.parseNode.find('MAREvent').map(function(idx, m) {
      return {
        event: m,
        event_object: this.parseNode.find('aobject, robject').find($(m).attr('object')),
        event_callback: this.parseNode.find('MARBehavior[id="#' + $(m).attr('id') + '"]')
      }
    }.bind(this));
  };
  this.MARBehavior = function() {
    return this.parseNode.find('MARBehavior').map(function(idx, m) {
      return {
        callback: m,
        callback_handler: this.parseNode.find('MAREvent').find($(m).attr('event')),
        callback_target: this.parseNode.find('aobject, robject').find($(m).attr('object'))
      }
    }.bind(this));
  };
  this.matrix = function() {
    return this.parseNode.find('matrix').map(function(idx, m) {
      return {
        matrix: m
      }
    }.bind(this));
  };
};

// I'm going to use a glMatrix-style matrix as an intermediary.
// So the first step is to create a function to convert a glMatrix matrix into a Three.js...