{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\Normal\\components\\modalPosition.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\Normal\\components\\modalPosition.vue","mtime":1703490847547},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-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//\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 { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';\nimport moment from 'moment'; // 用于模型边缘高亮\n\nimport { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';\nimport { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';\nimport { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';\nimport { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';\nimport { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';\nimport { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';\nimport { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';\nimport { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';\nexport default {\n  name: 'ModelIndex',\n  data: function data() {\n    return {\n      width: 0,\n      height: 0,\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      animationId: null,\n      chooseObj: null,\n      tag: null,\n      percent: 0,\n      gui: null,\n      composer: null,\n      //效果组合器\n      outlinePass: null,\n      //发光通道\n      effectFXAA: null //自定义的着色器通道\n\n    };\n  },\n  mounted: function mounted() {\n    var _this = this;\n\n    this.$nextTick(function () {\n      _this.width = _this.$refs['model-container'].offsetWidth;\n      _this.height = _this.$refs['model-container'].offsetHeight;\n\n      _this.init();\n\n      _this.animate();\n    });\n  },\n  methods: {\n    addComposer: function addComposer() {\n      // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。\n      this.composer = new EffectComposer(this.renderer); // 新建一个场景通道  为了覆盖到原来的场景上\n\n      var renderPass = new RenderPass(this.scene, this.camera);\n      this.composer.addPass(renderPass); // 物体边缘发光通道\n\n      this.outlinePass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera);\n      this.outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)); // 呼吸显示的颜色\n\n      this.outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0); // 呼吸消失的颜色\n\n      this.composer.addPass(this.outlinePass); // 解决高亮后环境变暗的问题\n\n      var outputPass = new OutputPass();\n      this.composer.addPass(outputPass); // 自定义的着色器通道 作为参数\n\n      this.effectFXAA = new ShaderPass(FXAAShader);\n      this.effectFXAA.uniforms['resolution'].value.set(1 / this.width, 1 / this.height);\n      this.composer.addPass(this.effectFXAA);\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\n        _this2.scene.add(gltf.scene);\n\n        document.getElementById('loading').style.display = 'none';\n      }, function (xhr) {\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      console.log(container, 'container');\n      this.scene = new THREE.Scene(); // 创建纹理加载器\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      '/static/3DModel/img/sky.png'); // 天空纹理\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, this.width / this.height, 1, 3000);\n      this.camera.position.set(-82.3681, 4.6218, 0.3505);\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);\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      // console.log('rotate', geometry)\n\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\n      this.GUIControler(mesh);\n      this.renderer = new THREE.WebGLRenderer({\n        antialias: true\n      });\n      this.renderer.setPixelRatio(window.devicePixelRatio);\n      this.renderer.setSize(this.width, this.height);\n      this.renderer.outputColorSpace = THREE.SRGBColorSpace; //设置为SRGB颜色空间\n\n      container.appendChild(this.renderer.domElement);\n      this.controls = new OrbitControls(this.camera, this.renderer.domElement); // -65.1083, 4.2508, 0.851\n\n      this.controls.target = new THREE.Vector3();\n      this.controls.minDistance = 0;\n      this.controls.maxDistance = 200;\n      this.autoRotate = true;\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 / _this3.width * 2 - 1;\n        var y = -(py / _this3.height) * 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        // const intersects = raycaster.intersectObjects([mesh])\n\n        var intersects = raycaster.intersectObject(_this3.scene, true);\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(this.tag)\n          _this3.drop();\n\n          _this3.chooseObj = intersects[0].object;\n\n          _this3.pick(_this3.chooseObj);\n        } else {\n          _this3.drop(); // mesh.material.color.set(0xfff000)\n          // if (this.chooseObj) {\n          //     //把原来选中模型对应的标签和发光描边隐藏\n          //     this.chooseObj.remove(tag) //从场景移除\n          // }\n\n        }\n      });\n      this.addComposer();\n      setTimeout(function () {\n        _this3.state = '异常';\n      }, 10000);\n    },\n    drop: function drop() {\n      this.outlinePass.selectedObjects = [];\n    },\n    pick: function pick(selectedObject) {\n      this.outlinePass.selectedObjects = [selectedObject];\n    },\n    onWindowResize: function onWindowResize() {\n      this.camera.aspect = this.width / this.height;\n      this.renderer.setSize(this.width, this.height);\n      this.composer.setSize(this.width, this.height);\n      this.camera.updateProjectionMatrix();\n      this.effectFXAA.uniforms['resolution'].value.set(1 / this.width, 1 / this.height);\n    },\n    animate: function animate() {\n      this.animationId = requestAnimationFrame(this.animate);\n      this.composer.render(this.scene, this.camera); // this.renderer.render(this.scene, this.camera)\n      // 根据相机控件可视化调试相机位置\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    removeEventListeners: function removeEventListeners() {},\n    destroyThreejs: function destroyThreejs() {\n      try {\n        this.renderer.dispose();\n        this.renderer.forceContextLoss();\n        this.renderer.content = null;\n        var gl = this.renderer.domElement.getContext('webgl');\n\n        if (gl && gl.getExtension('WEBGL_lose_context')) {\n          gl.getExtension('WEBGL_lose_context').loseContext();\n        }\n\n        this.renderer = null;\n        this.camera = null;\n        this.scene.traverse(function (child) {\n          if (child.material) {\n            child.material.dispose();\n          }\n\n          if (child.geometry) {\n            child.geometry.dispose();\n          }\n\n          child = null;\n        });\n        this.scene = null;\n      } catch (e) {\n        console.error('Failed to destroy threejs', e);\n      }\n    }\n  },\n  beforeDestroy: function beforeDestroy() {\n    cancelAnimationFrame(this.animationId);\n    this.removeEventListeners();\n    this.destroyThreejs();\n    this.gui.domElement.style.display = 'none';\n  }\n};",null]}