{"remainingRequest":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\jd_cgpt_fvue\\src\\views\\BigScreen\\3DModel\\modelIndex.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\src\\views\\BigScreen\\3DModel\\modelIndex.vue","mtime":1701745912029},{"path":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\jd_cgpt_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//\n//\n//\n//\n//\n//\n\r\nimport * as THREE from 'three'\r\nimport {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'\r\n// import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js'\r\nimport {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'\r\nimport {\r\n    CSS2DObject,\r\n    CSS2DRenderer,\r\n} from 'three/examples/jsm/renderers/CSS2DRenderer.js'\r\nimport {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'\r\nimport moment from 'moment'\r\nexport default {\r\n    name: 'ModelIndex',\r\n    data() {\r\n        return {\r\n            scene: null,\r\n            camera: null,\r\n            controls: null,\r\n            renderer: null,\r\n            css2Renderer: null,\r\n            clock: null,\r\n            mixer: null,\r\n            stats: null,\r\n            time: moment().format('YYYY-MM-DD HH:mm:ss'),\r\n            timer: null,\r\n            chooseObj: null,\r\n            tag: null,\r\n            percent: 0,\r\n            gui: null,\r\n            pole1: null,\r\n            pole2: null,\r\n            pole3: null,\r\n            pole4: null,\r\n            pole5: null,\r\n            pole6: null,\r\n            poloState: {\r\n                pole1: 0,\r\n                pole2: 0,\r\n                pole3: 0,\r\n                pole4: 0,\r\n                pole5: 0,\r\n                pole6: 0,\r\n            },\r\n        }\r\n    },\r\n    mounted() {\r\n        this.init()\r\n        this.animate()\r\n        this.timer = setInterval(() => {\r\n            this.time = moment().format('YYYY-MM-DD HH:mm:ss')\r\n        }, 1000)\r\n    },\r\n    methods: {\r\n        ploeRotate() {\r\n            if (this.poloState.pole1 == 1) {\r\n                this.pole1.rotation.set(Math.PI / 2, 0, 0, 'XZY')\r\n                this.poloState.pole1 = 0\r\n            } else {\r\n                this.pole1.rotation.set(0, 0, 0, 'XZY')\r\n                this.poloState.pole1 = 1\r\n            }\r\n        },\r\n        close() {\r\n            if (this.chooseObj) {\r\n                //把原来选中模型对应的标签和发光描边隐藏\r\n                this.chooseObj.remove(this.tag) //从场景移除\r\n            }\r\n        },\r\n        loadModel() {\r\n            const loader = new GLTFLoader()\r\n            loader.load(\r\n                './static/3DModel/sfz-lh.gltf',\r\n                (gltf) => {\r\n                    this.percent = 100\r\n                    console.log('控制台查看加载gltf文件返回的对象结构', gltf)\r\n                    // console.log('gltf对象场景属性', gltf.scene)\r\n\r\n                    // gltf.scene.traverse(function (obj) {\r\n                    //     if (obj.isMesh) {\r\n                    //         obj.material = new THREE.MeshLambertMaterial()\r\n                    //         // obj.material = obj.material.clone()\r\n                    //         obj.material.color.set(0xffff00)\r\n                    //         obj.material.blendColor.set(0xffff00)\r\n                    //         console.log('obj.name', obj.material)\r\n                    //     }\r\n                    // })\r\n\r\n                    // 标注\r\n                    // const tag = new CSS2DObject(div)\r\n                    // const obj = gltf.scene.getObjectByName('设备B标注')\r\n                    // // const obj = gltf.scene.getObjectByName('停车场标注');\r\n                    // //tag会标注在空对象obj对应的位置\r\n                    // obj.add(tag)\r\n\r\n                    this.pole1 = gltf.scene.getObjectByName('G-__580656')\r\n                    this.pole2 = gltf.scene.getObjectByName('G-__580368')\r\n                    this.pole3 = gltf.scene.getObjectByName('G-__580584')\r\n                    this.pole4 = gltf.scene.getObjectByName('G-__580440')\r\n                    this.pole5 = gltf.scene.getObjectByName('G-__580512')\r\n                    this.pole6 = gltf.scene.getObjectByName('G-__580728')\r\n\r\n                    this.scene.add(gltf.scene)\r\n                    document.getElementById('loading').style.display = 'none'\r\n                },\r\n                (xhr) => {\r\n                    console.log((xhr.loaded / xhr.total) * 100 + '% loaded')\r\n                    let percent = Math.floor((xhr.loaded / xhr.total) * 100)\r\n                    if (percent < 96) {\r\n                        this.percent = percent\r\n                    }\r\n                },\r\n                (error) => {\r\n                    console.log(error)\r\n                }\r\n            )\r\n        },\r\n        GUIControler(mesh) {\r\n            this.gui = new GUI()\r\n\r\n            this.gui.domElement.style.right = '0px'\r\n            this.gui.domElement.style.top = '100px'\r\n            this.gui.domElement.style.width = '300px'\r\n\r\n            this.gui.add(mesh.position, 'x', -100, 100).name('X坐标').step(0.1)\r\n            this.gui.add(mesh.position, 'y', -100, 100).name('Y坐标').step(0.1)\r\n            this.gui.add(mesh.position, 'z', -100, 100).name('Z坐标').step(0.1)\r\n        },\r\n        init() {\r\n            let container = this.$refs.threeDBox\r\n            this.scene = new THREE.Scene()\r\n            // this.scene.background = new THREE.Color(0x597238)\r\n            // this.scene.background = new THREE.CubeTextureLoader()\r\n            //     .setPath('./static/3DModel/img/skyBox/')\r\n            //     .load([\r\n            //         'posx.jpg',\r\n            //         'negx.jpg',\r\n            //         'posy.jpg',\r\n            //         'negy.jpg',\r\n            //         'posz.jpg',\r\n            //         'negz.jpg',\r\n            //     ])\r\n\r\n            // 创建纹理加载器\r\n            const textureLoader = new THREE.TextureLoader()\r\n            // 创建天空球\r\n            const skyGeometry = new THREE.SphereGeometry(1000, 60, 60)\r\n            const skyTexture = textureLoader.load(\r\n                './static/3DModel/img/sky.jpg'\r\n            ) // 天空纹理\r\n            const skyMaterial = new THREE.MeshBasicMaterial({\r\n                map: skyTexture, // 颜色贴图\r\n            })\r\n            // 反转球体，主要是反转z轴\r\n            skyGeometry.scale(1, 1, -1)\r\n            const sky = new THREE.Mesh(skyGeometry, skyMaterial)\r\n            this.scene.add(sky)\r\n\r\n            this.camera = new THREE.PerspectiveCamera(\r\n                30,\r\n                window.innerWidth / window.innerHeight,\r\n                1,\r\n                3000\r\n            )\r\n            this.camera.position.set(-87.0511, 4.7929, 0.799)\r\n            this.camera.lookAt(0, 0, 0)\r\n\r\n            this.loadModel() //加载模型\r\n\r\n            // const axesHelper = new THREE.AxesHelper(100)\r\n            // this.scene.add(axesHelper)\r\n\r\n            const ambient = new THREE.AmbientLight(0xffffff, 1)\r\n            this.scene.add(ambient)\r\n\r\n            const directionalLight = new THREE.DirectionalLight(0xffffff, 2)\r\n            // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算\r\n            directionalLight.position.set(80, 100, 50)\r\n            // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0\r\n            // directionalLight.target = mesh\r\n            this.scene.add(directionalLight)\r\n\r\n            // const dirLightHelper = new THREE.DirectionalLightHelper(\r\n            //     directionalLight,\r\n            //     5,\r\n            //     0xffffff\r\n            // )\r\n            // this.scene.add(dirLightHelper)\r\n\r\n            // const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5)\r\n            // //材质对象Material\r\n            const material = new THREE.MeshLambertMaterial({\r\n                color: 0xfff000, //设置材质颜色\r\n                transparent: true, //开启透明\r\n                opacity: 1, //设置透明度\r\n            })\r\n\r\n            // const mesh = new THREE.Mesh(geometry, material)\r\n            // mesh.position.set(-93.9, -2.65, 4.75)\r\n            // this.scene.add(mesh) //网格模型添加到场景中\r\n\r\n            const cubeMaterial = [\r\n                //side\r\n                new THREE.MeshBasicMaterial({\r\n                    color: 0xffffff, //设置材质颜色\r\n                    transparent: true, //开启透明\r\n                    opacity: 1, //设置透明度\r\n                    side: THREE.FrontSide,\r\n                }),\r\n                //top\r\n                new THREE.MeshBasicMaterial({\r\n                    map: new THREE.TextureLoader().load(\r\n                        '/static/3DModel/img/video.jpg'\r\n                    ),\r\n                    side: THREE.DoubleSide,\r\n                }),\r\n                //bottom\r\n                new THREE.MeshBasicMaterial({\r\n                    map: new THREE.TextureLoader().load(\r\n                        '/static/3DModel/img/video.jpg'\r\n                    ),\r\n                    side: THREE.DoubleSide,\r\n                }),\r\n            ]\r\n            const geometry = new THREE.CylinderGeometry(0.15, 0.15, 0.05)\r\n            // geometry.rotateX(Math.PI / 2)\r\n            // geometry.rotateZ(Math.PI / 2)\r\n            console.log('rotate', geometry)\r\n            const mesh = new THREE.Mesh(geometry, cubeMaterial)\r\n            mesh.position.set(8.2, 6.9, 1.3)\r\n            mesh.rotation.set(0, 0, Math.PI / 2, 'XZY')\r\n            this.scene.add(mesh) //网格模型添加到场景中\r\n\r\n            // this.GUIControler(mesh)\r\n\r\n            const div = document.getElementById('tag')\r\n            // HTML元素转化为threejs的CSS2模型对象\r\n            this.tag = new CSS2DObject(div)\r\n            // tag.position.set(-93.9, -2.65, 4.75)\r\n            // this.scene.add(tag)\r\n\r\n            // mesh.add(tag)\r\n            document.getElementById('close').style.pointerEvents = 'auto'\r\n\r\n            this.css2Renderer = new CSS2DRenderer()\r\n\r\n            this.css2Renderer.setSize(window.innerWidth, window.innerHeight)\r\n\r\n            container.appendChild(this.css2Renderer.domElement)\r\n\r\n            this.css2Renderer.domElement.style.pointerEvents = 'none'\r\n            this.css2Renderer.domElement.style.position = 'absolute'\r\n            this.css2Renderer.domElement.style.top = '0px'\r\n\r\n            this.renderer = new THREE.WebGLRenderer({antialias: true})\r\n            this.renderer.setPixelRatio(window.devicePixelRatio)\r\n            this.renderer.setSize(window.innerWidth, window.innerHeight)\r\n\r\n            this.renderer.outputColorSpace = THREE.SRGBColorSpace //设置为SRGB颜色空间\r\n            container.appendChild(this.renderer.domElement)\r\n\r\n            this.controls = new OrbitControls(\r\n                this.camera,\r\n                this.renderer.domElement\r\n            )\r\n            this.controls.target = new THREE.Vector3(-65.1083, 4.2508, 0.851)\r\n            this.controls.update()\r\n            window.addEventListener('resize', this.onWindowResize)\r\n\r\n            this.renderer.domElement.addEventListener('click', (event) => {\r\n                // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px\r\n                const px = event.offsetX\r\n                const py = event.offsetY\r\n                // 屏幕坐标px、py转WebGL标准设备坐标x、y\r\n                // width、height表示canvas画布宽高度\r\n                const x = (px / window.innerWidth) * 2 - 1\r\n                const y = -(py / window.innerHeight) * 2 + 1\r\n\r\n                //创建一个射线投射器`Raycaster`\r\n                const raycaster = new THREE.Raycaster()\r\n\r\n                //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray\r\n                // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中\r\n                raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera)\r\n                //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算\r\n                // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素\r\n                const intersects = raycaster.intersectObjects([mesh])\r\n                console.log('射线器返回的对象', intersects)\r\n                // intersects.length大于0说明，说明选中了模型\r\n                if (intersects.length > 0) {\r\n                    // 选中模型的第一个模型，设置为红色\r\n                    // intersects[0].object.material.color.set(0xff0000)\r\n                    intersects[0].object.add(this.tag)\r\n                    this.chooseObj = intersects[0].object\r\n                } else {\r\n                    // mesh.material.color.set(0xfff000)\r\n                    // if (this.chooseObj) {\r\n                    //     //把原来选中模型对应的标签和发光描边隐藏\r\n                    //     this.chooseObj.remove(tag) //从场景移除\r\n                    // }\r\n                }\r\n            })\r\n            setTimeout(() => {\r\n                this.state = '异常'\r\n            }, 10000)\r\n        },\r\n        onWindowResize() {\r\n            const width = window.innerWidth\r\n            const height = window.innerHeight\r\n            this.camera.aspect = width / height\r\n            this.renderer.setSize(width, height)\r\n            this.css2Renderer.setSize(width, height)\r\n            this.camera.updateProjectionMatrix()\r\n        },\r\n        animate() {\r\n            requestAnimationFrame(this.animate)\r\n            this.css2Renderer.render(this.scene, this.camera)\r\n            this.renderer.render(this.scene, this.camera)\r\n\r\n            // 根据相机控件可视化调试相机位置\r\n            // console.log('controls.target', this.controls.target)\r\n            // console.log('camera.position', this.camera.position)\r\n        },\r\n        showData() {\r\n            console.log('controls.target', this.controls.target)\r\n            console.log('camera.position', this.camera.position)\r\n        },\r\n    },\r\n    beforeDestroy() {\r\n        this.gui.domElement.style.display = 'none'\r\n        clearInterval(this.timer)\r\n        this.timer = null\r\n    },\r\n}\r\n",null]}