Merge branch 'fix/3d-model-load' into 'main_dev'

perf: 优化3d模型加载

See merge request yunteng/thingskit-view!309

+import { UIPanel, UIButton } from './libs/ui.js';
+import html2canvas from 'html2canvas'
+import useMessage from './MessageDialog.js'
+import { saveOrUpdateThreeJsModel } from './libs/http/api.js'
+import { fetchRouteParamsLocation } from '@/utils'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { base64toFile } from '../utils/Base64ToFile.js'
+import { useSpin } from '../js/libs/spin/useSpin.js' 
+
+function MenubarSave(editor) {
+  const strings = editor.strings
+
+  const container = new UIPanel();
+  container.setClass('menu right');
+  container.setStyle('height', ['100%'])
+  container.setStyle('display', ['flex'])
+
+  const saveButton = new UIButton(strings.getKey('menubar/file/save'))
+  container.add(saveButton)
+
+  saveButton.onClick(async function () {
+
+    // 获取缩略图片
+    const range = document.querySelector('#viewport').children[3]
+    const { spin, stop } = useSpin()
+    const { success, error } = useMessage()
+    try {
+      spin()
+      // 生成图片
+      const canvasImage = await html2canvas(range, {
+        backgroundColor: null,
+        allowTaint: true,
+        useCORS: true,
+        logging: false
+      })
+      // 上传预览图
+      const uploadParams = new FormData()
+      uploadParams.append(
+        'file',
+        base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
+      )
+      const uploadRes = await uploadFile(uploadParams)
+      const file_json = editor.toJSON()
+      const paramsStr = window.location.search
+      const params = new URLSearchParams(paramsStr)
+      const file_uuid = params.get('three_file_uuid')
+      await saveOrUpdateThreeJsModel({
+        id: file_uuid,
+        imageUrl: uploadRes?.fileDownloadUri,
+        data: file_json
+      })
+      success('保存成功')
+    } catch (e) {
+      error(e?.message || e?.msg || '网络错误')
+    } finally {
+      stop()
+    }
+
+  })
+
+  return container;
+}
+
+export { MenubarSave };

@@ -5,20 +5,22 @@ import { MenubarEdit } from './Menubar.Edit.js';
 import { MenubarFile } from './Menubar.File.js';
 import { MenubarFile } from './Menubar.File.js';
 import { MenubarView } from './Menubar.View.js';
 import { MenubarView } from './Menubar.View.js';
 import { MenubarHelp } from './Menubar.Help.js';
 import { MenubarHelp } from './Menubar.Help.js';
-import { MenubarStatus } from './Menubar.Status.js';
+// import { MenubarStatus } from './Menubar.Status.js';
+import { MenubarSave } from './Menubar.Save.js'
 
 
-function Menubar( editor ) {
+function Menubar(editor) {
 
 
 	const container = new UIPanel();
 	const container = new UIPanel();
-	container.setId( 'menubar' );
+	container.setId('menubar');
 
 
-	container.add( new MenubarFile( editor ) );
-	container.add( new MenubarEdit( editor ) );
-	container.add( new MenubarAdd( editor ) );
-	container.add( new MenubarView( editor ) );
-	container.add( new MenubarHelp( editor ) );
+	container.add(new MenubarFile(editor));
+	container.add(new MenubarEdit(editor));
+	container.add(new MenubarAdd(editor));
+	container.add(new MenubarView(editor));
+	container.add(new MenubarHelp(editor));
 
 
 	// container.add( new MenubarStatus( editor ) );
 	// container.add( new MenubarStatus( editor ) );
+	container.add(new MenubarSave(editor))
 
 
 	return container;
 	return container;
 
 

+import { defHttp } from '@/utils/external/http/axios';
+import { ModelComponentItemType } from './model';
+
+
+
+
+export const doGet3DComponentJson = (id: string, ) => {
+  return defHttp.get<ModelComponentItemType | null>(
+    {
+      url: `/3d_component/json/${id}/root.json`
+    }
+  )
+}

+export interface ModelComponentItemType {
+  camera: Recordable
+  environment: Nullable<string>
+  history: Recordable
+  metadata: Recordable
+  project: Recordable
+  scene: Recordable
+  scripts: Recordable
+}

@@ -284,6 +284,8 @@ export default {
     after: 'After rendering',
     after: 'After rendering',
     doesDomComponent: 'At this time, the component DOM does not yet exist',
     doesDomComponent: 'At this time, the component DOM does not yet exist',
     alreadyDomComponent: 'At this point, the component DOM already exists',
     alreadyDomComponent: 'At this point, the component DOM already exists',
-
+  },
+  threeModel: {
+    loadError: 'Load error occurred'
   }
   }
 }
 }

