Home Explore Help
Register Sign In
bianjiang
/
screenShow
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

preview

bianjiang 1 year ago
parent
d5184b4bf1
commit
39a6e98dfc
17 changed files with 163 additions and 56 deletions
Split View Show Diff Stats
  1. 1 1
      package.json
  2. 1 0
      public/css/index.a267ae51.css
  3. 3 0
      public/frame3d.html
  4. 0 0
      public/js/chunk-vendors.6250f5d5.js
  5. 0 0
      public/js/chunk-vendors.6250f5d5.js.map
  6. 0 0
      public/js/index.7c9d0d66.js
  7. 0 0
      public/js/index.7c9d0d66.js.map
  8. 2 0
      src/comm/controllers/index.ts
  9. 81 0
      src/comm/controllers/previewCtrl.ts
  10. 1 0
      src/comm/ctx/config.ts
  11. 1 1
      src/modules/list/actions/canvas.ts
  12. 0 8
      src/modules/queen3d/index.ts
  13. 9 11
      src/pages/frame3d/routes/frame3d/index.tsx
  14. 26 6
      src/pages/website/routes/backend/components/layout/BasicLayout.tsx
  15. 33 24
      src/pages/website/routes/list/item.tsx
  16. 1 1
      vue.config.js
  17. 4 4
      yarn.lock

+ 1 - 1
package.json
View File 

@@ -49,7 +49,7 @@
 
     "nats.ws": "^1.12.0",
 
     "proto.gl": "^1.0.0",
 
     "qrcode": "^1.5.1",
 
-    "queen3d": "^0.0.92",
 
+    "queen3d": "^0.0.93",
 
     "queenjs": "1.0.0-beta.77",
 
     "queentree": "^0.1.86-nocheck",
 
     "rimraf": "^3.0.2",

+ 1 - 0
public/css/index.a267ae51.css
View File 

@@ -0,0 +1 @@
 
