增加了 咖啡的例子 ，直接通过编辑器导出生成的

public/plugins/tresEditor/json/scene.json

@@ -0,0 +1 @@
+{"metadata":{"version":4.6,"type":"Object","generator":"Object3D.toJSON"},"geometries":[{"uuid":"261bd5d6-6828-4579-8ec0-868875904dca","type":"BufferGeometry","data":"url:geometries/261bd5d6-6828-4579-8ec0-868875904dca.json"},{"uuid":"826d54c9-847d-4eab-8a1e-2347cd9ff40a","type":"PlaneGeometry","width":1,"height":1,"widthSegments":16,"heightSegments":64}],"materials":[{"uuid":"683118b2-ff39-406b-ab09-634c62a2e816","type":"MeshBasicMaterial","name":"baked","color":16777215,"map":"a2fcf813-00d0-47d9-9692-52818f569e1f","envMapRotation":[0,0,0,"XYZ"],"reflectivity":1,"refractionRatio":0.98,"side":2,"blendColor":0,"flatShading":true},{"uuid":"e49924b0-ed0e-4676-bb67-df1b198db1e0","type":"ShaderMaterial","side":2,"transparent":true,"blendColor":0,"depthWrite":false,"forceSinglePass":true,"fog":false,"glslVersion":null,"uniforms":{"uTime":{"value":0},"uPerlin":{"value":null}},"vertexShader":"varying vec2 vUv;\nuniform sampler2D uPerlin;\nuniform float uTime;\n\nvec2 rotated2D(vec2 value, float angle) {\n    float s = sin(angle);\n    float c = cos(angle);\n    mat2 m = mat2(c, -s, s, c);\n    return m * value;\n}\n\nvoid main() {\n    vec3 newPosition = position;\n    //random position of the perlin for ROTATION\n    float perlin = texture(uPerlin, vec2(0.5, uv.y *0.2 - uTime * 0.005)).r;\n    float angle = perlin * 10.0;\n    newPosition.xz = rotated2D(position.xz, angle);\n\n    // wind effect\n    vec2 windOffset = vec2(\n        texture(uPerlin, vec2(0.25, uTime * 0.01)).r -0.5,\n        texture(uPerlin, vec2(0.75, uTime * 0.01)).r -0.5\n        );\n    windOffset.x *= pow(uv.y, 3.0) * 10.0;\n    windOffset.y *= pow(uv.y, 3.0) * 10.0;\n    newPosition.xz += windOffset;\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\n    vUv = uv;\n}","fragmentShader":"varying vec2 vUv;\nuniform sampler2D uPerlin;\nuniform float uTime;\n\nvoid main() {\n  vec2 smokeUv = vUv;\n  smokeUv.x *= 0.5;\n  smokeUv.y *= 0.3;\n  smokeUv.y -= uTime * 0.03;\n\n  float smoke = texture2D(uPerlin, smokeUv).r;\n\n  //remap\n  smoke = smoothstep(0.4, 1.0, smoke);\n\n  //edges\n  smoke *= smoothstep(0.0, 0.1, vUv.x);\n  smoke *= 1.0 - smoothstep(0.9, 1.0, vUv.x);\n  smoke *= smoothstep(0.0, 0.1, vUv.y);\n  smoke *= 1.0 - smoothstep(0.4, 1.0, vUv.y);\n\n\n  gl_FragColor = vec4(0.6, 0.3, 0.2, smoke);\n  #include <tonemapping_fragment>\n  #include <colorspace_fragment>\n}","lights":false,"clipping":false}],"textures":[{"uuid":"a2fcf813-00d0-47d9-9692-52818f569e1f","name":"baked","image":"9d3c34d0-4bf9-4469-8287-c578a136dc41","mapping":300,"channel":0,"repeat":[1,1],"offset":[0,0],"center":[0,0],"rotation":0,"wrap":[1000,1000],"format":1023,"internalFormat":null,"type":1009,"colorSpace":"srgb","minFilter":1008,"magFilter":1006,"anisotropy":1,"flipY":false,"generateMipmaps":true,"premultiplyAlpha":false,"unpackAlignment":4,"userData":{"mimeType":"image/jpeg"}}],"images":[{"uuid":"9d3c34d0-4bf9-4469-8287-c578a136dc41","url":"url:images/9d3c34d0-4bf9-4469-8287-c578a136dc41.PNG"}],"object":{"uuid":"31517222-A9A7-4EAF-B5F6-60751C0BABA3","type":"Scene","name":"Scene","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"up":[0,1,0],"background":1118481,"children":[{"uuid":"d734c277-95ab-436d-a0b9-50aaddcd2c29","type":"AmbientLight","name":"AmbientLight","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"up":[0,1,0],"color":16777215,"intensity":1},{"uuid":"2cb90c15-16b4-4e37-b79b-42dee480409b","type":"Group","name":"bakedModel.glb","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"up":[0,1,0],"children":[{"uuid":"12eca843-ed7c-4c19-b44e-e1203f066826","type":"Mesh","name":"baked","userData":{"name":"baked"},"layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,1.8260934352874756,0,1],"up":[0,1,0],"geometry":"261bd5d6-6828-4579-8ec0-868875904dca","material":"683118b2-ff39-406b-ab09-634c62a2e816"}]},{"uuid":"1c7cef54-ac31-4994-b4c8-259af228c777","type":"DirectionalLight","name":"DirectionalLight","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,2,4,1],"up":[0,1,0],"color":16777215,"intensity":2,"shadow":{"camera":{"uuid":"0cbe977c-5083-4868-9fcd-f584128d8165","type":"OrthographicCamera","layers":1,"up":[0,1,0],"zoom":1,"left":-5,"right":5,"top":5,"bottom":-5,"near":0.5,"far":500}}},{"uuid":"b76d97b2-0cef-486d-862b-f83c140c795b","type":"Mesh","name":"Plane","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,1.83,0,1],"up":[0,1,0],"geometry":"826d54c9-847d-4eab-8a1e-2347cd9ff40a","material":"e49924b0-ed0e-4676-bb67-df1b198db1e0"}],"backgroundRotation":[0,0,0,"XYZ"],"environmentRotation":[0,0,0,"XYZ"]}}

