scenes update

src/comm/controllers/appScreenMsgCtrl.tsx

@@ -19,18 +19,18 @@ export class AppScreenMsgController extends AppMsgRecvController {
 
   initScreen() {
     this.clearListeners();
-    this.addProductListener("添加模型", async (data) => {
-      const { deviceCtrl } = useCtx();
-      console.log("添加模型", data);
-      if (data.payload.products.length != 1) return false;
+
+    this.addSceneListener("添加场景", async (data) => {
+      const asset = data.payload;
+      if (data.payload.scenes.length != 1) return false;
 
       const config = (await queenApi.dialog(
         <SaveForm
-          thumbnail={data.payload.products[0].thumbnail.url}
-          name={data.payload.products[0].name}
+          thumbnail={data.payload.scenes[0].thumbnail.url}
+          name={data.payload.scenes[0].name}
         />,
         {
-          title: "添加模型",
+          title: "添加场景",
           width: "460px",
           maskClosable: false,
         }
@@ -40,52 +40,78 @@ export class AppScreenMsgController extends AppMsgRecvController {
       const id = nanoid();
       let path = `/assets/${id}`;
 
+      console.log("asset=>", asset);
+
       const source = data.payload;
-      await this.downloadProductAssetFromHttp(path + "/", source);
+      await this.downloadSceneAssetFromHttp(path + "/", source);
 
-      let thumbnail = source.products[0].thumbnail;
+      let thumbnail = source.scenes[0].thumbnail;
       if (thumbnail?.url) {
-        const thumb = this.loadfile(`/assets/${id}/`, thumbnail.url);
+        const thumb = this.loadfile(`/assets/${id}/`, thumbnail.url, `${id}`);
         await thumb?.promise;
-        source.products[0].thumbnail.url = thumb?.file;
+        source.scenes[0].thumbnail.url = thumb?.file;
       }
 
-      const configFile = JSON.stringify(source);
-      await deviceCtrl.WriteFileText(
-        `${deviceCtrl.appDataDir}/screen/assets/${id}/${id}.json`,
-        configFile
-      );
-      const currentCategory = config.category;
-      const assetsJson = await deviceCtrl.ReadFileText(
-        `${deviceCtrl.appDataDir}/screen/assets_${currentCategory}.json`
-      );
-      if (assetsJson.text) {
-        const assets = JSON.parse(assetsJson.text);
-        const assetItem = {
-          _id: id,
-          name: config.name,
-          thumbnail: thumbnail.url,
-          type: "3D",
-          source: `/assets/${id}/${id}.json`,
-        };
-        assets.push(assetItem);
+      //拷贝模型到本地磁盘文件
+      //压缩文件夹
+      const { deviceCtrl } = useCtx();
+      const screenDir = `${deviceCtrl.appDataDir}/screen`;
+
+      let isSucc = true;
+      // await deviceCtrl.ZipFilesInDir(
+      //   screenDir + path,
+      //   screenDir + `/assets/${id}.scene`,
+      //   (t: string, d: any) => {
+      //     console.log("zip dir=====", t, d);
+      //     isSucc = t == "succ";
+      //   }
+      // );
+
+      if (isSucc) {
+        const configFile = JSON.stringify(source);
         await deviceCtrl.WriteFileText(
-          `${deviceCtrl.appDataDir}/screen/assets_${currentCategory}.json`,
-          JSON.stringify(assets)
+          `${deviceCtrl.appDataDir}/screen/assets/${id}/${id}.json`,
+          configFile
+        );
+        const currentCategory = config.category;
+        const assetsJson = await deviceCtrl.ReadFileText(
+          `${deviceCtrl.appDataDir}/screen/assets_${currentCategory}.json`
         );
+        if (assetsJson.text) {
+          const assets = JSON.parse(assetsJson.text);
+          const assetItem = {
+            _id: id,
+            name: config.name,
+            thumbnail: thumbnail.url,
+            type: "3D",
+            source: `/assets/${id}/${id}.json`,
+          };
+          assets.push(assetItem);
+          await deviceCtrl.WriteFileText(
+            `${deviceCtrl.appDataDir}/screen/assets_${currentCategory}.json`,
+            JSON.stringify(assets)
+          );
+        }
+        this.screenModule.actions.getAssetList();
       }
-      this.screenModule.actions.getAssetList();
+
+      // const ok = await deviceCtrl.RemoveDir(screenDir + path);
+
       return true;
     });
 
     this.emitChange();
   }
 
-  loadfile(dir: string, url: string) {
+  loadfile(dir: string, url: string, cusName = "") {
     if (!url) return;
     const { deviceCtrl } = useCtx();
     let names = url.split("/");
     let name = names[names.length - 1];
+    if (cusName) {
+      const index = name.lastIndexOf(".");
+      name = cusName + name.substring(index);
+    }
     const screenDir = deviceCtrl.appDataDir + "/screen";
     const filepath = screenDir + dir + name;
     return {
@@ -99,53 +125,59 @@ export class AppScreenMsgController extends AppMsgRecvController {
       }),
     };
   }
-  async downloadProductAssetFromHttp(
+
+  async downloadSceneAssetFromHttp(
     path: string,
-    source: { mats: any[]; geoms: any[]; products: any[] }
+    source: {
+      mats: any[];
+      geoms: any[];
+      products: any[];
+      scenes: any[];
+      env3ds: any[];
+    }
   ) {
     queenApi.showLoading("资源下载中");
+
     let files: any = [];
 
-    this.downGeomsHttp(path, source.geoms, files);
+    const downHttp = (wkPath: string, url: string, name = "") => {
+      return this.loadfile(wkPath, url, name);
+    };
+
+    this.downGeoms(path, source.geoms, files, downHttp);
+
+    this.downMats(path, source.mats, files, downHttp);
 
-    this.downMatsHttp(path, source.mats, files);
+    this.downEnv3ds(path, source.env3ds, files, downHttp);
 
+    //场景背景
+    source.scenes.forEach((s) => {
+      const bgUrl = s.background?.image?.url;
+      if (bgUrl) {
+        const f = downHttp(path, bgUrl, "bg");
+        if (f) {
+          s.background.image.url = f.file;
+          files.push(f.promise);
+        }
+      }
+    });
     const result = await Promise.all(files);
     queenApi.hideLoading();
     const failRes = result.filter((e) => {
       return e.ok == false;
     });
     console.log(result, failRes);
-
     return source;
   }
-  downGeomsHttp(path: string, geoms: any[], files: any[]) {
-    geoms.map((geom) => {
-      const osgjsUrl = geom.osgjs.url;
-      let osjsf = this.loadfile(path, osgjsUrl);
-      if (osjsf) {
-        files.push(osjsf?.promise);
-        geom.osgjs.url = osjsf?.file;
-      }
-
-      const osgbinUrl = osgjsUrl.substring(0, osgjsUrl.length - 5) + "bin";
-      let binf = this.loadfile(path, osgbinUrl);
-      if (binf) {
-        files.push(binf?.promise);
-      }
-      if (geom?.shadow?.url) {
-        let shadowf = this.loadfile(path, geom.shadow.url);
-        if (shadowf) {
-          files.push(shadowf.promise);
-          geom.shadow.url = shadowf.file;
-        }
-      }
-    });
-  }
-  downMatsHttp(path: string, mats: any[], files: any[]) {
+  downMats(
+    path: string,
+    mats: any[],
+    files: any[],
+    handleFile: (wkpath: string, url: string, name?: string) => any
+  ) {
     //材质处理
     mats.forEach((mItem) => {
-      const abf = this.loadfile(path, mItem.albedo.texture?.url);
+      const abf = handleFile(path, mItem.albedo.texture?.url);
       //base
       if (abf) {
         files.push(abf?.promise);
@@ -153,7 +185,7 @@ export class AppScreenMsgController extends AppMsgRecvController {
       }
       //法线
       if (mItem?.normal?.texture) {
-        const norf = this.loadfile(path, mItem.normal.texture?.url);
+        const norf = handleFile(path, mItem.normal.texture?.url);
         if (norf) {
           files.push(norf?.promise);
           mItem.normal.texture.url = norf.file;
@@ -161,7 +193,7 @@ export class AppScreenMsgController extends AppMsgRecvController {
       }
       //粗糙度
       if (mItem?.roughness?.texture) {
-        const rouf = this.loadfile(path, mItem.roughness.texture?.url);
+        const rouf = handleFile(path, mItem.roughness.texture?.url);
         if (rouf) {
           files.push(rouf?.promise);
           mItem.roughness.texture.url = rouf.file;
@@ -169,14 +201,14 @@ export class AppScreenMsgController extends AppMsgRecvController {
       }
       //金属度
       if (mItem?.metalness?.texture) {
-        const metaf = this.loadfile(path, mItem.metalness.texture?.url);
+        const metaf = handleFile(path, mItem.metalness.texture?.url);
         if (metaf) {
           files.push(metaf?.promise);
           mItem.metalness.texture.url = metaf.file;
         }
       }
       if (mItem?.opacity?.texture) {
-        const opaf = this.loadfile(path, mItem.opacity.texture?.url);
+        const opaf = handleFile(path, mItem.opacity.texture?.url);
         if (opaf) {
           files.push(opaf?.promise);
           mItem.opacity.texture.url = opaf.file;
@@ -184,4 +216,69 @@ export class AppScreenMsgController extends AppMsgRecvController {
       }
     });
   }
+
+  //模型处理
+  downGeoms(
+    path: string,
+    geoms: any[],
+    files: any[],
+    handleFile: (wkpath: string, url: string, name?: string) => any
+  ) {
+    geoms.map((geom) => {
+      const osgjsUrl = geom.osgjs.url;
+      let osjsf = handleFile(path, osgjsUrl);
+      if (osjsf) {
+        files.push(osjsf?.promise);
+        geom.osgjs.url = osjsf?.file;
+      }
+
+      const osgbinUrl = osgjsUrl.substring(0, osgjsUrl.length - 5) + "bin";
+      let binf = handleFile(path, osgbinUrl);
+      if (binf) {
+        files.push(binf?.promise);
+      }
+      if (geom?.shadow?.url) {
+        let shadowf = handleFile(path, geom.shadow.url);
+        if (shadowf) {
+          files.push(shadowf.promise);
+          geom.shadow.url = shadowf.file;
+        }
+      }
+    });
+  }
+
+  downEnv3ds(
+    path: string,
+    env3ds: any[],
+    files: any[],
+    handleFile: (wkpath: string, url: string, name?: string) => any
+  ) {
+    //环境球
+    const wkenv3d = path + "env3d/";
+
+    env3ds.forEach((defultEnv3d: any) => {
+      const envPath = `${wkenv3d}${defultEnv3d.id}/`;
+      if (defultEnv3d.background?.image?.url) {
+        let f = handleFile(
+          envPath,
+          defultEnv3d.background?.image?.url,
+          "background"
+        );
+        if (f) {
+          defultEnv3d.background.image.url = f.file;
+          files.push(f.promise);
+        }
+      }
+
+      defultEnv3d.config.textures.forEach((t: any) => {
+        t.images.forEach((im: any) => {
+          const f = handleFile(envPath, im.file);
+          if (f) {
+            im.file = f.file;
+            files.push(f.promise);
+          }
+        });
+      });
+    });
+  }
 }

src/pages/frame3d/routes/frame3d/index.tsx

@@ -78,27 +78,28 @@ const Canvas3d = defineComponent({
           m.opacity.texture.url = httpServer + m.opacity.texture.url;
         }
       });
-      const scene = {
-        background: {
-          color: [0.749, 0.749, 0.749],
-          type: 2,
-        },
-        id: "001",
-        products: [
-          {
-            id: "1",
-            prodId: source.products[0].id,
-            transform: {
-              pos: [0, 0, 0],
-              rotation: [0, 0, 0],
-              scale: [1, 1, 1],
-            },
-            visible: true,
-          },
-        ],
-      };
-
-      source.scenes = [scene];
+
+      //环境球
+      source.env3ds.forEach((item: any) => {
+        if (item.background?.image?.url) {
+          item.background.image.url = httpServer + item.background.image.url;
+        }
+        item.config.textures.forEach((t: any) => {
+          t.images.forEach((im: any) => {
+            im.file = httpServer + im.file;
+          });
+        });
+      });
+
+      source.scenes.forEach((c: any) => {
+        //@ts-ignore
+        const url = c.background?.image?.url;
+        if (url) {
+          //@ts-ignore
+          c.background.image.url = httpServer + c.background.image.url;
+        }
+      });
+
       return source;
     };
     const initQueen = () => {
@@ -106,7 +107,18 @@ const Canvas3d = defineComponent({
       actions.initPack(source);
       actions.on("initQueen3dScene:success", () => {
         const queen3d = controls.queen3dCtrl.queen3d;
+        const app = controls.queen3dCtrl.queen3d.getAppInstance();
+
+        app.setNoPan(true);
+
         queen3d.setTransparntBg();
+
+        queen3d.setControllerZoom(0.5, 6);
+
+        if (queen3d.picker) {
+          queen3d.picker.enable = false;
+        }
+
         queen3d.redraw();
         state.loaded = true;
         emit("init", true);

src/pages/website/routes/backend/List.tsx

@@ -4,9 +4,9 @@ import { css } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { Button, Select, Space, Table } from "ant-design-vue";
 
-import { defineComponent, nextTick, reactive } from "vue";
-import CategoryModal from "./categoryModal";
 import { queenApi } from "queenjs";
+import { defineComponent, reactive } from "vue";
+import CategoryModal from "./categoryModal";
 
 export default defineComponent({
   setup() {