perf(external/Composes): 组合下新增三维模型展示，目前支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json

@@ -45,6 +45,7 @@
     "three": "^0.145.0",
     "video.js": "^7.20.3",
     "vue": "^3.2.31",
+    "vue-3d-loader": "^2.1.7",
     "vue-demi": "^0.13.1",
     "vue-i18n": "^9.2.2",
     "vue-router": "4.0.12",

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ThreeDimensional1Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ThreeDimensional1Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 600, h: 500 }
+  public chartConfig = cloneDeep(ThreeDimensional1Config)
+  public option = cloneDeep(option)
+}

+<template>
+  
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('ThreeDimensional1')
+export const ThreeDimensional1Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '三维模型1',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'title1.png'
+}

+<template>
+  <div class="go-content-box">
+    <vue3dLoader
+      :backgroundColor="''"
+      :backgroundAlpha="0"
+      :height="h"
+      :width="w"
+      :filePath="filePath"
+      @process="onProcess"
+    />
+    <div v-show="show" class="process">
+      <n-space vertical>
+        <n-spin :show="false">
+          <template #description> 三维模型加载中：进度{{ process + '%' }} </template>
+        </n-spin>
+      </n-space>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { vue3dLoader } from 'vue-3d-loader'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+//三维静态文件
+const filePath = ref()
+
+filePath.value = ['src/assets/external/models/fbx/Samba Dancing.fbx']
+
+//三维加载事件相关
+const show = ref(false)
+
+const currentModelIndex = ref()
+
+const process = ref(0)
+
+const onProcess = (event: any, index: number) => {
+  // show.value = true
+  try {
+    process.value = Math.floor((event.loaded / event.total) * 100)
+    if (process.value > 50) show.value = false
+    if (index != 0) {
+      currentModelIndex.value = index
+    }
+  } catch (e) {
+    console.log(`三维模型加载失败原因：${e}`)
+  } finally {
+    show.value = false
+  }
+}
+//三维加载事件
+
+const { w, h } = toRefs(props.chartConfig.attr)
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .process {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%, -50%);
+  }
+}
+</style>

@@ -2,5 +2,6 @@ import { Title1Config } from './Title1/index'
 import { Title2Config } from './Title2/index'
 import { Title3Config } from './Title3/index'
 import { CameraConfig } from './Camera/index'
+import { ThreeDimensional1Config } from './ThreeDimensional1/index'
 
-export default [Title1Config, Title2Config, Title3Config, CameraConfig]
+export default [Title1Config, Title2Config, Title3Config, CameraConfig, ThreeDimensional1Config]