src/plugins/tresEditor/components/coffee/childComponent/firstLevel-42dee480409b.vue

@@ -0,0 +1,14 @@
+<template>
+    <!-- name:baked uuid:12eca843-ed7c-4c19-b44e-e1203f066826 type:Mesh -->
+        <primitive :object="object[0]" />
+        
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        object: any
+    }>(),
+    {},
+)
+</script>

src/plugins/tresEditor/components/coffee/scene.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-17 16:18:15
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-17 16:25:06
+-->
+<template>
+    <!-- name:AmbientLight uuid:d734c277-95ab-436d-a0b9-50aaddcd2c29 type:AmbientLight -->
+    <primitive :object="sceneObject.children[0]" />
+    <!-- name:bakedModel.glb uuid:2cb90c15-16b4-4e37-b79b-42dee480409b type:Group -->
+    <primitive :object="sceneObject.children[1]">
+        <firstLevel42dee480409b :object="sceneObject.children[1].children" />
+    </primitive>
+    <!-- name:DirectionalLight uuid:1c7cef54-ac31-4994-b4c8-259af228c777 type:DirectionalLight -->
+    <primitive :object="sceneObject.children[2]" />
+    <!-- name:Plane uuid:b76d97b2-0cef-486d-862b-f83c140c795b type:Mesh -->
+    <primitive :object="sceneObject.children[3]" />
+</template>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import * as THREE from 'three'
+import { loadImageToBase64, loadJsonFile } from 'PLS/tresEditor'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import player from './eventScript'
+import firstLevel42dee480409b from './childComponent/firstLevel-42dee480409b.vue'
+
+const { scene: tresScene, renderer, camera, sizes } = useTresContext()
+player.init(tresScene, renderer, camera, sizes)
+
+const loader = new THREE.ObjectLoader()
+const scene = await loadJsonFile('./plugins/tresEditor/json/scene.json')
+
+if (scene.geometries) {
+    for (const geometry of scene.geometries) {
+        if (geometry.data && geometry.data.startsWith('url:')) {
+            let url = geometry.data.slice(4)
+            if (url.startsWith('geometries/')) {
+                url = `./plugins/tresEditor/${url}`
+            }
+            geometry.data = await loadJsonFile(url)
+        }
+    }
+}
+if (scene.images) {
+    for (const image of scene.images) {
+        if (image.url && image.url.startsWith('url:')) {
+            let url = image.url.slice(4)
+            if (url.startsWith('images/')) {
+                url = `./plugins/tresEditor/${url}`
+            }
+            image.url = await loadImageToBase64(url)
+        }
+    }
+}
+
+const sceneObject = loader.parse(scene) as any
+onMounted(() => {
+    tresScene.value.background = sceneObject.background
+    tresScene.value.environment = sceneObject.environment
+    tresScene.value.fog = sceneObject.fog
+    player.load(sceneObject)
+    player.play()
+})
+const { onLoop } = useRenderLoop()
+onLoop(({ delta, elapsed }) => {
+    if (player.renderer) {
+        player.render(elapsed * 1000, delta * 1000)
+    }
+})
+</script>

