{"version":3,"sources":["webpack:///./src/views/product/image3d.vue?037a","webpack:///./src/views/product/image3d.vue?bfe9","webpack:///src/views/product/image3d.vue","webpack:///./src/views/product/image3d.vue?c339","webpack:///./src/views/product/image3d.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","staticStyle","attrs","jindutiaonum","_v","_e","staticRenderFns","component"],"mappings":"2IAAA,W,2CCAA,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,4DCiBtB,GACE,KADF,WAEI,MAAJ,CAEM,MAAN,KACM,MAAN,KACM,OAAN,KACM,SAAN,KACM,MAAN,KACM,MAAN,KACM,MAAN,KACM,WAAN,EACM,aAAN,EACM,UAAN,GACM,IAAN,KAGE,QAjBF,WAkBI,IAAJ,wBACI,KAAJ,aAGE,QAtBF,WAuBI,KAAJ,OACI,KAAJ,YAEE,QAAF,CACI,KADJ,WACM,IAAN,OACM,KAAN,aACM,IACN,uCAIM,KAAN,kBAiBM,IAAN,aACM,EAAN,wCACQ,EAAR,oBAEQ,EAAR,eACQ,EAAR,sBAgBM,KAAN,oEAEM,KAAN,qBACM,KAAN,sBACM,KAAN,6BAKM,KAAN,sBAAQ,WAAR,EAAQ,OAAR,IACM,KAAN,uDACM,KAAN,yCAGM,IAAN,mDACM,EAAN,cAGM,EAAN,uCAGI,SAnEJ,WAmEM,IAAN,OACM,OAAN,OAAM,CAAN,kCACQ,IAAR,IACA,aAEQ,EAAR,sEAQU,SAAV,IAEY,EAAZ,kCACY,sBAAZ,GACA,SACc,EAAd,mBAZU,EAAV,aAEU,EAAV,cACU,EAAV,6BACU,EAAV,mBAWU,EAAV,uBACU,SAAV,sCACY,QAAZ,OACA,YAEc,EAAd,gCAEc,EAAd,kCAKc,EAAd,+BAEc,EAAd,oCAGU,OAEV,YACU,IAAV,mCACU,EAAV,wBCzJgW,I,wBCQ5VC,EAAY,eACd,EACAd,EACAa,GACA,EACA,KACA,WACA,MAIa,aAAAC,E","file":"js/chunk-10feb67e.6dae9a8b.js","sourcesContent":["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!./image3d.vue?vue&type=style&index=0&id=f5af4d70&scoped=true&lang=css&\"","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\n  import * as THREE from 'three';\r\n  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';\r\n  import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';\r\n  import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';\r\n  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';\r\n  import { productsInfo} from \"@/api/api\"; \r\n  export 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        productid:'',\r\n        url:{}\r\n      }\r\n    },\r\n    created(){\r\n        let productid  = this.$route.params.id\r\n        this.productid = productid\r\n    },\r\n    // 页面渲染完毕之后，启用方法\r\n    mounted() {\r\n      this.init()  //初始化\r\n      this.loadGltf()  //加载模型\r\n    },\r\n    methods: {\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        productsInfo(this.productid).then(res=>{\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(process.env.VUE_APP_BASE_API+res.data.info.durl, 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    }\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!./image3d.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!./image3d.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./image3d.vue?vue&type=template&id=f5af4d70&scoped=true&\"\nimport script from \"./image3d.vue?vue&type=script&lang=js&\"\nexport * from \"./image3d.vue?vue&type=script&lang=js&\"\nimport style0 from \"./image3d.vue?vue&type=style&index=0&id=f5af4d70&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  \"f5af4d70\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}