@@ -286,5 +286,8 @@ export default {
     after: '渲染之后',//After rendering
     after: '渲染之后',//After rendering
     doesDomComponent: '此时组件 DOM 还未存在',//At this time, the component DOM does not yet exist
     doesDomComponent: '此时组件 DOM 还未存在',//At this time, the component DOM does not yet exist
     alreadyDomComponent: '此时组件 DOM 已经存在',//At this point, the component DOM already exists
     alreadyDomComponent: '此时组件 DOM 已经存在',//At this point, the component DOM already exists
+  },
+  threeModel: {
+    loadError: '加载发生错误'
   }
   }
 }
 }

 <template>
 <template>
   <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }">
   <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }">
-    <div>
-      <vue3dLoader
-        ref="vue3dLoaderRef"
-        :requestHeader="headers"
-        :backgroundColor="backgroundColor"
-        :backgroundAlpha="backgroundAlpha"
-        :webGLRendererOptions="webGLRendererOptions"
-        :height="h"
-        :width="w"
-        :filePath="dataset"
-        @process="onProcess"
-        @load="onLoad"
-        :intersectRecursive="true"
-      />
-      <div v-show="show" class="process">
-        <n-spin :show="show">
-          <template #description> 拼命加载中... </template>
-        </n-spin>
-      </div>
-    </div>
+    <NSpin :show="show" style="width: 100%; height: 100%;">
+      <div v-show="!loadErrorMsg" ref="modelContainerElRef" :style="{ display: show ? 'hidden' : 'block' }"></div>
+      <NResult v-show="loadErrorMsg" status="500" :title="t('external.threeModel.loadError')"
+        :description="loadErrorMsg || ''">
+      </NResult>
+    </NSpin>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, ref, nextTick } from 'vue'
+import { PropType, toRefs, unref, shallowRef, onMounted, onBeforeMount, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
-import { vue3dLoader } from 'vue-3d-loader'
-import { getJwtToken } from '@/utils/external/auth'
+import { ModelLoader } from './modelLoader'
+import { doGet3DComponentJson } from '@/api/external/3dModel'
+import { NSpin, NResult } from 'naive-ui'
+const t = window['$t']
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -35,39 +23,37 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-const vue3dLoaderRef = ref(null)
 
 
-const headers = {
-  'x-authorization': `Bearer ${getJwtToken()}`
-}
-const webGLRendererOptions = {
-  alpha: true, // 透明
-  antialias: true, // 抗锯齿
-  // fix: 预览三维图像需加上preserveDrawingBuffer: true
-  preserveDrawingBuffer: true //缩略图生效需开启
-}
+const show = ref(false)
+const loadErrorMsg = ref<Nullable<string>>()
 
 
-//三维模型加载
-const show = ref(true)
+const { borderConfig, dataset } = toRefs(props.chartConfig.option) as Recordable
 
 
-const { dataset, backgroundColor, backgroundAlpha, borderConfig } = toRefs(props.chartConfig.option) as Recordable
 
 
-const onLoad = async () => {
-  //加载完成
-  await nextTick()
-  if (dataset.value) {
+const modelContainerElRef = shallowRef<HTMLDivElement>()
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const loader = new ModelLoader({ width: unref(w), height: unref(h) })
+
+onBeforeMount(async () => {
+  try {
+    show.value = true
+    loadErrorMsg.value = null
+    const sceneJSON = await doGet3DComponentJson(unref(dataset))
+    await Promise.all([loader.parseScene(sceneJSON?.scene || {}), loader.parseCamera(sceneJSON?.camera || {})])
+  } catch (e) {
+    loadErrorMsg.value = (e as any)?.toString()
+  } finally {
     show.value = false
     show.value = false
   }
   }
-}
 
 
-//三维模型进度条
-const process = ref(0)
-
-const onProcess = (event: Recordable) => {
-  process.value = Math.floor((event.loaded / event.total) * 100)
-}
+})
 
 
-const { w, h } = toRefs(props.chartConfig.attr)
+onMounted(() => {
+  unref(modelContainerElRef)?.appendChild(loader.renderer.domElement)
+  loader.addControls()
+})
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
@@ -76,13 +62,14 @@ const { w, h } = toRefs(props.chartConfig.attr)
   border-width: v-bind('borderConfig.size + "px"');
   border-width: v-bind('borderConfig.size + "px"');
   border-style: solid;
   border-style: solid;
   border-color: v-bind('borderConfig.color');
   border-color: v-bind('borderConfig.color');
+
   .process {
   .process {
     position: absolute;
     position: absolute;
     top: 50%;
     top: 50%;
     left: 50%;
     left: 50%;
     width: 50%;
     width: 50%;
     transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    display:flex;
+    display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
   }
   }

+import { Camera, Scene, PerspectiveCamera, WebGLRenderer, ObjectLoader, PMREMGenerator, } from "three";
+
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+interface ModelLoaderConstructorOptions {
+  width?: number
+  height?: number
+}
+
+export class ModelLoader {
+
+  renderer: WebGLRenderer
+  scene: Scene
+  camera: Camera
+  controls?: OrbitControls
+
+  private pmremGenerator?: PMREMGenerator
+  private objectLoader: ObjectLoader
+  private el?: HTMLElement
+
+  constructor(
+    {
+      width = window.innerWidth,
+      height = window.innerHeight
+    }: ModelLoaderConstructorOptions = {}
+  ) {
+    this.renderer = new WebGLRenderer({ alpha: true, antialias: true })
+    this.scene = new Scene()
+    this.camera = new PerspectiveCamera()
+    this.objectLoader = new ObjectLoader()
+    this.renderer.setPixelRatio(window.devicePixelRatio)
+    this.renderer.setSize(width, height)
+    this.renderer.setAnimationLoop(this.animate.bind(this))
+  }
+
+  private animate() {
+    this.renderer.render(this.scene, this.camera)
+  }
+
+  addControls() {
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+    // 启用阻尼效果
+    this.controls.enableDamping = true;
+    // 阻尼系数
+    this.controls.dampingFactor = 0.25;
+    // 禁止屏幕空间的平移
+    this.controls.screenSpacePanning = false;
+    // 设置最小距离
+    this.controls.minDistance = 0.5;
+    // 设置最大距离
+    this.controls.maxDistance = 500;
+    // 限制垂直旋转角度
+    this.controls.maxPolarAngle = Math.PI / 2;
+  }
+
+  append(el: HTMLElement) {
+    this.el = el
+    this.el.appendChild(this.renderer.domElement)
+  }
+
+  setScene(scene: Scene) {
+    this.scene = scene
+  }
+
+  async parseScene(object: Recordable) {
+    this.scene = await this.objectLoader.parseAsync(object)
+  }
+
+  async parseCamera(object: Recordable) {
+    this.camera = await this.objectLoader.parseAsync(object)
+    if (this.controls) {
+      this.controls.object = this.camera
+      this.controls.update()
+    }
+  }
+
+  // setModelviewer() {
+  //   this.pmremGenerator = new PMREMGenerator(this.renderer);
+  //   this.pmremGenerator.compileEquirectangularShader();
+  //   this.scene.environment = this.pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+  // }
+
+}

 <template>
 <template>
   <!-- 侧边栏和数据分发处理 -->
   <!-- 侧边栏和数据分发处理 -->
   <div class="go-chart-common">
   <div class="go-chart-common">
-    <n-menu
-      v-show="hidePackageOneCategory"
-      class="chart-menu-width"
-      v-model:value="selectValue"
-      :options="packages.menuOptions"
-      :icon-size="16"
-      :indent="18"
-      @update:value="clickItemHandle"
-    ></n-menu>
+    <n-menu v-show="hidePackageOneCategory" class="chart-menu-width" v-model:value="selectValue"
+      :options="packages.menuOptions" :icon-size="16" :indent="18" @update:value="clickItemHandle"></n-menu>
     <div class="chart-content-list">
     <div class="chart-content-list">
       <n-scrollbar trigger="none">
       <n-scrollbar trigger="none">
         <charts-item-box :menuOptions="packages.selectOptions" @deletePhoto="deleteHandle"></charts-item-box>
         <charts-item-box :menuOptions="packages.selectOptions" @deletePhoto="deleteHandle"></charts-item-box>
@@ -37,7 +30,7 @@ const props = defineProps({
   selectOptions: {
   selectOptions: {
     type: Object,
     type: Object,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    default: () => {}
+    default: () => { }
   }
   }
 })
 })
 
 
