fix: 截图组件

src/views/planetDesign/Design/components/config/Config3D.vue

@@ -184,7 +184,8 @@
       :width="800"
       @ok="handleOkGlbViewer"
     >
-      <div ref="viewer" style="width: 100%; height: 500px"></div>
+      <!-- <div ref="viewer" style="width: 100%; height: 500px"></div> -->
+      <WareViewer ref="viewer" :model="glbViewer.model" style="width: 100%; height: 500px"/>
     </a-modal>
     <a-modal
       v-model:visible="sceneViewer.visible"
@@ -256,9 +257,11 @@ import { scenes } from "./config3d.mock";
 import { buildShopDataDemo } from "./config3d.utils";
 import SceneSurveyViewer from "./Viewer3D/SceneSurveyViewer";
 import { message } from "ant-design-vue";
+import WareViewer from "./Viewer3D/WareViewer";
+
 
 export default {
-  components: { ConfigCheckBox, SceneSurveyViewer },
+  components: { ConfigCheckBox, SceneSurveyViewer, WareViewer },
   props: {
     config: {
       type: Object,
@@ -323,6 +326,7 @@ export default {
       glbViewer: {
         visible: false,
         container: null,
+        model: null,
         data: null,
       },
       sceneViewer: {
@@ -365,8 +369,12 @@ export default {
       this.$emit("changeConfig", this.configTemp);
     },
 
-    handleOkGlbViewer() {
-      this.glbViewer.container.toBlob(async (blob) => {
+    async handleOkGlbViewer() {
+
+      var blob = await this.$refs.viewer.snapshot();
+
+      console.log(blob);
+      
       const data = await common.cosUpload(blob, blob.name, "", () => {});
       this.glbViewer.data = {
         url: data.url,
@@ -377,7 +385,19 @@ export default {
       this.configTemp.img_name = data.name;
       this.glbViewer.visible = false;
       this.onUpdate();
-      });
+
+      // this.glbViewer.container.toBlob(async (blob) => {
+      //   const data = await common.cosUpload(blob, blob.name, "", () => {});
+      //   this.glbViewer.data = {
+      //     url: data.url,
+      //     title: data.name,
+      //   };
+
+      //   this.configTemp.img_url = data.url;
+      //   this.configTemp.img_name = data.name;
+      //   this.glbViewer.visible = false;
+      //   this.onUpdate();
+      // });
     },
     downloadUrl() {
       window.open(this.configTemp.img_url);
@@ -416,6 +436,7 @@ export default {
       });
     },
     init() {
+
       var url = "";
       var ware = this.shelf.wares.find(
         (x) => x.planetid == this.configTemp.ware
@@ -427,82 +448,21 @@ export default {
         console.warn("未获取到商品模型");
       }
 
-      let container = this.$refs.viewer;
+      fetch(url, {
+        method: 'get',
+        responseType: 'blob'
+      }).then(res => res.blob()).then(res => {
 
-      container.innerHTML = "";
+        let reader = new FileReader()
+        reader.addEventListener('load', e => {
+          this.glbViewer.model = {
+            file: {},
+            result: e.target.result,
+          };
+        }, false)
 
-      let width = container.offsetWidth;
-      let height = container.offsetHeight;
-
-      //创建场景对象
-      let scene = new THREE.Scene();
-      // scene.background = new THREE.Color(0xeeeeee);
-
-      //环境光
-      let light = new THREE.AmbientLight(0x404040, 10);
-      scene.add(light);
-
-      //相机设置
-      let camera = new THREE.PerspectiveCamera(10, width / height, 0.1, 1000); //透视摄像机
-      camera.position.set(0, 0, 4); //设置相机位置
-      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
-      // 加载模型
-      var loader = new GLTFLoader();
-      loader.load(
-        url,
-        function (glb) {
-          console.log(glb.scene);
-          glb.scene.traverse(function (child) {
-            if (child.isMesh) {
-              child.material.emissive = child.material.color;
-              child.material.emissiveIntensity = 4;
-              child.material.emissiveMap = child.material.map;
-            }
-          });
-          glb.scene.position.set(0, -0.09, 0);
-          scene.add(glb.scene);
-        },
-        undefined,
-        function (error) {
-          console.error(error);
-        }
-      );
-
-      // // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
-      // var axisHelper = new THREE.AxesHelper(250);
-      // scene.add(axisHelper);
-
-      // 创建渲染对象
-      let renderer = new THREE.WebGLRenderer({
-        antialias: true,
-        preserveDrawingBuffer: true,
-        alpha: true,
-      });
-      renderer.setSize(width, height); //设置渲染区域尺寸
-      // renderer.setClearColor(0xffffffff, 1); //设置背景颜色
-
-      // renderer.outputEncoding = THREE.sRGBEncoding
-
-      // renderer.toneMapping = THREE.LinearToneMapping;
-      // renderer.toneMapping = THREE.ReinhardToneMapping;
-      // renderer.toneMapping = THREE.CineonToneMapping;
-      renderer.toneMapping = THREE.ACESFilmicToneMapping;
-      // renderer.toneMappingExposure = 1.2
-
-      container.appendChild(renderer.domElement);
-
-      this.glbViewer.container = renderer.domElement;
-
-      // 执行渲染操作
-      function animate() {
-        requestAnimationFrame(animate);
-        renderer.render(scene, camera); //执行渲染操作
-      }
-
-      //创建控件对象
-      var controls = new OrbitControls(camera, renderer.domElement);
-
-      animate();
+        reader.readAsArrayBuffer(res)
+      })
     },
 
     editRelation() {

src/views/planetDesign/Design/components/config/Viewer3D/SceneSurveyViewerBak.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { SurveyViewer } from "./shelves.module";
+import { SurveyViewer } from "@/views/planetDesign/SceneSurveyViewerPage/shelves.module.js";
 
 export default {
   props: ["surveyId", "shopData", "page", "sceneAction", "elCart", "defaultWare", "isLocked"],

src/views/planetDesign/Design/components/config/Viewer3D/WareViewer.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="container-previewer-1-"></div>
+</template>
+
+<script>
+import { Previewer } from "@/views/planetDesign/SceneSurveyViewerPage/shelves.module.js";
+
+export default {
+  props: ["model"],
+
+  mounted: function () {
+    console.log("## Previewer mounted", this.$el.clientWidth);
+    this.$nextTick(() => {
+      console.log("## Previewer mounted - nt", this.$el.clientWidth);
+      this.tryInitView();
+    });
+  },
+
+  // updated: function () {
+  //     console.log("## Previewer updated", this.$el.clientWidth)
+  // },
+
+  beforeUnmount: function () {
+    console.log("## Previewer beforeUnmount");
+    if (this.previewer_) {
+      this.previewer_.dispose();
+      this.previewer_ = null;
+    }
+  },
+
+  methods: {
+    tryInitView() {
+      if (!this.previewer_) {
+        let container = this.$el;
+        this.previewer_ = new Previewer({
+          container,
+          fov0: 10,
+        });
+        this.previewer_.on("loadingCompletion", () => {
+          console.log("## Previewer loadingCompletion");
+          this.$emit("onLoadingCompletion");
+        });
+
+        this.previewer_.startup();
+      }
+      return this.previewer_;
+    },
+    snapshot() {
+      if (this.previewer_) {
+        return this.previewer_.snapshot();
+      } else {
+        return null;
+      }
+    },
+  },
+
+  watch: {
+    model(newVal, oldVal) {
+      if (this.previewer_) {
+        this.previewer_.model = newVal;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+div.container-previewer-1- {
+  width: 100%;
+  height: 50vh;
+}
+
+div.container-previewer-1-:focus {
+  outline: none;
+}
+
+div.container-previewer-1- >>> canvas:focus {
+  outline: none;
+}
+</style>