{"version":3,"sources":["webpack:///./src/views/test.vue?f206","webpack:///src/views/test.vue","webpack:///./src/views/test.vue?4aa4","webpack:///./src/views/test.vue","webpack:///./src/views/test.vue?91cc"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","staticStyle","attrs","jindutiaonum","_v","_e","staticRenderFns","data","scene","light","camera","renderer","model","group","mixer","jindutiao","mounted","init","loadGltf","methods","rgbeLoader","load","position","z","y","up","setSize","window","innerWidth","setPixelRatio","devicePixelRatio","controls","enableZoom","container","appendChild","domElement","loader","gltf","animate","vm","requestAnimationFrame","update","set","add","scale","document","addEventListener","console","log","event","deltaY","multiplyScalar","clampScalar","baifenbi","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAUC,YAAY,CAAC,WAAa,UAAU,CAACH,EAAG,MAAM,CAACE,YAAY,YAAYE,MAAM,CAAC,GAAK,eAAgBR,EAAa,UAAEI,EAAG,MAAM,CAACG,YAAY,CAAC,SAAW,aAAa,CAACH,EAAG,cAAc,CAACI,MAAM,CAAC,KAAO,SAAS,WAAaR,EAAIS,gBAAgBL,EAAG,MAAM,CAACG,YAAY,CAAC,aAAa,SAAS,aAAa,SAAS,CAACP,EAAIU,GAAG,YAAY,GAAGV,EAAIW,QACtcC,EAAkB,G,gDCgBtB,GACEC,KADF,WAEI,MAAO,CAELC,MAAO,KACPC,MAAO,KACPC,OAAQ,KACRC,SAAU,KACVC,MAAO,KACPC,MAAO,KACPC,MAAN,KACMC,WAAN,EACMZ,aAAN,IAIEa,QAhBF,WAiBIrB,KAAKsB,OACLtB,KAAKuB,YAEPC,QAAS,CAEPF,KAFJ,WAEA,WACMtB,KAAKoB,WAAY,EACjB,IACN,uCAIMpB,KAAKa,MAAQ,IAAI,EAAvB,MAiBM,IAAN,aACMY,EAAWC,KAAK,uBAAuB,SAA7C,GACQ,EAAR,oBAEQ,EAAR,eACQ,EAAR,sBAgBM1B,KAAKe,OAAS,IAAI,EAAxB,uDAEMf,KAAKe,OAAOY,SAASC,EAAI,GACzB5B,KAAKe,OAAOY,SAASE,EAAI,IACzB7B,KAAKe,OAAOe,GAAK,IAAI,EAA3B,aAKM9B,KAAKgB,SAAW,IAAI,EAA1B,+BACMhB,KAAKgB,SAASe,QAAQC,OAAOC,WAAnC,oBACMjC,KAAKgB,SAASkB,cAAcC,kBAG5B,IAAN,mDACMC,EAASC,YAAa,EAGtBC,EAAUC,YAAYvC,KAAKgB,SAASwB,aAGtCjB,SApEJ,WAqEM,IAAN,OACA,aAEMkB,EAAOf,KAAK,uBAAuB,SAAUgB,GAQ3C,SAASC,IAEPC,EAAG5B,SAASlB,OAAO8C,EAAG/B,MAAO+B,EAAG7B,QAChC8B,sBAAsBF,GAClBC,EAAGzB,OACLyB,EAAGzB,MAAM2B,OAAO,MAZpBF,EAAGxB,WAAY,EAEfwB,EAAG3B,MAAQyB,EAAK7B,MAChB+B,EAAG3B,MAAMU,SAASoB,IAAI,GAA9B,OACQH,EAAG/B,MAAMmC,IAAIJ,EAAG3B,OAWhB2B,EAAG3B,MAAMgC,MAAMF,IAAI,EAAG,EAAG,GACzBG,SAASC,iBAAiB,SAAlC,YACUC,QAAQC,IAAIC,GACRA,EAAMC,OAAS,GAEjBX,EAAG3B,MAAMgC,MAAMO,eAAe,KAE9BZ,EAAG3B,MAAMgC,MAAMQ,YAAY,GAAK,OAKhCb,EAAG3B,MAAMgC,MAAMO,eAAe,IAE9BZ,EAAG3B,MAAMgC,MAAMQ,YAAY,GAAK,SAGpCd,OAER,YACQ,IAAR,mCACQC,EAAGpC,aAAekD,QClJoT,I,wBCQ1UC,EAAY,eACd,EACA7D,EACAa,GACA,EACA,KACA,WACA,MAIa,aAAAgD,E,2CCnBf,W","file":"js/chunk-0c7e6fa1.9c162fdc.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"content\",staticStyle:{\"background\":\"white\"}},[_c('div',{staticClass:\"container\",attrs:{\"id\":\"container\"}}),(_vm.jindutiao)?_c('div',{staticStyle:{\"position\":\"absolute\"}},[_c('el-progress',{attrs:{\"type\":\"circle\",\"percentage\":_vm.jindutiaonum}}),_c('div',{staticStyle:{\"text-align\":\"center\",\"margin-top\":\"20px\"}},[_vm._v(\"正在加载中\")])],1):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"content\" style=\"background: white;\">\r\n    <!-- container就是要展示模型的容器 -->\r\n    <div  id=\"container\" class=\"container\"></div>\r\n    <div v-if=\"jindutiao\" style=\"position: absolute;\">\r\n      <el-progress type=\"circle\" :percentage=\"jindutiaonum\"></el-progress>\r\n      <div style=\"text-align: center;margin-top: 20px;\">正在加载中</div>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\n// 导入 Three.js以及相关需要用的部分\r\nimport * as THREE from 'three';\r\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';\r\nimport { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';\r\nimport { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';\r\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';\r\nexport default {\r\n  data() {\r\n    return {\r\n      // 初始化场景，相机，灯光，混合器等巴拉巴拉巴拉\r\n      scene: null,\r\n      light: null,\r\n      camera: null,\r\n      renderer: null,\r\n      model: null,\r\n      group: null,\r\n      mixer:null,\r\n      jindutiao:false,\r\n      jindutiaonum:0\r\n    }\r\n  },\r\n  // 页面渲染完毕之后，启用方法\r\n  mounted() {\r\n    this.init()  //初始化\r\n    this.loadGltf()  //加载模型\r\n  },\r\n  methods: {\r\n\r\n    init() {\r\n      this.jindutiao = true\r\n      let vm = this  //这里设置vm是this指向问题，一定要设置*******\r\n      let container = document.getElementById(\"container\");//获取显示3D模型的DOM结构\r\n\r\n\r\n      // 初始化场景\r\n      this.scene = new THREE.Scene();\r\n      // 加载环境光，不加则什么都看不见\r\n      //this.scene.add(new THREE.AmbientLight(0xffffff, 0.5));\r\n      // this.light = new THREE.DirectionalLight(0xffffff, 0.5); \r\n      // this.light.position.set(2, 0, 1).normalize();\r\n      // this.scene.add(this.light); //场景加载灯光\r\n      // this.light = new THREE.DirectionalLight(0xffffff, 0.5); \r\n      // this.light.position.set(-5, 0, 1).normalize();\r\n      // this.scene.add(this.light); //场景加载灯光\r\n      // this.light = new THREE.DirectionalLight(0xffffff, 1.0); \r\n      // this.light.position.set(0, 12, 1).normalize();\r\n      // this.scene.add(this.light); //场景加载灯光\r\n      // this.light = new THREE.DirectionalLight(0xffffff, 0.05); \r\n      // this.light.position.set(0, -12, 1).normalize();\r\n      // this.scene.add(this.light); //场景加载灯光\r\n\r\n\r\n      const rgbeLoader = new RGBELoader();\r\n      rgbeLoader.load('/models/startup.hdr',  (envMap)=> {\r\n          this.scene.environment = envMap;\r\n          // hdr作为环境贴图生效，设置.mapping为EquirectangularReflectionMapping\r\n          envMap.mapping = THREE.EquirectangularReflectionMapping;\r\n          this.scene.background = envMap\r\n      })\r\n \r\n      // 加载网格\r\n      // const grid = new THREE.GridHelper( 50, 10, 0x444444, 0x444444 );\r\n      // grid.material.opacity = 0.3;  //设置网格的透明度\r\n      // grid.material.transparent = true;  //设置网格是否可以透明\r\n      // grid.rotation.y = Math.PI/2.0;  //设置网格方向为模型y轴方向\r\n      // grid.position.y = -1  //设置网格位置为模型中心位置向下一格\r\n      // grid.rotateY(-60)  //设置网格绕Y轴逆时针旋转\r\n      // this.scene.add( grid );  //场景加载网格\r\n      \r\n      /**\r\n       * 相机设置\r\n       */\r\n      // 初始化透视相机\r\n      this.camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.01, 1000);\r\n      // 设置相机位置\r\n      this.camera.position.z = 0.2;\r\n      this.camera.position.y = 0.01;\r\n      this.camera.up = new THREE.Vector3(0, 1, 0);\r\n\r\n      // /**\r\n      //  * 创建渲染器对象\r\n      //  */\r\n      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }), // 开启抗锯齿和背景透明\r\n      this.renderer.setSize(window.innerWidth,window.innerHeight);\r\n      this.renderer.setPixelRatio(devicePixelRatio); //干啥的不清楚，反正开启之后画质直接起飞\r\n \r\n      // 相机的控件：加上它就能实现鼠标控制模型旋转、缩放\r\n      const controls = new OrbitControls(this.camera, this.renderer.domElement);\r\n      controls.enableZoom = false\r\n\r\n      // 最后就是把所有加载到指定的dom结构上\r\n      container.appendChild(this.renderer.domElement);\r\n \r\n    },\r\n    loadGltf() {\r\n      let vm = this;  //也是防止this指向问题\r\n      const loader = new GLTFLoader();  //模型加载器，有了它才能加载.glb等后缀文件并解析\r\n      // 开始加载模型文件（可替换自己的模型文件）https://models.readyplayer.me/64f1b1fefe61576b46f28fbb.glb?cacheControl=true&uat=1693561341962\r\n      loader.load(\"/models/HGM420N.glb\", function (gltf) {\r\n        vm.jindutiao = false\r\n        // 加载完之后\r\n        vm.model = gltf.scene;\r\n        vm.model.position.set(0,-0.05,0)  //设置模型初始的位置\r\n        vm.scene.add(vm.model)  //在场景中加载这个模型\r\n \r\n        // 执行动画\r\n        function animate() {\r\n          // 渲染器添加场景和相机\r\n          vm.renderer.render(vm.scene, vm.camera);\r\n          requestAnimationFrame(animate);\r\n          if (vm.mixer) {\r\n            vm.mixer.update(0.016);\r\n          }\r\n        }\r\n        vm.model.scale.set(1, 1, 1);\r\n        document.addEventListener('wheel',function(event){\r\n          console.log(event);\r\n          if (event.deltaY < 0) {\r\n            // 增加模型的缩放\r\n            vm.model.scale.multiplyScalar(1.1);\r\n            // 限制最大放大倍数为10倍\r\n            vm.model.scale.clampScalar(0.5, 1.5);\r\n          }\r\n          // 如果向下滚动\r\n          else {\r\n            // 减小模型的缩放\r\n            vm.model.scale.multiplyScalar(0.9);\r\n            // 限制最小缩小倍数为1倍\r\n            vm.model.scale.clampScalar(0.5, 1.5);\r\n          }\r\n        })\r\n        animate();\r\n      },\r\n      function(xhr){\r\n        let baifenbi = Math.floor(xhr.loaded/xhr.total*100)\r\n        vm.jindutiaonum = baifenbi\r\n      }\r\n      );\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style  scoped>\r\n  *{\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n  .content {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n  .container {\r\n    width: 100%;  \r\n    height: 100vh; \r\n    background: white;\r\n  }\r\n  .container :hover {\r\n    cursor: pointer;\r\n  }\r\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./test.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./test.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./test.vue?vue&type=template&id=41524037&scoped=true&\"\nimport script from \"./test.vue?vue&type=script&lang=js&\"\nexport * from \"./test.vue?vue&type=script&lang=js&\"\nimport style0 from \"./test.vue?vue&type=style&index=0&id=41524037&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"41524037\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./test.vue?vue&type=style&index=0&id=41524037&scoped=true&lang=css&\""],"sourceRoot":""}