@@ -134,7 +127,7 @@ watch(
             redirectComponent: 'Decorates/Three/Loader',
             redirectComponent: 'Decorates/Three/Loader',
             isThreeModel: true,
             isThreeModel: true,
             threeModelContent: modelItem.content,
             threeModelContent: modelItem.content,
-            threeModelFilePath: `${threeFilePath}${VITE_GLOB_API_URL}${VITE_GLOB_API_URL_PREFIX}/3d_component/json/${modelItem.id}/scene.json`,
+            threeModelFilePath: modelItem.id,
             threeModelImageUrl: modelItem.imageUrl
             threeModelImageUrl: modelItem.imageUrl
           }
           }
         })
         })
@@ -189,14 +182,17 @@ const clickItemHandle = (key: string) => {
 /* 此高度与 ContentBox 组件关联*/
 /* 此高度与 ContentBox 组件关联*/
 $topHeight: 40px;
 $topHeight: 40px;
 $menuWidth: 65px;
 $menuWidth: 65px;
+
 @include go('chart-common') {
 @include go('chart-common') {
   display: flex;
   display: flex;
   height: calc(100vh - #{$--header-height} - #{$topHeight});
   height: calc(100vh - #{$--header-height} - #{$topHeight});
+
   .chart-menu-width {
   .chart-menu-width {
     width: $menuWidth;
     width: $menuWidth;
     flex-shrink: 0;
     flex-shrink: 0;
     @include fetch-bg-color('background-color2-shallow');
     @include fetch-bg-color('background-color2-shallow');
   }
   }
+
   .chart-content-list {
   .chart-content-list {
     width: 200px;
     width: 200px;
     flex: 1;
     flex: 1;
@@ -204,14 +200,17 @@ $menuWidth: 65px;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
   }
   }
+
   @include deep() {
   @include deep() {
     .n-menu-item {
     .n-menu-item {
       height: 30px;
       height: 30px;
+
       &.n-menu-item--selected {
       &.n-menu-item--selected {
         &::before {
         &::before {
           background-color: rgba(0, 0, 0, 0);
           background-color: rgba(0, 0, 0, 0);
         }
         }
       }
       }
+
       .n-menu-item-content {
       .n-menu-item-content {
         text-align: center;
         text-align: center;
         padding: 0px 14px !important;
         padding: 0px 14px !important;