initPack

babel.config.js

@@ -10,3 +10,4 @@ module.exports = {
 
   ],
 };
+

linaria.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  rules: [
+    {
+      action: require("@linaria/shaker").default,
+    },
+    {
+      test: /node_modules[\/\\](?!@queenjs)/,
+      action: "ignore",
+    },
+  ]
+}

src/pages/App.tsx

@@ -3,7 +3,7 @@ import { Provider } from "queenjs/adapter/vue";
 import { Router } from "vue-router";
 import { createApp } from "vue";
 import { queenApi } from "queenjs";
-
+import "@/styles/global.less";
 let setModuleHooks: any[] = [];
 
 const App = defineComponent(() => {

src/pages/frame3d/main.ts

@@ -2,5 +2,5 @@ import { startApp } from "../App";
 import { initList } from "@/modules/list";
 import { initQueditor } from "@queenjs-modules/queditor";
 import router from "./routes";
-
+import "./style.less";
 startApp(router, [initList, initQueditor]);

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

@@ -32,32 +32,30 @@ const Canvas3d = defineComponent({
   emits: ["init"],
   setup(props, { emit }) {
     const state = reactive({ loaded: false });
-    const { actions, components } = useQueditor();
-    actions.initPack(props.pack);
-    // const hooks = useScenePackPreview(props.pack, "1", {
-    //   onPackLoaded: () => {
-    //     const app = queen3d.getAppInstance();
-    //     if (!app) return;
-
-    //     // app.setNoZoom(true);
-    //     app.setNoPan(true);
-
-    //     app.getFeaturesManager()?.enableGizmo(false);
-    //     queen3d.setControllerZoom(0.5, 7);
-    //     let target = osg.vec3.create();
-    //     queen3d.getControllerTarget(target);
-    //     target[0] = 0;
-    //     target[1] = 0;
-    //     console.log(target);
-    //     queen3d.setControllerTarget(target);
-
-    //     queen3d.picker.enable = false;
-    //     queen3d.redraw();
-    //     state.loaded = true;
-    //     emit("init", true);
-    //   },
-    //   backgroundTransparent: true,
-    // });
+    const { actions, components, controls, store } = useQueditor();
+    store.showLoading = false;
+    const initQueen = async () => {
+      actions.initPack(props.pack.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);
+      });
+    };
+    initQueen();
 
     return () => (
       <components.Viewport.Canvas
@@ -76,8 +74,8 @@ export default defineComponent({
     const state = reactive({ loaded: false, loading: true });
     const { actions } = useList();
     onMounted(async () => {
-      packRef.value = await actions.loadPack3d({ meshId: meshId } as any);
-
+      const res = await actions.loadPack3d({ meshId: meshId } as any);
+      packRef.value = res?.data;
       state.loaded = true;
       document.addEventListener("mousedown", () => {
         window.parent.postMessage(JSON.stringify({ type: "start", dialogId }));
@@ -93,33 +91,36 @@ export default defineComponent({
       });
     });
 
-    return () => (
-      <>
-        {state.loaded && (
-          <Canvas3d
-            pack={packRef.value}
-            onInit={(v) => {
-              state.loading = false;
-            }}
-          />
-        )}
-        {state.loading && (
-          <Spin
-            class={loadingStyle}
-            indicator={
-              <LoadingOutlined style={{ fontSize: "40px", color: "#fff" }} />
-            }
-          />
-        )}
-      </>
-    );
+    return () => {
+      return (
+        <>
+          {state.loaded && (
+            <Canvas3d
+              pack={packRef.value}
+              onInit={(v) => {
+                state.loading = false;
+              }}
+            />
+          )}
+
+          {state.loading && (
+            <Spin
+              class={loadingStyle}
+              indicator={
+                <LoadingOutlined style={{ fontSize: "40px", color: "#fff" }} />
+              }
+            />
+          )}
+        </>
+      );
+    };
   },
 });
 
-const rootStyle = css`
-  padding: 30px;
-  background-color: red;
-`;
+// const rootStyle = css`
+//   padding: 30px;
+//   background-color: red;
+// `;
 
 const loadingStyle = css`
   position: absolute;

src/pages/frame3d/routes/index.ts

@@ -5,15 +5,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/",
     name: "Home",
     component: home,
-    children: [],
-  }
+  },
 ];
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
 });
 
-export const menuData = routes.find((e) => {
-  return e.name == "backend";
-});
 export default router;

src/pages/frame3d/style.less

@@ -1,8 +1,3 @@
 body {
-    background: transparent;
+  background-color: transparent;
 }
-
-#app {
-    width: 100%;
-    height: 100%;
-}

src/pages/website/routes/list/dialog.tsx

@@ -98,7 +98,7 @@ export default defineComponent({
     });
     const closeTimeStart = () => {
       closeTimeEnd();
-      closeRef.value = setTimeout(close, 30000);
+      // closeRef.value = setTimeout(close, 30000);
     };
     const messageCloseStart = (dialogId?: string) => {
       if (dialogId == props.data.id) {

src/styles/theme.less

@@ -24,3 +24,5 @@
 @inf-primary-hover-bg: #d8e4ff;
 
 @inf-header-height: 72px;
+@inf-mask-bg: fade(#000000, 50%);
+@inf-input-padding-inline: 0;

vue.config.js

@@ -13,18 +13,9 @@ const publicPath = "./";
 
 module.exports = defineConfig({
     pages: {
-        index: {
-            entry: 'src/pages/website/main.ts',
-            template: 'public/index.html',
-            filename: 'index.html',
-            chunks: ['chunk-vendors', 'chunk-common', 'index']
-        },
-        frame3d: {
-            entry: 'src/pages/frame3d/main.ts',
-            template: 'public/index.html',
-            filename: 'frame3d.html',
-            chunks: ['chunk-vendors', 'chunk-common', 'frame3d']
-        },
+        index: "src/pages/website/main.ts",
+        frame3d: "src/pages/frame3d/main.ts"
+
     },
     outputDir: "static",
     publicPath: publicPath,