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