init

src/pages/View.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="view-wrapper">
+    <div class="app-view">
+      <canvas id="renderDom"></canvas>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import MainEditor from "@/script/MainEditor";
+import { useCustomizationStore } from '@/stores/customization';
+import { onMounted } from 'vue';
+
+let mainEditor = new MainEditor();
+const customizationStore = useCustomizationStore();
+
+// 初始化定制化store
+onMounted(() => {
+  customizationStore.initializeLayers();
+});
+
+const createScene = async () => {
+  await mainEditor.Awake();
+}
+
+const loadModel = async (modelUrlList: Array<string>,animationUrlList: Array<string>, complete: Function) => {
+
+  mainEditor.loadModel({
+    modelUrlList:modelUrlList,
+    animationUrlList:animationUrlList,
+    success: () => {
+      complete();
+    },
+    error: (e: any) => {
+    },
+  });
+};
+
+const loadAnimation = async (animationUrlList: Array<string>, complete: Function) => {
+  mainEditor.loadAnimation({
+    animationUrlList:animationUrlList,
+    success: () => {
+      complete();
+    },
+  });
+};
+
+
+defineExpose({
+  createScene,
+  loadModel,
+  loadAnimation,
+});
+
+</script>
+
+<style scoped>
+.app-view {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  /* background-color: #efeff1; */
+  /* background: url("/resources/微信图片_20250512185835.jpg") no-repeat center center fixed; */
+  background-size: 100% 100%;
+}
+
+#renderDom {
+  width: 100%;
+  height: 100%;
+}
+
+#button {
+  width: 100px;
+  height: 60px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+}
+
+#mask {
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  pointer-events: none;
+}
+
+.time {
+  width: 150px;
+  height: 40px;
+  position: absolute;
+  top: 10px;
+  background-color: red;
+  left: 50%;
+  margin-left: -75px;
+  z-index: 99;
+  text-align: center;
+  font-size: 20px;
+  line-height: 40px;
+}
+</style>