perf(external/Composes): 引入Threejs插件和部分静态文件，新增部分三维可配置属性

@@ -119,37 +119,37 @@ watch(
 //TODO:三维静态路径地址，无法通过import.meta.globEager来引入，要报错，待优化
 const pathList = [
   {
-    label: '3D厂房',
-    value: 'src/assets/external/models/fbx/厂房.fbx',
+    label: '猫模型',
+    value: 'src/assets/external/models/fbx/cat.fbx',
     type: 'fbx'
   },
   {
-    label: '树',
-    value: 'src/assets/external/models/obj/tree.obj',
-    type: 'obj'
+    label: '枪拖把模型',
+    value: 'src/assets/external/models/gltf/Sniper_Stand.glb',
+    type: 'gltf'
   },
   {
-    label: 'gltf类型',
-    value: 'src/assets/external/models/gltf/DamagedHelmet.gltf',
-    type: 'gltf'
+    label: '飞机模型',
+    value: 'src/assets/external/models/obj/11803_Airplane_v1_l1.obj',
+    type: 'obj'
   },
   {
-    label: '白色物体',
-    value: 'src/assets/external/models/stl/colored.stl',
+    label: '踏月桥模型',
+    value: 'src/assets/external/models/stl/踏月桥.stl',
     type: 'stl'
   },
   {
-    label: '舞动的机器人',
-    value: 'src/assets/external/models/collada/stormtrooper.dae',
+    label: '龙模型',
+    value: 'src/assets/external/models/collada/Dragon 2.5_dae.dae',
     type: 'dae'
   },
   {
-    label: '雕像',
-    value: 'src/assets/external/models/ply/Lucy100k.ply',
+    label: '战斗机模型',
+    value: 'src/assets/external/models/ply/Intergalactic_Spaceship-(Ply).ply',
     type: 'ply'
   },
   {
-    label: '正方体',
+    label: '正方体模型',
     value: 'src/assets/external/models/json/lightmap.json',
     type: 'json'
   }
@@ -157,8 +157,6 @@ const pathList = [
 
 /**
  * 三维文件格式,vue-3d-loader是这个插件支持的格式，其他格式待解决
- * glb是gltf文件的二进制形式
- * 有些格式需要联合使用，需要贴纹理或者图片等，搭配使用比如(obj,mtl) (fbx,jpg)
  */
 const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']
 

@@ -21,17 +21,20 @@
         @click="onClick"
       />
       <div v-show="show" class="process">
-        <span>拼命加载中...</span>
-        <n-progress status="success" type="line" :percentage="process" :indicator-placement="'inside'" processing />
+        <span> 拼命加载中... </span>
+        <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
       </div>
     </div>
     <div v-else>您的浏览器不支持WebGL!</div>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, ref, onMounted, nextTick } from 'vue'
+import { PropType, toRefs, ref, onMounted, nextTick, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { vue3dLoader } from 'vue-3d-loader'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const designStore = useDesignStore()
 
 const props = defineProps({
   chartConfig: {
@@ -40,6 +43,11 @@ const props = defineProps({
   }
 })
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 const vue3dLoaderRef = ref(null)
 
 //threejs配置
@@ -49,10 +57,9 @@ const webGLRendererOptions = {
   preserveDrawingBuffer: true //缩略图生效需开启
 }
 
-//标注示例
+//标注示例可以多个支持图片和文字
 const labels = ref()
 labels.value = [
-  // text label
   {
     text: 'co2浓度：44',
     position: { x: 0, y: 18, z: 0 },
@@ -69,6 +76,23 @@ labels.value = [
       backgroundColor: 'rgba(0,0,0,1)'
     },
     sid: 3 // 自定义标识，可有可无
+  },
+  {
+    text: '氧气浓度：100',
+    position: { x: 10, y: 18, z: 0 },
+    scale: { x: 11.5, y: 10.8, z: 30.5 },
+    textStyle: {
+      fontFamily: 'Arial',
+      fontSize: 12,
+      fontWeight: 600,
+      lineHeight: 1,
+      color: '#ffffff',
+      borderWidth: 8,
+      borderRadius: 0,
+      borderColor: '#000000',
+      backgroundColor: 'rgba(0,0,0,1)'
+    },
+    sid: 4 // 自定义标识，可有可无
   }
 ]
 
@@ -85,8 +109,7 @@ const onLoad = async () => {
 const process = ref(0)
 
 const onProcess = (event: any) => {
-  // 拼命加载中，加载进度
-  process.value = Math.floor(event.loaded / event.total) * 100
+  process.value= Math.floor((event.loaded / event.total) * 100)
 }
 
 const onClick = (event: any) => {
@@ -120,7 +143,7 @@ const {
   dataset,
   outputEncoding,
   clearScene,
-  dampingFactor,
+  dampingFactor
 } = toRefs(props.chartConfig.option) as any
 </script>
 
@@ -132,6 +155,7 @@ const {
     position: absolute;
     top: 50%;
     left: 50%;
+    width: 50%;
     transform: translate(-50%, -50%);
   }
 }