{"remainingRequest":"D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\bzzgj-fvue\\src\\views\\Device\\3DView.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\bzzgj-fvue\\src\\views\\Device\\3DView.vue","mtime":1667545182301},{"path":"D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\bzzgj-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';\nimport gsap from 'gsap';\nexport default {\n  name: 'Home',\n  data: function data() {\n    return {\n      scene: null,\n      camera: null,\n      controls: null,\n      renderer: null,\n      axisHelper: null,\n      sphere: null,\n      time: {\n        value: 0\n      },\n      timer: null,\n      dataList: [{\n        image: require('@/assets/3DImage/livingRoom.jpg'),\n        tipsList: [{\n          position: {\n            x: -200,\n            y: -4,\n            z: -147\n          },\n          content: {\n            title: '进入厨房',\n            text: '',\n            image: 1,\n            showTip: false,\n            showTitle: true\n          }\n        }, {\n          position: {\n            x: -100,\n            y: 0,\n            z: -231\n          },\n          content: {\n            title: '信息点2',\n            text: '77989',\n            showTip: true,\n            showTitle: false\n          }\n        }, {\n          position: {\n            x: 150,\n            y: -50,\n            z: -198\n          },\n          content: {\n            title: '信息点3',\n            text: 'qwdcz',\n            showTip: true,\n            showTitle: false\n          }\n        }, {\n          position: {\n            x: 210,\n            y: 11,\n            z: -140\n          },\n          content: {\n            title: '信息点4',\n            text: '大豆食心虫侦察十大大苏打大大大大大大大',\n            showTip: true,\n            showTitle: false\n          }\n        }, {\n          position: {\n            x: 208,\n            y: -12,\n            z: 140\n          },\n          content: {\n            title: '信息点5',\n            text: 'eq',\n            showTip: true,\n            showTitle: false\n          }\n        } // {\n        //     position: {x: 86, y: -9, z: 236},\n        //     content: {\n        //         title: '进入房间',\n        //         text: '',\n        //         showTip: false,\n        //         showTitle: true,\n        //     },\n        // },\n        ]\n      }, {\n        image: require('@/assets/3DImage/kitchen.jpg'),\n        tipsList: [{\n          position: {\n            x: -199,\n            y: -24,\n            z: 145\n          },\n          content: {\n            title: '进入大厅',\n            text: '',\n            image: 0,\n            showTip: false,\n            showTitle: true\n          }\n        }]\n      }],\n      tipsSpriteList: [],\n      tooltipPosition: {\n        top: '-100%',\n        left: '-100%'\n      },\n      titlePosition: {\n        top: '-100%',\n        left: '-100%'\n      },\n      tooltopContent: {}\n    };\n  },\n  methods: {\n    // 初始化场景\n    initScene: function initScene() {\n      this.scene = new THREE.Scene();\n      this.scene.background = new THREE.Color(0x101010);\n    },\n    // 初始化透视投影相机\n    initCamera: function initCamera(element) {\n      this.camera = new THREE.PerspectiveCamera(45, element.clientWidth / element.clientHeight, 0.1, 1000);\n      this.camera.position.set(50, 0, 40);\n    },\n    // 控制器\n    initControls: function initControls(element) {\n      this.controls = new OrbitControls(this.camera, element);\n      this.controls.minDistance = 1;\n      this.controls.maxDistance = 100;\n      this.controls.enablePan = false;\n    },\n    // 渲染器\n    initRenderer: function initRenderer(element) {\n      this.renderer = new THREE.WebGLRenderer();\n      this.renderer.setSize(element.offsetWidth, element.offsetHeight);\n      element.appendChild(this.renderer.domElement);\n    },\n    initContent: function initContent() {\n      var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n      var sphereGeometry = new THREE.SphereGeometry(16, 50, 50);\n      sphereGeometry.scale(16, 16, -16);\n      var texture = new THREE.TextureLoader().load(this.dataList[index].image);\n      var sphereMaterial = new THREE.MeshBasicMaterial({\n        map: texture\n      });\n      this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);\n      this.scene.add(this.sphere);\n      this.addTipsSprite();\n    },\n    addTipsSprite: function addTipsSprite() {\n      var _this = this;\n\n      var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n      var tipTexture = new THREE.TextureLoader().load(require('@/assets/3DImage/tip.png'));\n      var material = new THREE.SpriteMaterial({\n        map: tipTexture\n      });\n      this.tipsSpriteList = [];\n      this.dataList[index].tipsList.forEach(function (item) {\n        var sprite = new THREE.Sprite(material);\n        sprite.scale.set(10, 10, 10);\n        sprite.position.set(item.position.x, item.position.y, item.position.z);\n        sprite.content = item.content;\n\n        _this.tipsSpriteList.push(sprite);\n\n        _this.scene.add(sprite);\n      });\n    },\n    changeContentAndtips: function changeContentAndtips(index) {\n      this.scene.children = this.scene.children.filter(function (item) {\n        return String(item.type) !== 'Sprite';\n      });\n      this.tipsSpriteList = [];\n      var texture = new THREE.TextureLoader().load(this.dataList[index].image);\n      var sphereMaterial = new THREE.MeshBasicMaterial({\n        map: texture,\n        transparent: true,\n        opacity: 0\n      });\n      this.sphere.material = sphereMaterial;\n      gsap.to(sphereMaterial, {\n        transparent: true,\n        opacity: 1,\n        duration: 2\n      });\n      this.camera.updateProjectionMatrix();\n      this.addTipsSprite(index);\n    },\n    render: function render() {\n      this.controls.update();\n      this.renderer.render(this.scene, this.camera);\n      this.renderer.sortObjects = false;\n      this.timer = requestAnimationFrame(this.render);\n      this.time.value += 0.015;\n    },\n    onResize: function onResize() {\n      var element = this.$refs.threeDBox;\n      this.camera.aspect = element.clientWidth / element.clientHeight;\n      this.camera.updateProjectionMatrix();\n      this.renderer.setSize(element.clientWidth, element.clientHeight);\n    },\n    onMouseClick: function onMouseClick(e) {\n      e.preventDefault();\n      var element = this.$refs.threeDBox;\n      console.log(element);\n      var raycaster = new THREE.Raycaster();\n      var mouse = new THREE.Vector2();\n      mouse.x = e.clientX / element.clientWidth * 2 - 1;\n      mouse.y = -(e.clientY / element.clientHeight) * 2 + 1;\n      raycaster.setFromCamera(mouse, this.camera);\n      var intersects = raycaster.intersectObjects(this.tipsSpriteList, true);\n\n      if (intersects.length > 0 && intersects[0].object.content.showTitle) {\n        this.changeContentAndtips(intersects[0].object.content.image);\n        this.handleTooltipHide(e);\n      }\n    },\n    onMousemove: function onMousemove(e) {\n      e.preventDefault();\n      var element = this.$refs.threeDBox;\n      var raycaster = new THREE.Raycaster();\n      var mouse = new THREE.Vector2();\n      mouse.x = e.clientX / element.clientWidth * 2 - 1;\n      mouse.y = -(e.clientY / element.clientHeight) * 2 + 1;\n      raycaster.setFromCamera(mouse, this.camera);\n      var intersects = raycaster.intersectObjects(this.tipsSpriteList, true);\n\n      if (intersects.length > 0) {\n        var elementWidth = element.clientWidth / 2;\n        var elementHeight = element.clientHeight / 2;\n        var worldVector = new THREE.Vector3(intersects[0].object.position.x, intersects[0].object.position.y, intersects[0].object.position.z);\n        var position = worldVector.project(this.camera);\n        this.tooltopContent = intersects[0].object.content;\n\n        if (intersects[0].object.content.showTip) {\n          var left = Math.round(elementWidth * position.x + elementWidth - this.$refs.tooltipBox.clientWidth / 2);\n          var top = Math.round(-elementHeight * position.y + elementHeight - this.$refs.tooltipBox.clientHeight / 2);\n          this.tooltipPosition = {\n            left: \"\".concat(left, \"px\"),\n            top: \"\".concat(top, \"px\")\n          };\n        } else if (intersects[0].object.content.showTitle) {\n          var _left = Math.round(elementWidth * position.x + elementWidth - this.$refs.titleBox.clientWidth / 2);\n\n          var _top = Math.round(-elementHeight * position.y + elementHeight);\n\n          this.titlePosition = {\n            left: \"\".concat(_left, \"px\"),\n            top: \"\".concat(_top, \"px\")\n          };\n        }\n      } else {\n        this.handleTooltipHide(e);\n      }\n    },\n    handleTooltipHide: function handleTooltipHide(e) {\n      e.preventDefault();\n      this.tooltipPosition = {\n        top: '-100%',\n        left: '-100%'\n      };\n      this.titlePosition = {\n        top: '-100%',\n        left: '-100%'\n      };\n      this.tooltopContent = {};\n    }\n  },\n  mounted: function mounted() {\n    var element = this.$refs.threeDBox;\n    this.initScene();\n    this.initCamera(element);\n    this.initControls(element);\n    this.initContent();\n    this.initRenderer(element);\n    this.render();\n    window.addEventListener('resize', this.onResize, false);\n    window.addEventListener('click', this.onMouseClick, false);\n    this.renderer.domElement.addEventListener('mousemove', this.onMousemove, false);\n    this.$refs.tooltipBox.addEventListener('mouseleave', this.handleTooltipHide, false);\n  },\n  destroyed: function destroyed() {\n    cancelAnimationFrame(this.timer);\n  }\n};",null]}