Newer
Older
reroad-test / 2020-ryusei / aframe-master / examples / showcase / link-traversal / js / components / aframe-tooltip-component.js
@ryusei ryusei on 22 Oct 2020 10 KB パノラマ表示
/*eslint-disable */
/******/ (function(modules) { // webpackBootstrap
/******/  // The module cache
/******/  var installedModules = {};

/******/  // The require function
/******/  function __webpack_require__(moduleId) {

/******/    // Check if module is in cache
/******/    if(installedModules[moduleId])
/******/      return installedModules[moduleId].exports;

/******/    // Create a new module (and put it into the cache)
/******/    var module = installedModules[moduleId] = {
/******/      exports: {},
/******/      id: moduleId,
/******/      loaded: false
/******/    };

/******/    // Execute the module function
/******/    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/    // Flag the module as loaded
/******/    module.loaded = true;

/******/    // Return the exports of the module
/******/    return module.exports;
/******/  }


/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = modules;

/******/  // expose the module cache
/******/  __webpack_require__.c = installedModules;

/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";

/******/  // Load entry module and return exports
/******/  return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

  /* global AFRAME */
  __webpack_require__(1);

  if (typeof AFRAME === 'undefined') {
    throw new Error('Component attempted to register before AFRAME was available.');
  }

  /**
   * Tooltip component for A-Frame.
   */
  AFRAME.registerComponent('tooltip', {
    schema: {
      text: {default: ''},
      end: {type: 'vec3'},
      src: {default: ''},
      rotation: {type: 'vec3'},
      width: {default: 1, min: 0},
      height: {default: 1, min: 0},
      lineColor: {default: '#fff', type: 'color'},
      lineHorizontalAlign: {default: 'left', oneOf: ['left', 'right', 'center']},
      lineVerticalAlign: {default: 'center', oneOf: ['top', 'bottom', 'center']},
      opacity: {default: 1, min: 0, max: 1},
  /*
      targetType: {default: 'element', oneOf: ['element', 'position']},
      targetElement: {type: 'selector', if: {targetType: ['element']}},
  */
      targetPosition: {type: 'vec3', if: {targetType: ['position']}}
    },

    /**
     * Called once when component is attached. Generally for initial setup.
     */
    init: function () {
      var el = this.el;
      var data = this.data;

      var quad = this.quad = document.createElement('a-entity');
      var self = this;

      quad.setAttribute('rotation', data.rotation);
      quad.setAttribute('text', {width: .25, color: '#fff', value: data.text, align: 'center'});
      el.appendChild(quad);

      // Line
      var material = this.material = new THREE.LineBasicMaterial({color: data.lineColor, opacity: data.opacity, transparent: data.opacity < 1});
      var geometry = this.geometry = new THREE.BufferGeometry();
      geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));

      this.line = new THREE.Line(geometry, material);
      this.el.setObject3D('tooltip-line', this.line);

    },

    /**
     * Called when component is attached and when component data changes.
     * Generally modifies the entity based on the data.
     */

     updateTooltip: (function () {
       var parentPosition = new THREE.Vector3();
       var targetPosition = new THREE.Vector3();
       var startPosition = new THREE.Vector3();

       return function () {
         var data = this.data;
         parentPosition.copy(this.el.getAttribute('position'));
         targetPosition.copy(data.targetPosition);

         var endPosition = targetPosition.sub(parentPosition);

         var data = this.data;
         var valign = {top: data.height / 2, bottom: -data.height / 2, center: 0};
         var halign = {left: -data.width / 2, right: data.width / 2, center: 0};

         var y = valign[data.lineVerticalAlign];
         var x = halign[data.lineHorizontalAlign];

         // Update geometry
         this.quad.object3D.updateMatrix();
         startPosition.set(x, y, 0);
         startPosition.applyMatrix4(this.quad.object3D.matrix);

         var pos = this.geometry.attributes.position.array;
         pos[0] = startPosition.x;
         pos[1] = startPosition.y;
         pos[2] = startPosition.z;
         pos[3] = endPosition.x;
         pos[4] = endPosition.y;
         pos[5] = endPosition.z;
         this.geometry.attributes.position.needsUpdate = true;

         this.material.opacity = data.opacity;
         this.material.transparent = data.opacity < 1;
         this.material.color.setStyle(data.color);
       }
     })(),

     update: function () {
       this.updateTooltip();
     }
   });


