<script>
  AFRAME.registerComponent("gui", {
    schema: {
      name: { type: "string" },
      properties: { type: "array" },
      position: { type: "vec3" },
      inheritPosition: { default: false }
    },
    init: function() {
      // setup mouse interaction
      var that = this;
      this.el.sceneEl.addEventListener("render-target-loaded", function() {
        const scene = that.el.sceneEl.object3D;
        const { camera, renderer } = that.el.sceneEl;
  
        dat.GUIVR.enableMouse(camera, renderer);
      });
  
      var scene = this.el.sceneEl.object3D;
      var gui = dat.GUIVR.create(this.data.name);
      //console.log("pos:", this.el.object3D.position.clone());
      var guiPos = new THREE.Vector3(0, 0, 0);
      if (this.data.position) {
        ["x", "y", "z"].forEach(function(axis) {
          guiPos[axis] = this[axis];
        }, this.data.position);
      }
      if (this.data.inheritPosition) {
        ["x", "y", "z"].forEach(function(axis) {
          guiPos[axis] += this[axis];
        }, this.el.object3D.position);
      }
      gui.position.set(guiPos.x, guiPos.y, guiPos.z);
  
      //console.log("data:", this.data.properties);
      var thisObject = this.el.object3D;
      this.data.properties.forEach(function(prop) {
        prop = prop.split(".");
        console.log("len", prop.length);
        var min = 0;
        var max = 10;
        if (prop.length == 1) {
          gui.add(thisObject[prop[0]], min, max);
        } else {
          var propController = gui.add(thisObject[prop[0]], prop[1], min, max);
          propController.name(prop[0] + "." + prop[1]);
        }
      });
      gui.name = this.data.name + "GUI";
      scene.add(gui);
    }
  });
</script>


<a-scene antialias="true">

  <a-entity camera="userHeight: 1.6" look-controls wasd-controls></a-entity>
  <a-datgui name="settings" position="0 2 -1">
    <a-gui-slider id="scaleControl" name="scale"></a-gui-slider>
  </a-datgui>

  <a-sphere position="-5 1.25 -5" radius="1.25" color="#EF2D5E" gui="name: Pink Sphere; properties: position.x, scale.y, scale.x, scale; inheritPosition: true; position: 3.5 1 4;"></a-sphere>
  <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#DAD" event-set__enter="_event: mouseenter; color: #8FF7FF" event-set__leave="_event: mouseleave; color: #DAD;"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
</a-scene>