读取原生的src文件

package.json

@@ -52,9 +52,11 @@
     "core-js": "3.36.1",
     "d3-geo": "^3.1.1",
     "echarts": "^5.5.0",
+    "file-saver": "^2.0.5",
     "gl-matrix": "^3.4.3",
     "gsap": "3.12.5",
     "heatmap.js-fix": "^1.0.0",
+    "jszip": "^3.10.1",
     "lamina": "^1.1.23",
     "lygia": "^1.1.3",
     "oimophysics": "^1.2.2",

src/plugins/tresEditor/components/importJson.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:25:14
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 16:59:23
+ * @LastEditTime: 2024-05-10 18:30:30
 -->
 <template></template>
 
@@ -13,33 +13,65 @@ import * as THREE from 'three'
 import { loadJson, initEvents, exporterJsonZip } from '../common/utils'
 import { useTresContext } from '@tresjs/core'
 import { Pane } from 'tweakpane'
+import { onMounted } from 'vue'
 
+let fileInput = null
 var loader = new THREE.ObjectLoader()
-
+const group = new THREE.Group()
 const { scene, renderer, camera } = useTresContext()
 const setScene = (value: any) => {
     if (value.children) {
-        scene.value.add(...value.children)
+        group.children = value.children
+        scene.value.add(group)
+        // scene.value.add(...value.children)
     }
 }
 
 const files = await loadJson('./plugins/tresEditor/json/app.json')
-console.log(files)
+// console.log(files)
 
 //目前 只管场景，不包含 摄像头的控制
-setScene(loader.parse(files.scene))
+// setScene(loader.parse(files.scene))
 
-initEvents(renderer.value, scene.value, camera.value, files.scripts)
-// initEvents = (renderer, scene, camera, scriptsObg)
-
-// exporterJsonZip(files.camera)
+// initEvents(renderer.value, scene.value, camera.value, files.scripts)
 
 const paneControl = new Pane()
+const inputB = paneControl.addButton({
+    title: '导入原生场景Json',
+    label: 'srcJson',
+})
+inputB.on('click', () => {
+    debugger
+    fileInput.accept = '.json'
+    fileInput.click()
+})
 const btn = paneControl.addButton({
-    title: '导出分解场景Json',
+    title: '导出分解场景Zip',
     label: 'JsonZip',
 })
 btn.on('click', () => {
     exporterJsonZip(files)
 })
+
+onMounted(() => {
+    fileInput = document.getElementById('fileInput')
+    if (!fileInput) {
+        return
+    }
+    fileInput.onchange = (event) => {
+        debugger
+        const file = event.target.files[0]
+        const reader = new FileReader()
+
+        reader.onload = (e) => {
+            const contents = e.target.result
+            const jsonData = JSON.parse(contents)
+            setScene(loader.parse(jsonData.scene))
+            console.log('JSON数据:', jsonData)
+            // 这里可以使用jsonData对象进行后续操作
+        }
+
+        reader.readAsText(file)
+    }
+})
 </script>

src/plugins/tresEditor/pages/simpleImport.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:11:04
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 17:13:18
+ * @LastEditTime: 2024-05-10 18:11:05
 -->
 <template>
     <TresCanvas v-bind="state" window-size>
@@ -20,6 +20,7 @@
 
         <TresGridHelper />
     </TresCanvas>
+    <input id="fileInput" type="file" accept=".zip" style="display: none" />
 </template>
 
 <script setup lang="ts">
@@ -44,9 +45,16 @@ const controlsState = reactive({
     dampingFactor: 0.05,
 })
 
+// const fileInput = shallowRef(null)
+// //@ts-ignore
+// const handleFileChange = (event) => {
+//     const file = event.target.files[0]
+//     debugger
+// }
 const TDirectionalLight = shallowRef(null)
 watchEffect(() => {
     if (TDirectionalLight.value) {
+        //
     }
 })
 </script>