+.c1e0zl9j{position:relative;width:100vw;height:100vh;overflow:hidden}.c1e0zl9j canvas{width:100%;height:100%}.l12ccz8n{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cwuhi4d{width:100%}.cwuhi4d,.cyfieek{position:relative;height:100vh}.cyfieek{width:100vw;overflow:hidden}.cyfieek canvas{width:100%;height:100%;transition:all .2s ease}.lje6630{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.c11ml4pn{width:100%}.c11ml4pn,.ctk4eb2{position:relative;height:100vh}.ctk4eb2{width:100vw;overflow:hidden}.ctk4eb2 canvas{width:100%;height:100%}.l1mi9dz2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.c1kvi1js{height:100vh}.c1k0h6io,.c1kvi1js{position:relative;width:100%}.c1k0h6io{display:inline-flex;height:100%;justify-content:center;align-items:center}.c1k0h6io img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.c142sydk,.cwonz6i{position:relative;width:100%;height:100vh;display:flex;justify-content:center;align-items:center}

+ 3 - 0
public/frame3d.html
View File 

@@ -0,0 +1,3 @@
 
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>queen3d</title><style>body{
 
+        margin: 0 !important;
 
+      }</style><link href="css/index.a267ae51.css" rel="preload" as="style"><link href="js/chunk-vendors.6250f5d5.js" rel="preload" as="script"><link href="js/index.7c9d0d66.js" rel="preload" as="script"><link href="css/index.a267ae51.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but queen3d doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.6250f5d5.js"></script><script src="js/index.7c9d0d66.js"></script></body></html>

File diff suppressed because it is too large
+ 0 - 0
public/js/chunk-vendors.6250f5d5.js


File diff suppressed because it is too large
+ 0 - 0
public/js/chunk-vendors.6250f5d5.js.map


File diff suppressed because it is too large
+ 0 - 0
public/js/index.7c9d0d66.js


File diff suppressed because it is too large
+ 0 - 0
public/js/index.7c9d0d66.js.map


+ 2 - 0
src/comm/controllers/index.ts
View File 

@@ -3,6 +3,7 @@ import { NatsController } from "./natsCtrl";
 
 import { AppScreenMsgController } from "./appScreenMsgCtrl";
 
 import { AppMsgSendController } from "@queenjs/assets";
 
 import { StoreController } from "./storeCtrl";
 
+import { AssetPreviewController } from "./previewCtrl";
 
 
 export {
 
   DeviceController,
 
@@ -10,4 +11,5 @@ export {
 
   AppScreenMsgController,
 
   AppMsgSendController,
 
   StoreController,
 
+  AssetPreviewController,
 
 };

+ 81 - 0
src/comm/controllers/previewCtrl.ts
View File 

@@ -0,0 +1,81 @@
 
+import { reactive } from "vue";
 
+import { Controller } from "../core/controller";
 
+import { AssetTypes } from "@queenjs/assets";
 
+import { useCtx } from "../ctx";
 
+
 
+function addPrefixToAssetsFields(obj: any, prefix: string) {
 
+  // 使用 lodash 的深度优先遍历函数 _.forEachDeep
 
+  if (!obj || typeof obj != "object") return;
 
+
 
+  const keys = Object.keys(obj);
 
+  keys.forEach((key) => {
 
+    if (typeof obj[key] === "string" && obj[key].startsWith("/assets")) {
 
+      obj[key] = prefix + obj[key];
 
+    } else if (typeof obj[key] === "object") {
 
+      if (!Array.isArray(obj[key])) {
 
+        addPrefixToAssetsFields(obj[key], prefix);
 
+      } else {
 
+        obj[key].forEach((item: any) => {
 
+          addPrefixToAssetsFields(item, prefix);
 
+        });
 
+      }
 
+    }
 
+  });
 
+}
 
+
 
+export class AssetPreviewController extends Controller {
 
+  state = reactive({ lastPriewViewId: "" });
 
+
 
+  parent?: HTMLElement;
 
+  lastIframe?: HTMLIFrameElement;
 
+  setIframeParent(parent: HTMLElement) {
 
+    this.parent = parent;
 
+  }
 
+  setLastIframe(iframeDom: HTMLIFrameElement) {
 
+    this.lastIframe = iframeDom;
 
+  }
 
+
 
+  createIframe() {
 
+    // if (this.lastIframe) {
 
+    //   this.parent?.removeChild(this.lastIframe);
 
+    // }
 
+    const dom = document.createElement("iframe");
 
+    dom.src = `/frame3d.html?t=${Date.now()}`;
 
+    // dom.src = `http://192.168.110.64:8083/${htmlName}#/`;
 
+    dom.style.backgroundColor = "transparent";
 
+    dom.width = "100%";
 
+    dom.height = "100%";
 
+    dom.frameBorder = "0";
 
+
 
+    this.parent?.appendChild(dom);
 
+    this.lastIframe = dom;
 
+
 
+    return new Promise((r) => {
 
+      dom.onload = () => {
 
+        setTimeout(() => {
 
+          r(dom);
 
+        }, 0);
 
+      };
 
+    });
 
+  }
 
+
 
+  getIframe() {
 
+    return this.lastIframe as HTMLIFrameElement;
 
+  }
 
+
 
+  async priewViewScene(data: any) {
 
+    await this.createIframe();
 
+
 
+    const { deviceCtrl } = useCtx();
 
+
 
+    addPrefixToAssetsFields(data, deviceCtrl.httpServer);
 
+
 
+    this.getIframe().contentWindow?.postMessage(
 
+      JSON.stringify({
 
+        assetType: AssetTypes.Scene.id,
 
+        data: { source: data },
 
+      }),
 
+      "*"
 
+    );
 
+  }
 
+}

+ 1 - 0
src/comm/ctx/config.ts
View File 

@@ -5,6 +5,7 @@ const ctx = {
 
   msgCtrl: new Controls.AppScreenMsgController(),
 
   storeCtrl: new Controls.StoreController(),
 
   msgSendCtrl: new Controls.AppMsgSendController(),
 
+  previewCtrl: new Controls.AssetPreviewController(),
 
 };
 
 
 export { ctx };

+ 1 - 1
src/modules/list/actions/canvas.ts
View File 

@@ -76,7 +76,7 @@ export default ListModule.action({
 
     this.store.canvas.itemOffset = itemOffset;
 
     const lines = [];
 
     for (let i = 0; i < totalLines; i++) {
 
-      const off = i * totalLines;
 
+      const off = i * canvas.linesCount;
 
       const arr: ShowItem[] = [];
 
       for (let k = 0; k < canvas.linesCount; k++) {
 
         arr.push(items[(off + k) % items.length]);

+ 0 - 8
src/modules/queen3d/index.ts
View File 

@@ -1,8 +0,0 @@
 
-import { Application } from "queen3d";
 
-import { ModuleRoot } from "queenjs";
 
-
 
-export default class Queen3dCtrl extends ModuleRoot {
 
-  queen3d = new Application();
 
-}
 
-export const { useQueen3d, initQueen3d, setQueen3d } =
 
-  Queen3dCtrl.hook("Queen3d");

+ 9 - 11
src/pages/frame3d/routes/frame3d/index.tsx
View File 

@@ -39,25 +39,23 @@ const Canvas3d = defineComponent({
 
     store.showLoading = false;
 
     const getLocalSource = (asset: any) => {
 
       let source = cloneDeep(asset);
 
-
 
       const { deviceCtrl } = useCtx();
 
       const httpServer = deviceCtrl.httpServer;
 
-
 
       //模型处理
 
-      let geom = source.geoms[0];
 
 
-      geom.osgjs.url = httpServer + geom.osgjs.url;
 
-      source.geoms = [geom];
 
-      if (geom.shadow.url) {
 
-        geom.shadow.url = httpServer + geom.shadow.url;
 
-        // files.push(f.promise);
 
-      }
 
+      source.geoms.forEach((geom: any) => {
 
+        geom.osgjs.url = httpServer + geom.osgjs.url;
 
+        if (geom.shadow.url) {
 
+          geom.shadow.url = httpServer + geom.shadow.url;
 
+        }
 
+      });
 
 
       //材质处理
 
       source.mats.forEach((m: any) => {
 
         //base map
 
-
 
-        m.albedo.texture.url = httpServer + m.albedo.texture.url;
 
+        if (m.albedo.texture) {
 
+          m.albedo.texture.url = httpServer + m.albedo.texture.url;
 
+        }
 
 
         //法线
 
         if (m.normal?.texture) {

+ 26 - 6
src/pages/website/routes/backend/components/layout/BasicLayout.tsx
View File 

@@ -1,8 +1,8 @@
 
 import { css } from "@linaria/core";
 
 import { Layout, Menu } from "ant-design-vue";
 
 import { defineComponent, onMounted, reactive } from "vue";
 
-import { useRoute } from "vue-router";
 
-
 
+import { useRoute, useRouter } from "vue-router";
 
+import { HomeOutlined } from "@ant-design/icons-vue";
 
 import { menuData } from "@/pages/website/routes";
 
 
 const { Sider, Content } = Layout;
 
@@ -13,23 +13,27 @@ export default defineComponent({
 
       loading: true,
 
       menuKey: ["/backend/upload"],
 
     });
 
-
 
+    const router = useRouter();
 
     const menuChange = (keyPath: any) => {
 
       state.menuKey = keyPath;
 
     };
 
 
     onMounted(() => {
 
-     
-
 
       const data = useRoute();
 
       state.menuKey = [data.path];
 
     });
 
 
     return () => {
 
-      
       return (
 
         <Layout class={HomeStyle}>
 
           <Sider width={200} trigger={null} collapsible>
 
+            <div class={"home"}>
 
+              <HomeOutlined 
+                onClick={() => {
 
+                  router.push("/");
 
+                }}
 
+              />
 
+            </div>
 
             <div class="layout_menu">
 
               <Menu
 
                 theme="dark"
 
@@ -85,4 +89,20 @@ const HomeStyle = css`
 
   .header_right {
 
     text-align: right;
 
   }
 
+  .home {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 10px;
 
+    cursor: pointer;
 
+    padding: 5px;
 
+    font-size: 20px;
 
+    line-height: 1;
 
+    background-color: @inf-primary-color;
 
+    color: #fff;
 
+    border-radius: 0 0 10px 10px;
 
+    transition: all 0.2s ease-in-out;
 
+    &:hover {
 
+      padding-top: 10px;
 
+    }
 
+  }
 
 `;

+ 33 - 24
src/pages/website/routes/list/item.tsx
View File 

@@ -1,9 +1,11 @@
 
 import { ItemObject } from "@/modules/list/objects/item";
 
 import { css } from "@linaria/core";
 
-import { defineComponent, onMounted, reactive, ref } from "vue";
 
+import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 
 import { any, object } from "vue-types";
 
 
 import SwiperImage from "./swiperImage";
 
+import { useCtx } from "@/comm/ctx";
 
+import { useList } from "@/modules/list";
 
 
 // import Quill from "quill";
 
 export default defineComponent({
 
@@ -21,6 +23,9 @@ export default defineComponent({
 
     // });
 
     const moveRef = ref<HTMLElement>();
 
     const ifRef = ref<HTMLIFrameElement>();
 
+    const ifRefView = ref<HTMLElement>();
 
+    const { previewCtrl } = useCtx();
 
+    const { actions } = useList();
 
     // const editorRef = ref<HTMLElement>();
 
     onMounted(() => {
 
       // if (props.data.desc) {
 
@@ -34,21 +39,30 @@ export default defineComponent({
 
       moveRef.value?.addEventListener("mousedown", (e) => {
 
         emit("move", true);
 
       });
 
-      window.addEventListener("message", (e) => {
 
-        try {
 
-          if (!e.data || typeof e.data != "string") {
 
-            return;
 
-          }
 
-          const data = JSON.parse(e.data);
 
-          if (data.type == "ready") {
 
-            ifRef.value?.contentWindow?.postMessage(
 
-              JSON.stringify({ type: "data", data: props.data })
 
-            );
 
-          }
 
-        } catch (e) {
 
-          console.log(e);
 
-        }
 
+      nextTick(async () => {
 
+        previewCtrl.setIframeParent(ifRefView.value as HTMLElement);       
+        // previewCtrl.setLastIframe(ifRef.value as HTMLIFrameElement)
 
+        const res = await actions.loadPack3d({
 
+          source: props.data?.source,
 
+        } as any);
 
+        previewCtrl.priewViewScene(res?.data);
 
       });
 
+
 
+      // window.addEventListener("message", (e) => {
 
+      //   try {
 
+      //     if (!e.data || typeof e.data != "string") {
 
+      //       return;
 
+      //     }
 
+      //     const data = JSON.parse(e.data);
 
+      //     if (data.type == "ready") {
 
+      //       ifRef.value?.contentWindow?.postMessage(
 
+      //         JSON.stringify({ type: "data", data: props.data })
 
+      //       );
 
+      //     }
 
+      //   } catch (e) {
 
+      //     console.log(e);
 
+      //   }
 
+      // });
 
     });
 
     // const descTigger = () => {
 
     //   state.descShow = !state.descShow;
 
@@ -103,22 +117,17 @@ export default defineComponent({
 
             </div>
 
           )} */}
 
 
-          <div class={"view_3d"}>
 
-            <iframe
 
+          <div class={"view_3d"} ref={ifRefView}>
 
+            {/* <iframe
 
               ref={ifRef}
 
-              src={
 
-                "./frame3d.html#/?source=" +
 
-                props.data?.source +
 
-                "&dialogid=" +
 
-                props.dialogId
 
-              }
 
+              src={"/frame3d.html"}
 
               allowtransparency="true"
 
               style={{ backgroundColor: "transparent" }}
 
               frameborder="0"
 
               width="100%"
 
               height="100%"
 
               scrolling="no"
 
-            />
 
+            /> */}
 
           </div>
 
 
           {/* {data?.desc && (

+ 1 - 1
vue.config.js
View File 

@@ -14,7 +14,7 @@ const publicPath =
 
 module.exports = defineConfig({
 
     pages: {
 
         index: "src/pages/website/main.ts",
 
-        frame3d: "src/pages/frame3d/main.ts"
 
+        // frame3d: "src/pages/frame3d/main.ts"
 
 
     },
 
     outputDir: "dist",

+ 4 - 4
yarn.lock
View File 

@@ -6377,10 +6377,10 @@ qs@^6.4.0:
 
   dependencies:
 
     side-channel "^1.0.4"
 
 
-queen3d@^0.0.92:
 
-  version "0.0.92"
 
-  resolved "http://124.70.149.18:4873/queen3d/-/queen3d-0.0.92.tgz#f541b0624786e7ae775c972a04baec915ba0cac1"
 
-  integrity sha512-iXnAA84zT0taaKi/e2h9bzFISAh7ZKyJ9O7+ttL0OQvY9lGFBHcgaDqycYFziID2W+hnJJcFh6fRhvMuW6Tp6w==
 
+queen3d@^0.0.93:
 
+  version "0.0.93"
 
+  resolved "http://124.70.149.18:4873/queen3d/-/queen3d-0.0.93.tgz#3f5843141e87d84cd662524ced84075d528d5341"
 
+  integrity sha512-x0VhlvjsW4JsRJK2zTWgWGToO43aZZmhcMiYIi1hwJJCgcMHl+7j0mMjmYvsqBbZQCd9tsdMDhnOsKNLHoBuYg==
 
 
 queenjs@1.0.0-beta.77:
 
   version "1.0.0-beta.77"

Some files were not shown because too many files changed in this diff