/***/ }),
/* 1 */
/***/ (function(module, exports) {

  /* global AFRAME */

  if (typeof AFRAME === 'undefined') {
    throw new Error('Component attempted to register before AFRAME was available.');
  }

  /**
   * Slice9 component for A-Frame.
   */
  AFRAME.registerComponent('slice9', {
    schema: {
      width: {default: 1, min: 0},
      height: {default: 1, min: 0},
      left: {default: 0, min: 0},
      right: {default: 0, min: 0},
      bottom: {default: 0, min: 0},
      top: {default: 0, min: 0},
      side: {default: 'front', oneOf: ['front', 'back', 'double']},
      padding: {default: 0.1, min: 0.01},
      color: {type: 'color', default: '#fff'},
      opacity: {default: 1.0, min: 0, max: 1},
      transparent: {default: true},
      debug: {default: false},
      src: {type: 'map'}
    },

    /**
     * Set if component needs multiple instancing.
     */
    multiple: false,

    /**
     * Called once when component is attached. Generally for initial setup.
     */
    init: function () {
      var data = this.data;
      var material = this.material = new THREE.MeshBasicMaterial({color: data.color, opacity: data.opacity, transparent: data.transparent, wireframe: data.debug});
      var geometry = this.geometry = new THREE.PlaneBufferGeometry(data.width, data.height, 3, 3);

      var textureLoader = new THREE.TextureLoader();
      this.plane = new THREE.Mesh(geometry, material);
      this.el.setObject3D('mesh', this.plane);
      this.textureSrc = null;
    },

    updateMap: function () {
      var src = this.data.src;

      if (src) {
        if (src === this.textureSrc) { return; }
        // Texture added or changed.
        this.textureSrc = src;
        this.el.sceneEl.systems.material.loadTexture(src, {src: src}, setMap.bind(this));
        return;
      }

      // Texture removed.
      if (!this.material.map) { return; }
      setMap(null);


      function setMap (texture) {
        this.material.map = texture;
        this.material.needsUpdate = true;
        this.regenerateMesh();
      }
    },

    regenerateMesh: function () {
      var data = this.data;
      var pos = this.geometry.attributes.position.array;
      var uvs = this.geometry.attributes.uv.array;
      var image = this.material.map.image;

      if (!image) {return;}

      /*
        0--1------------------------------2--3
        |  |                              |  |
        4--5------------------------------6--7
        |  |                              |  |
        |  |                              |  |
        |  |                              |  |
        8--9-----------------------------10--11
        |  |                              |  |
        12-13----------------------------14--15
      */
      function setPos(id, x, y) {
        pos[3 * id] = x;
        pos[3 * id + 1] = y;
      }

      function setUV(id, u, v) {
        uvs[2 * id] = u;
        uvs[2 * id + 1] = v;
      }

      // Update UVS
      var uv = {
        left: data.left / image.width,
        right: data.right / image.width,
        top: data.top / image.height,
        bottom: data.bottom / image.height
      };

      setUV(1,  uv.left,  1);
      setUV(2,  uv.right, 1);

      setUV(4,  0,        uv.bottom);
      setUV(5,  uv.left,  uv.bottom);
      setUV(6,  uv.right, uv.bottom);
      setUV(7,  1,        uv.bottom);

      setUV(8,  0,        uv.top);
      setUV(9,  uv.left,  uv.top);
      setUV(10, uv.right, uv.top);
      setUV(11, 1,        uv.top);

      setUV(13, uv.left,  0);
      setUV(14, uv.right, 0);

      // Update vertex positions
      var w2 = data.width / 2;
      var h2 = data.height / 2;
      var left = -w2 + data.padding;
      var right = w2 - data.padding;
      var top = h2 - data.padding;
      var bottom = -h2 + data.padding;

      setPos(0, -w2,    h2);
      setPos(1, left,   h2);
      setPos(2, right,  h2);
      setPos(3, w2,     h2);

      setPos(4, -w2,    top);
      setPos(5, left,   top);
      setPos(6, right,  top);
      setPos(7, w2,     top);

      setPos(8, -w2,    bottom);
      setPos(9, left,   bottom);
      setPos(10, right, bottom);
      setPos(11, w2,    bottom);

      setPos(13, left,  -h2);
      setPos(14, right, -h2);
      setPos(12, -w2,   -h2);
      setPos(15, w2,    -h2);

      this.geometry.attributes.position.needsUpdate = true;
      this.geometry.attributes.uv.needsUpdate = true;
    },

    /**
     * Called when component is attached and when component data changes.
     * Generally modifies the entity based on the data.
     */
     update: function (oldData) {
       var data = this.data;

       this.material.color.setStyle(data.color);
       this.material.opacity = data.opacity;
       this.material.transparent = data.transparent;
       this.material.wireframe = data.debug;
       this.material.side = parseSide(data.side);

       var diff = AFRAME.utils.diff(data, oldData);
       if ('src' in diff) {
         this.updateMap();
       }
       else if ('width' in diff || 'height' in diff || 'padding' in diff || 'left' in diff || 'top' in diff || 'bottom' in diff || 'right' in diff) {
         this.regenerateMesh();
       }
     },

    /**
     * Called when a component is removed (e.g., via removeAttribute).
     * Generally undoes all modifications to the entity.
     */
    remove: function () { },

    /**
     * Called on each scene tick.
     */
    // tick: function (t) { },

    /**
     * Called when entity pauses.
     * Use to stop or remove any dynamic or background behavior such as events.
     */
    pause: function () { },

    /**
     * Called when entity resumes.
     * Use to continue or add any dynamic or background behavior such as events.
     */
    play: function () { }
  });

  function parseSide (side) {
    switch (side) {
      case 'back': {
        return THREE.BackSide;
      }
      case 'double': {
        return THREE.DoubleSide;
      }
      default: {
        // Including case `front`.
        return THREE.FrontSide;
      }
    }
  }


/***/ })
/******/ ]);
/*eslint-enable */