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