实现了 给的demo 的例子 导入 和 导出 压缩的资源zip

src/plugins/tresEditor/common/utils.js

@@ -6,7 +6,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:32:35
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 18:00:50
+ * @LastEditTime: 2024-05-11 11:32:49
  */
 import { request } from '@fesjs/fes'
 import * as THREE from 'three'
@@ -32,18 +32,25 @@ function dispatch(array, event) {
         array[i](event)
     }
 }
-export const initEvents = (renderer, scene, camera, scriptsObg) => {
-    const events = {
-        init: [],
-        start: [],
-        stop: [],
-        keydown: [],
-        keyup: [],
-        pointerdown: [],
-        pointerup: [],
-        pointermove: [],
-        update: [],
-    }
+const events = {
+    init: [],
+    start: [],
+    stop: [],
+    keydown: [],
+    keyup: [],
+    pointerdown: [],
+    pointerup: [],
+    pointermove: [],
+    update: [],
+}
+//暂时不考虑摄像机的动画
+const setCamera = () => {
+    // camera = value
+    // camera.aspect = this.width / this.height
+    // camera.updateProjectionMatrix()
+}
+export const initEvents = (renderer, scene, camera, sizes, jsonData) => {
+    const scriptsObg = jsonData.scripts || {}
     let scriptWrapParams = 'player,renderer,scene,camera'
     const scriptWrapResultObj = {}
 
@@ -55,10 +62,15 @@ export const initEvents = (renderer, scene, camera, scriptsObg) => {
     const scriptWrapResult = JSON.stringify(scriptWrapResultObj).replace(/\"/g, '')
     // eslint-disable-next-line block-scoped-var
     for (const uuid in scriptsObg) {
-        const object = scene.getObjectByProperty('uuid', uuid, true)
+        let curUuid = uuid
+        //这里解决一个问题 目前并没有把 主场景scene直接替换而是通过group 加进入的，所以 如果事件是基于主场景scene 那么替换这个uuid为现在tres主场景的uuid
+        if (uuid === jsonData.scene.object.uuid) {
+            curUuid = scene.uuid
+        }
+        const object = scene.getObjectByProperty('uuid', curUuid, true)
 
         if (object === undefined) {
-            console.warn('APP.Player: Script without object.', uuid)
+            console.warn('APP.Player: Script without object.', curUuid)
             continue
         }
 
@@ -68,7 +80,12 @@ export const initEvents = (renderer, scene, camera, scriptsObg) => {
             const script = scripts[i]
 
             // eslint-disable-next-line no-new-func
-            const functions = new Function(scriptWrapParams, `${script.source}\nreturn ${scriptWrapResult};`).bind(object)(this, renderer, scene, camera)
+            const functions = new Function(scriptWrapParams, `${script.source}\nreturn ${scriptWrapResult};`).bind(object)(
+                { width: sizes.width.value, height: sizes.height.value, setCamera },
+                renderer,
+                scene,
+                camera,
+            )
 
             for (const name in functions) {
                 if (functions[name] === undefined) continue
@@ -82,10 +99,52 @@ export const initEvents = (renderer, scene, camera, scriptsObg) => {
             }
         }
     }
-
     dispatch(events.init, null) //arguments
 }
+function onKeyDown(event) {
+    dispatch(events.keydown, event)
+}
+function onKeyUp(event) {
+    dispatch(events.keyup, event)
+}
+function onPointerDown(event) {
+    dispatch(events.pointerdown, event)
+}
+function onPointerUp(event) {
+    dispatch(events.pointerup, event)
+}
+function onPointerMove(event) {
+    dispatch(events.pointermove, event)
+}
+export const registerEvent = () => {
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('keyup', onKeyUp)
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('pointerup', onPointerUp)
+    document.addEventListener('pointermove', onPointerMove)
+    dispatch(events.start, null)
+}
+export const unregisterEvent = () => {
+    document.removeEventListener('keydown', onKeyDown)
+    document.removeEventListener('keyup', onKeyUp)
+    document.removeEventListener('pointerdown', onPointerDown)
+    document.removeEventListener('pointerup', onPointerUp)
+    document.removeEventListener('pointermove', onPointerMove)
+    dispatch(events.stop, null)
 
+    events.init = []
+    events.start = []
+    events.stop = []
+    events.keydown = []
+    events.keyup = []
+    events.pointerdown = []
+    events.pointerup = []
+    events.pointermove = []
+    events.update = []
+}
+export const updateEvents = (elapsed, delta) => {
+    dispatch(events.update, { time: elapsed, delta })
+}
 function getImageFormat(base64Data) {
     const header = base64Data.substring(0, 15)
     const jpgHeader = 'data:image/jpeg;base64,'

src/plugins/tresEditor/components/importJson.vue

@@ -4,74 +4,128 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:25:14
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 18:30:30
+ * @LastEditTime: 2024-05-11 11:31:42
 -->
 <template></template>
 
 <script lang="ts" setup>
 import * as THREE from 'three'
-import { loadJson, initEvents, exporterJsonZip } from '../common/utils'
-import { useTresContext } from '@tresjs/core'
+import { initEvents, registerEvent, unregisterEvent, updateEvents, exporterJsonZip } from '../common/utils'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
 import { Pane } from 'tweakpane'
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
+import { FMessage } from '@fesjs/fes-design'
 
-let fileInput = null
+let fileInput: any
+let jsonData = null as any
 var loader = new THREE.ObjectLoader()
-const group = new THREE.Group()
-const { scene, renderer, camera } = useTresContext()
+let group = null as THREE.Group | null
+const { scene, renderer, camera, sizes } = useTresContext()
+const clearScene = () => {
+    if (!group) {
+        return
+    }
+    const clearCache = (item: any) => {
+        item.geometry?.dispose()
+        item.material?.dispose()
+    }
+    const removeObj = (obj: any) => {
+        let arr = obj.children.filter((x) => !!x)
+        arr.forEach((item: any) => {
+            if (item.children.length) {
+                removeObj(item)
+            } else {
+                clearCache(item)
+                item.clear()
+            }
+        })
+        obj.clear()
+        arr = null
+    }
+    removeObj(group)
+    group = null
+}
 const setScene = (value: any) => {
+    clearScene()
+    group = new THREE.Group()
     if (value.children) {
         group.children = value.children
         scene.value.add(group)
-        // scene.value.add(...value.children)
     }
 }
 
-const files = await loadJson('./plugins/tresEditor/json/app.json')
+// const files = await loadJson('./plugins/tresEditor/json/app.json')
 // console.log(files)
-
 //目前 只管场景，不包含 摄像头的控制
 // setScene(loader.parse(files.scene))
-
 // initEvents(renderer.value, scene.value, camera.value, files.scripts)
 
 const paneControl = new Pane()
+const inputClear = paneControl.addButton({
+    title: '清空场景',
+    label: 'clear',
+})
+inputClear.on('click', () => {
+    const result = confirm('确定要执行操作吗？')
+    if (result) {
+        window.location.reload()
+    }
+    // unregisterEvent()
+    // clearScene()
+    // FMessage.success?.({
+    //     content: '清空场景成功',
+    //     colorful: true,
+    // })
+})
 const inputB = paneControl.addButton({
     title: '导入原生场景Json',
     label: 'srcJson',
 })
 inputB.on('click', () => {
-    debugger
-    fileInput.accept = '.json'
-    fileInput.click()
+    if (fileInput) {
+        fileInput.accept = '.json'
+        // 清除文件输入框的值
+        fileInput.value = null
+        fileInput.click()
+    }
 })
 const btn = paneControl.addButton({
     title: '导出分解场景Zip',
     label: 'JsonZip',
 })
 btn.on('click', () => {
-    exporterJsonZip(files)
+    if (jsonData) {
+        exporterJsonZip(jsonData)
+    } else {
+        FMessage.warning?.({
+            content: '场景内无物体',
+            colorful: true,
+        })
+    }
 })
-
 onMounted(() => {
     fileInput = document.getElementById('fileInput')
     if (!fileInput) {
         return
     }
-    fileInput.onchange = (event) => {
-        debugger
+    fileInput.onchange = (event: any) => {
         const file = event.target.files[0]
         const reader = new FileReader()
 
-        reader.onload = (e) => {
+        reader.onload = (e: any) => {
             const contents = e.target.result
-            const jsonData = JSON.parse(contents)
+            jsonData = JSON.parse(contents)
             setScene(loader.parse(jsonData.scene))
-            console.log('JSON数据:', jsonData)
-            // 这里可以使用jsonData对象进行后续操作
+
+            initEvents(renderer.value, scene.value, camera.value, sizes, jsonData)
+            registerEvent()
         }
 
         reader.readAsText(file)
     }
 })
+const { onLoop } = useRenderLoop()
+onLoop(({ delta, elapsed }) => {
+    updateEvents(elapsed * 1000, delta * 1000)
+})
 </script>

src/plugins/tresEditor/pages/simpleImport.vue

@@ -4,15 +4,15 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:11:04
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-10 18:11:05
+ * @LastEditTime: 2024-05-11 09:38:23
 -->
 <template>
     <TresCanvas v-bind="state" window-size>
         <TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
 
         <OrbitControls v-bind="controlsState" />
-        <TresAmbientLight :intensity="0.5" />
-        <TresDirectionalLight ref="TDirectionalLight" :position="[6.058, 5.8, -2]" :intensity="10" color="#ff0000" cast-shadow />
+        <!-- <TresAmbientLight :intensity="0.5" /> -->
+        <!-- <TresDirectionalLight ref="TDirectionalLight" :position="[6.058, 5.8, -2]" :intensity="10" color="#ff0000" cast-shadow /> -->
 
         <Suspense>
             <importJson />