src/plugins/tresEditor/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-10 10:11:04
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-14 16:22:26
+ * @LastEditTime: 2024-05-17 16:29:58
  */
 export default {
     name: 'tresEditor',
@@ -36,5 +36,6 @@ export default {
             name: 'simpleImport',
             title: '插件生成器',
         },
+        { src: 'plugins/tresEditor/preview/coffeeDemo.png', type: 'img', name: 'coffeeDemo', title: '编辑器直出咖啡☕️' },
     ],
 }

src/plugins/tresEditor/pages/coffeeDemo.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-05-17 16:22:18
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-17 16:22:31
+-->
+
+<template>
+    <loading />
+    <TresCanvas v-bind="state">
+        <OrbitControls />
+        <TresPerspectiveCamera ref="cameraRef" uuid="3c19836b-b3b4-4d47-9a85-07c1c09e93e6" name="Camera" />
+        <Suspense>
+            <sceneCom />
+        </Suspense>
+    </TresCanvas>
+</template>
+<script setup lang="ts">
+import * as THREE from 'three'
+import { reactive, watch, ref } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import sceneCom from '../components/coffee/scene.vue'
+import { loading2 as loading } from 'PLS/UIdemo'
+
+const state = reactive({
+    clearColor: '#201919',
+    windowSize: true,
+    antialias: true,
+    shadows: true,
+    shadowMapType: 1,
+    toneMapping: THREE.NoToneMapping,
+    toneMappingExposure: 1,
+})
+
+const cameraConfig = {
+    metadata: { version: 4.6, type: 'Object', generator: 'Object3D.toJSON' },
+    object: {
+        type: 'PerspectiveCamera',
+        name: 'Camera',
+        layers: 1,
+        matrix: [
+            0.9952879877508126, -3.469446951953614e-18, -0.09696299004743172, 0, -0.04978834565762423, 0.8581028602432903, -0.5110583155364574, 0,
+            0.08320421909744286, 0.5134778293580788, 0.8540594690547612, 0, 1.885820123940119, 8.724172264317321, 13.830394181920472, 1,
+        ],
+        up: [0, 1, 0],
+        fov: 45,
+        zoom: 1,
+        near: 0.1,
+        far: 1000,
+        focus: 10,
+        aspect: 1.24,
+        filmGauge: 35,
+        filmOffset: 0,
+    },
+}
+const loader = new THREE.ObjectLoader()
+const cameraObject = loader.parse(cameraConfig)
+const cameraRef = ref(null)
+watch(
+    () => cameraRef.value,
+    (val) => {
+        val.copy(cameraObject)
+    },
+)
+</script>