{"version":3,"sources":["webpack:///./src/WebGL/AppContent/HeartGrid/HeartGridOrignal.vue?4d52","webpack:///src/WebGL/AppContent/HeartGrid/HeartGridOrignal.vue","webpack:///./src/WebGL/AppContent/HeartGrid/HeartGridOrignal.vue?1ee7","webpack:///./src/WebGL/AppContent/HeartGrid/HeartGridOrignal.vue","webpack:///./src/WebGL/AppContent/HeartGrid/matcap/pink-2.jpg","webpack:///./src/WebGL/AppContent/HeartGrid/matcap/yellow.jpg","webpack:///./src/WebGL/AppContent/HeartGrid/matcap/silver.png","webpack:///./src/WebGL/AppContent/HeartGrid/matcap/red-2.jpg","webpack:///./src/WebGL/AppContent/HeartGrid/fbx/heart.fbx"],"names":["render","_vm","this","_h","$createElement","_c","_self","_t","staticRenderFns","name","mixins","props","components","data","hit","open","beforeDestroy","component","module","exports"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACJ,EAAIM,GAAG,YAAY,IACzHC,EAAkB,G,gHCiBtB,GACEC,KAAM,oBACNC,OAAQ,CAAC,EAAX,MACEC,MAAO,GAEPC,WAAY,OAAd,OAAc,CAAd,GACA,WAEEC,KARF,WASI,MAAO,CACLC,KAAK,EACLC,MAAM,IAGV,QAdF,WAcA,uNACA,qBACA,wBAFA,SAIA,yBACA,iBAEA,sCACA,6BACA,uBACA,WAVA,cAIA,EAJA,gBAcA,yBACA,6BAEA,8BACA,sFACA,WAnBA,OAsFA,IAxEA,EAdA,OAuBA,GACA,8BACA,iCACA,gCACA,gCAGA,gBACA,yCACA,GAEA,aACA,aACA,aACA,aACA,aAEA,6CACA,6DACA,gDAEA,8DACA,4CAGA,qBACA,oKACA,uCACA,4BACA,6BACA,iBACA,kBACA,kBACA,kBAPA,4CAUA,KACA,uJACA,yBACA,8BACA,yFAEA,8BACA,0FAEA,8BACA,4FATA,4CAaA,KACA,KACA,MAEA,IAEA,IACA,UACA,UACA,UACA,KACA,oBACA,aACA,YACA,gBACA,gBACA,OACA,GAGA,SACA,4BACA,UACA,SACA,UACA,UACA,IACA,IACA,KACA,KACA,MACA,QACA,OACA,UAEA,iBACA,IAKA,KACA,KACA,KAEA,cACA,kDAEA,iCACA,mCAGA,8DACA,mBACA,KACA,eACA,cAEA,8DACA,mBACA,cACA,kBAEA,cAEA,6DACA,OACA,cACA,4DACA,OACA,cAEA,+DACA,KACA,mBACA,cACA,kBAEA,cACA,8DACA,KACA,mBACA,OACA,cAEA,8BACA,OACA,qCAIA,oCACA,oCAEA,sCACA,4BAEA,yBACA,MACA,wBAEA,mBACA,IACA,qBAGA,KAIA,IADA,QACA,YACA,2BACA,WADA,EACA,OADA,EACA,MAEA,iBACA,iBAEA,8BACA,kBACA,iBACA,gBAGA,kBAEA,YACA,aACA,aACA,aACA,WACA,qBAEA,SACA,WACA,SACA,oBAGA,aACA,aACA,aACA,QACA,iBAEA,qBAIA,iBAEA,QA/NA,+CAoOEC,cAlPF,cClBwX,I,YCOpXC,EAAY,eACd,EACAjB,EACAQ,GACA,EACA,KACA,KACA,MAIa,aAAAS,E,gCClBfC,EAAOC,QAAU,IAA0B,2B,qBCA3CD,EAAOC,QAAU,IAA0B,2B,qBCA3CD,EAAOC,QAAU,IAA0B,2B,qBCA3CD,EAAOC,QAAU,IAA0B,0B,kCCA3C,OAAe,iBAA0B","file":"js/chunk-16606ace.35b4df43.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t(\"default\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <slot></slot>\n  </div>\n</template>\n\n<script>\nimport { Tree, getScreen } from '../../Reusable'\nimport { Mesh, Object3D, MeshMatcapMaterial, TextureLoader, Vector2, Raycaster, Color, IcosahedronBufferGeometry } from 'three'\n\nimport { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'\n\n// import { Refractor } from 'three/examples/jsm/objects/Refractor'\n// import { FastBlurShader } from './FastBlurShader'\n\n// eslint-disable-next-line\nlet Cache = {}\n\nexport default {\n  name: 'StarKindnessWords',\n  mixins: [Tree],\n  props: {\n  },\n  components: {\n    ...require('../../webgl')\n  },\n  data () {\n    return {\n      hit: false,\n      open: false\n    }\n  },\n  async mounted () {\n    var raycaster = new Raycaster()\n    var mouse = new Vector2(1, 1)\n\n    let heartGeo = await new Promise((resolve) => {\n      let loader = new FBXLoader()\n      // eslint-disable-next-line\n      loader.load(require('file-loader!./fbx/heart.fbx').default, (obj) => {\n        let geo = obj.children[0].geometry\n        geo.rotateX(Math.PI * -0.5)\n        resolve(geo)\n      })\n    })\n\n    let cursorMatcap = await new Promise((resolve) => {\n      let loader = new TextureLoader()\n      // eslint-disable-next-line\n      loader.load(require('./matcap/silver.png'), (obj) => {\n        let matcap = new MeshMatcapMaterial({ transparent: true, opacity: 1.0, color: 0xffffff, matcap: obj })\n        resolve(matcap)\n      })\n    })\n\n    let colors = {\n      red: new Color('#ff0000'),\n      yellow: new Color('#ffff00'),\n      white: new Color('#ffffff'),\n      gray: new Color('#bababa')\n    }\n\n    let cursorMesh = new Mesh(\n      new IcosahedronBufferGeometry(0.6, 0),\n      cursorMatcap\n    )\n    cursorMesh.visible = false\n    cursorMesh.scale.x = 0.4\n    cursorMesh.scale.y = 0.4\n    cursorMesh.scale.z = 0.4\n    this.o3d.add(cursorMesh)\n\n    document.documentElement.style.cursor = 'none'\n    this.lookup('element').addEventListener('mouseover', () => {\n      document.documentElement.style.cursor = 'none'\n    })\n    this.lookup('element').addEventListener('mouseleave', () => {\n      document.documentElement.style.cursor = ''\n    })\n\n    let camera = this.lookup('camera')\n    this.lookup('base').onLoop(async () => {\n      let screen = getScreen({ camera, depth: 390 })\n      cursorMesh.position.x = mouse.x * screen.width * 0.5\n      cursorMesh.position.y = mouse.y * screen.height * 0.5\n      cursorMesh.position.z = 390\n      cursorMesh.rotation.x += 0.01\n      cursorMesh.rotation.y += 0.01\n      cursorMesh.rotation.z += 0.01\n    })\n\n    let matcaps = {}\n    setTimeout(async () => {\n      let loader = new TextureLoader()\n      loader.load(require('./matcap/red-2.jpg'), (obj) => {\n        matcaps.red = new MeshMatcapMaterial({ transparent: true, opacity: 1.0, color: 0xffffff, matcap: obj })\n      })\n      loader.load(require('./matcap/pink-2.jpg'), (obj) => {\n        matcaps.pink = new MeshMatcapMaterial({ transparent: true, opacity: 1.0, color: 0xffffff, matcap: obj })\n      })\n      loader.load(require('./matcap/yellow.jpg'), (obj) => {\n        matcaps.yellow = new MeshMatcapMaterial({ transparent: true, opacity: 1.0, color: 0xffffff, matcap: obj })\n      })\n    })\n\n    let cx = 10\n    let cy = 10\n    let total = cx * cy\n\n    let geo = heartGeo\n\n    let idx = 0\n    let mapper = new Map()\n    let offsetX = (cx - 1) / 2\n    let offsetY = (cy - 1) / 2\n    let raycasterList = []\n    let group = new Object3D()\n    this.o3d.add(group)\n    for (let y = 0; y < cy; y++) {\n      for (let x = 0; x < cx; x++) {\n        let mesh = new Mesh(\n          geo,\n          undefined\n        )\n        // mesh.instanceMatrix.setUsage(DynamicDrawUsage)\n        group.add(mesh)\n        let color = new Color('#ffffff')\n        raycasterList.push(mesh)\n        mapper.set(idx, {\n          offsetX,\n          offsetY,\n          x,\n          y,\n          cx,\n          cy,\n          idx,\n          total,\n          mesh,\n          color\n        })\n        console.log(x, y)\n        idx++\n      }\n    }\n    // group.rotation.y = Math.PI\n    // group.rotation.x = Math.PI * 0.5 * -0.85\n    let mouseDown = false\n    let rayhitID = false\n    let hoverID = false\n\n    let onUpdateMouse = (pt) => {\n      let rect = this.lookup('element').getBoundingClientRect()\n\n      mouse.x = ((pt.pageX - rect.left) / rect.width) * 2 - 1\n      mouse.y = -((pt.pageY - rect.top) / rect.height) * 2 + 1\n    }\n\n    this.lookup('element').addEventListener('mousemove', (evt) => {\n      evt.preventDefault()\n      onUpdateMouse(evt)\n      cursorMesh.visible = true\n    }, { passive: false })\n\n    this.lookup('element').addEventListener('touchmove', (evt) => {\n      evt.preventDefault()\n      if (evt.touches[0]) {\n        onUpdateMouse(evt.touches[0])\n      }\n    }, { passive: false })\n\n    this.lookup('element').addEventListener('touchend', (evt) => {\n      mouseDown = false\n    }, { passive: false })\n    this.lookup('element').addEventListener('mouseup', (evt) => {\n      mouseDown = false\n    }, { passive: false })\n\n    this.lookup('element').addEventListener('touchstart', (evt) => {\n      mouseDown = true\n      evt.preventDefault()\n      if (evt.touches[0]) {\n        onUpdateMouse(evt.touches[0])\n      }\n    }, { passive: false })\n    this.lookup('element').addEventListener('mousedown', (evt) => {\n      mouseDown = true\n      evt.preventDefault()\n      onUpdateMouse(evt)\n    }, { passive: false })\n\n    this.$watch('hit', (nv, ov) => {\n      if (nv !== ov) {\n        this.$emit('hit', { index: nv, length: total })\n      }\n    })\n\n    this.lookup('base').onLoop(() => {\n      let time = window.performance.now() * 0.001\n\n      raycaster.setFromCamera(mouse, this.lookup('camera'))\n      let intersection = raycaster.intersectObjects(raycasterList)\n      // document.documentElement.style.cursor = 'none'\n      cursorMesh.material.color = colors.white\n      if (intersection[0]) {\n        cursorMesh.material.color = colors.gray\n        // document.documentElement.style.cursor = 'pointer'\n        hoverID = intersection[0].object.uuid\n        if (mouseDown) {\n          rayhitID = intersection[0].object.uuid\n        }\n      } else {\n        hoverID = false\n      }\n\n      let idx = 0\n      for (let y = 0; y < cy; y++) {\n        for (let x = 0; x < cx; x++) {\n          let { mesh, color } = mapper.get(idx)\n\n          mesh.position.x = offsetX - x\n          mesh.position.y = offsetY - y\n\n          let wavy = Math.sin(time + x * 0.13 + y * 0.13)\n          mesh.position.x *= -50\n          mesh.position.y *= 50\n          mesh.position.z = 40// * wavy\n\n          // lowers platform\n          mesh.position.z -= 150\n\n          if (rayhitID === mesh.uuid) {\n            mesh.scale.x = 30\n            mesh.scale.y = 30\n            mesh.scale.z = 30\n            if (matcaps.yellow) {\n              mesh.material = matcaps.yellow\n            }\n            this.hit = idx\n          } else if (hoverID === mesh.uuid) {\n            if (matcaps.pink) {\n              mesh.material = matcaps.pink\n            }\n          } else {\n            mesh.scale.x = 20\n            mesh.scale.y = 20\n            mesh.scale.z = 20\n            if (matcaps.red) {\n              mesh.material = matcaps.red\n              // color.setHSL(offsetX - x + Math.sin(x * 3.14 * 2.0 + time * 0.5), 0.65, 0.65)\n              mesh.material.color = color\n            }\n          }\n\n          mesh.rotation.y = time + wavy\n          // mesh.rotation.x = Math.PI * 0.5\n          idx++\n        }\n      }\n    })\n  },\n  beforeDestroy () {\n  }\n}\n</script>\n\n<style>\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeartGridOrignal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeartGridOrignal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./HeartGridOrignal.vue?vue&type=template&id=98795ac4&\"\nimport script from \"./HeartGridOrignal.vue?vue&type=script&lang=js&\"\nexport * from \"./HeartGridOrignal.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/pink-2.f3df29ec.jpg\";","module.exports = __webpack_public_path__ + \"img/yellow.ce283a21.jpg\";","module.exports = __webpack_public_path__ + \"img/silver.9f53adb6.png\";","module.exports = __webpack_public_path__ + \"img/red-2.601c7df2.jpg\";","export default __webpack_public_path__ + \"c6091dba5a824a2e655f5c698301bc4c.fbx\";"],"sourceRoot":""}