完整基本业务逻辑

Signed-off-by: Nxiesi <305492881@qq.com>

package-lock.json

@@ -1167,6 +1167,11 @@
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.9.2.tgz?cache=0&sync_timestamp=1617290386990&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.9.2.tgz",
+      "integrity": "sha1-rep7aVPLs0ZRdmsFSEaOdDxqI1M="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz?cache=0&sync_timestamp=1607927398894&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.0.tgz",
@@ -1314,6 +1319,11 @@
       "integrity": "sha1-mKmTUWyFnrDVxMjwmDF6nqaNua0=",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.170",
+      "resolved": "https://registry.nlark.com/@types/lodash/download/@types/lodash-4.14.170.tgz",
+      "integrity": "sha1-DWdxHUv39MpRR+kJG4R0ebh5JdY="
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.nlark.com/@types/mime/download/@types/mime-1.3.2.tgz",
@@ -4163,6 +4173,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.nlark.com/dayjs/download/dayjs-1.10.5.tgz?cache=0&sync_timestamp=1622012194079&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdayjs%2Fdownload%2Fdayjs-1.10.5.tgz",
+      "integrity": "sha1-VgDfRUj8JFOz8WPrsqu+llzPuYY="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npm.taobao.org/debug/download/debug-4.3.1.tgz",
@@ -4649,6 +4664,28 @@
       "integrity": "sha1-8HdWqpLKvVpu7G9JFSWmT+YvmLk=",
       "dev": true
     },
+    "element-plus": {
+      "version": "1.0.2-beta.45",
+      "resolved": "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.45.tgz?cache=0&sync_timestamp=1622186069186&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felement-plus%2Fdownload%2Felement-plus-1.0.2-beta.45.tgz",
+      "integrity": "sha1-19hNKE6tT53lqnKJuaKvS38Qmh4=",
+      "requires": {
+        "@popperjs/core": "^2.4.4",
+        "@types/lodash": "^4.14.161",
+        "async-validator": "^3.4.0",
+        "dayjs": "1.x",
+        "lodash": "^4.17.20",
+        "mitt": "^2.1.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "dependencies": {
+        "async-validator": {
+          "version": "3.5.2",
+          "resolved": "https://registry.nlark.com/async-validator/download/async-validator-3.5.2.tgz",
+          "integrity": "sha1-aOhmqWgk6LJpT/eoMcGiXETV5QA="
+        }
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz?cache=0&sync_timestamp=1612290896983&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.4.tgz",
@@ -7185,8 +7222,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
-      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
-      "dev": true
+      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7538,6 +7574,11 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1594823915584&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz",
+      "integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA="
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npm.taobao.org/mixin-deep/download/mixin-deep-1.3.2.tgz",
@@ -7786,6 +7827,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9459,6 +9505,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-plus": "^1.0.2-beta.45",
     "three": "^0.128.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",

public/index.html

 <!DOCTYPE html>
-<html lang="en" style="overflow: hidden;">
+<html lang="en" style="overflow: hidden; height: 100%;">
 
 <head>
   <meta charset="utf-8">
@@ -11,12 +11,12 @@
   </title>
 </head>
 
-<body style="margin: 0px;">
+<body style="margin: 0px; height: 100%;">
   <noscript>
     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
   </noscript>
-  <div id="app"></div>
+  <div id="app" style="height: 100%;"></div>
   <!-- built files will be auto injected -->
 </body>
 

src/components/LoadFBX.vue

@@ -4,7 +4,6 @@
 
 <script>
 import * as THREE from "three";
-import Stats from "three/examples/jsm/libs/stats.module.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 
@@ -22,7 +21,7 @@ export default {
     );
 
     const container = document.getElementById("fbxdiv");
-    let camera, scene, renderer, stats;
+    let camera, scene, renderer;
     const clock = new THREE.Clock();
     let mixer;
 
@@ -102,8 +101,8 @@ export default {
       window.addEventListener("resize", onWindowResize);
 
       // stats
-      stats = new Stats();
-      container.appendChild(stats.dom);
+      //stats = new Stats();
+      //container.appendChild(stats.dom);
     };
 
     const onWindowResize = () => {
@@ -118,7 +117,7 @@ export default {
       const delta = clock.getDelta();
       if (mixer) mixer.update(delta);
       renderer.render(scene, camera);
-      stats.update();
+      //stats.update();
     };
 
     init();

src/main.js

 import { createApp } from "vue";
-//import App from "./App.vue";
 import Home from "./views/Home.vue";
-//import Fbx from "./views/LoadFBX.vue";
 import router from "./router";
 import store from "./store";
+import ElementPlus from 'element-plus';
+import 'element-plus/lib/theme-chalk/index.css';
 
-createApp(Home).use(store).use(router).mount("#app");
+createApp(Home).use(store).use(router).use(ElementPlus).mount("#app");

src/views/Home.vue

 <template>
-  <div class="home">
-    <div class="fbx">
-      <LoadFBX fbxfilepath="a.fbx"> </LoadFBX>
-    </div>
-  </div>
+  <el-container style="height: 100%">
+    <el-aside width="200px" style="overflow-x: hidden">
+      <el-menu>
+        <el-submenu index="1">
+          <template #title
+            ><i class="el-icon-message"> </i><span> 大分类A</span></template
+          >
+          <el-menu-item index="1-1">A.小分类a</el-menu-item>
+          <el-menu-item index="1-2">A.小分类b</el-menu-item>
+        </el-submenu>
+      </el-menu>
+    </el-aside>
+    <el-aside
+      style="
+        width: 200px;
+        height: 100%;
+        border: 1px solid #eee;
+        background-color: #ffe;
+        text-align: center;
+        vertical-align: middle;
+      "
+    >
+      模型列表 图片+名称
+    </el-aside>
+
+    <el-container>
+      <el-header style="text-align: center; font-size: 40px">
+        <span>可以添加属性,可以添加到项目,可以添加到打包集合</span>
+      </el-header>
+
+      <el-main>
+        <LoadFBX fbxfilepath="a.fbx"> </LoadFBX>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
@@ -18,8 +48,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.fbx {
-  width: 700px;
-  height: 400px;
+.el-main {
+  padding: 0px;
 }
 </style>
\ No newline at end of file