增加了 json拆解的功能

src/plugins/tresEditor/common/utils.js

@@ -6,10 +6,12 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:32:35
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 12:00:43
+ * @LastEditTime: 2024-05-10 18:00:50
  */
 import { request } from '@fesjs/fes'
 import * as THREE from 'three'
+import JSZip from 'jszip'
+import { saveAs } from 'file-saver'
 
 window.THREE = THREE // Used by APP Scripts.
 
@@ -51,7 +53,6 @@ export const initEvents = (renderer, scene, camera, scriptsObg) => {
     }
 
     const scriptWrapResult = JSON.stringify(scriptWrapResultObj).replace(/\"/g, '')
-    debugger
     // eslint-disable-next-line block-scoped-var
     for (const uuid in scriptsObg) {
         const object = scene.getObjectByProperty('uuid', uuid, true)
@@ -84,3 +85,63 @@ export const initEvents = (renderer, scene, camera, scriptsObg) => {
 
     dispatch(events.init, null) //arguments
 }
+
+function getImageFormat(base64Data) {
+    const header = base64Data.substring(0, 15)
+    const jpgHeader = 'data:image/jpeg;base64,'
+    const pngHeader = 'data:image/png;base64,'
+    const gifHeader = 'data:image/gif;base64,'
+    const webpHeader = 'data:image/webp;base64,'
+
+    if (jpgHeader.startsWith(header)) {
+        return 'JPEG'
+    }
+    if (pngHeader.startsWith(header)) {
+        return 'PNG'
+    }
+    if (gifHeader.startsWith(header)) {
+        return 'GIF'
+    }
+    if (webpHeader.startsWith(header)) {
+        return 'WEBP'
+    }
+    return 'Unknown'
+}
+export const exporterJsonZip = (jsonObjct) => {
+    const geometrieList = []
+    if (jsonObjct.scene.geometries) {
+        jsonObjct.scene.geometries.forEach((geometry) => {
+            if (geometry.type === 'BufferGeometry') {
+                geometrieList.push({ uuid: geometry.uuid, data: geometry.data })
+                geometry.data = 'zip'
+            }
+        })
+    }
+    const imagesList = []
+    if (jsonObjct.scene.images) {
+        jsonObjct.scene.images.forEach((image) => {
+            if (image.url) {
+                imagesList.push({ uuid: image.uuid, url: image.url })
+                image.url = 'zip'
+            }
+        })
+    }
+    const zip = new JSZip()
+    if (geometrieList.length) {
+        const geometrieZip = zip.folder('geometries')
+        geometrieList.forEach((geometry) => {
+            geometrieZip.file(`${geometry.uuid}.json`, JSON.stringify(geometry.data))
+        })
+    }
+    if (imagesList.length) {
+        const imagesZip = zip.folder('images')
+        imagesList.forEach((image) => {
+            imagesZip.file(`${image.uuid}.${getImageFormat(image.url)}`, image.url.split(';base64,').pop(), { base64: true })
+        })
+    }
+    const json = JSON.stringify(jsonObjct)
+    zip.file('app.json', json)
+    return zip.generateAsync({ type: 'blob' }).then((blob) => {
+        saveAs(blob, 'config.zip')
+    })
+}

src/plugins/tresEditor/components/importJson.vue

@@ -4,14 +4,16 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:25:14
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 11:56:33
+ * @LastEditTime: 2024-05-10 16:59:23
 -->
 <template></template>
 
 <script lang="ts" setup>
 import * as THREE from 'three'
-import { loadJson, initEvents } from '../common/utils'
+import { loadJson, initEvents, exporterJsonZip } from '../common/utils'
 import { useTresContext } from '@tresjs/core'
+import { Pane } from 'tweakpane'
+
 var loader = new THREE.ObjectLoader()
 
 const { scene, renderer, camera } = useTresContext()
@@ -29,4 +31,15 @@ setScene(loader.parse(files.scene))
 
 initEvents(renderer.value, scene.value, camera.value, files.scripts)
 // initEvents = (renderer, scene, camera, scriptsObg)
+
+// exporterJsonZip(files.camera)
+
+const paneControl = new Pane()
+const btn = paneControl.addButton({
+    title: '导出分解场景Json',
+    label: 'JsonZip',
+})
+btn.on('click', () => {
+    exporterJsonZip(files)
+})
 </script>

src/plugins/tresEditor/pages/simpleImport.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:11:04
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 11:34:48
+ * @LastEditTime: 2024-05-10 17:13:18
 -->
 <template>
     <TresCanvas v-bind="state" window-size>
@@ -12,7 +12,7 @@
 
         <OrbitControls v-bind="controlsState" />
         <TresAmbientLight :intensity="0.5" />
-        <TresDirectionalLight :position="[5, 5, 5]" :intensity="10" color="#ff0000" cast-shadow />
+        <TresDirectionalLight ref="TDirectionalLight" :position="[6.058, 5.8, -2]" :intensity="10" color="#ff0000" cast-shadow />
 
         <Suspense>
             <importJson />
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
-import { reactive } from 'vue'
+import { reactive, shallowRef, watchEffect } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import importJson from '../components/importJson.vue'
@@ -43,4 +43,10 @@ const controlsState = reactive({
     enableDamping: true,
     dampingFactor: 0.05,
 })
+
+const TDirectionalLight = shallowRef(null)
+watchEffect(() => {
+    if (TDirectionalLight.value) {
+    }
+})
 </script>