refactor: 欢迎页面重构

package-lock.json

@@ -1335,6 +1335,11 @@
         "has-flag": "^3.0.0"
       }
     },
+    "three": {
+      "version": "0.126.1",
+      "resolved": "http://192.168.250.101:4873/three/-/three-0.126.1.tgz",
+      "integrity": "sha1-z05OUgYP2VL28NVEDL1CLGa8S+c="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "http://192.168.250.101:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -1349,6 +1354,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "troisjs": {
+      "version": "0.1.19",
+      "resolved": "http://192.168.250.101:4873/troisjs/-/troisjs-0.1.19.tgz",
+      "integrity": "sha1-zQGFZQGu91Uwhe2AnynUTNGS3X4="
+    },
     "type": {
       "version": "1.2.0",
       "resolved": "http://192.168.250.101:4873/type/-/type-1.2.0.tgz",

package.json

@@ -19,6 +19,8 @@
     "path-to-regexp": "^6.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.1.0",
+    "three": "^0.126.1",
+    "troisjs": "^0.1.19",
     "v-contextmenu": "^3.0.0-alpha.4",
     "vue": "^3.0.7",
     "vue-i18n": "^9.0.0",

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import { TroisJSVuePlugin } from 'troisjs'
 
 // 内置ElementPlus
 import ElementPlus from 'element-plus'
@@ -41,7 +42,7 @@ export const getServerConfig = async (): Promise<any> => {
   return axios({
     baseURL: "",
     method: "get",
-    url: (app.config.globalProperties.$baseUrl || "/manages/") + "serverConfig.json"
+    url: (app.config.globalProperties.$baseUrl || "/") + "serverConfig.json"
   }).then(({ data: config }) => {
     let $config = app.config.globalProperties.$config
     // 自动注入项目配置
@@ -64,6 +65,7 @@ getServerConfig().then(() => {
     .use(i18n)
     .use(ElementPlus)
     .use(VXETable)
+    .use(TroisJSVuePlugin)
     .mount('#app')
 })
 

src/views/welcome.vue

@@ -1,26 +1,120 @@
 <template>
   <div class="welcome">
-    <a
+    <a title="欢迎Star" href="https://github.com/xiaoxian521/CURD-TS" target="_blank">点击打开仓库地址</a>
-      title="欢迎Star"
+    <Renderer
-      href="https://github.com/xiaoxian521/CURD-TS"
+      ref="renderer"
-      target="_blank"
+      antialias
-      >点击打开仓库地址</a
+      resize
+      :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"
     >
+      <Camera :position="{ x: -0, y: -100, z: 30 }" />
+      <Scene background="#ffffff">
+        <PointLight
+          ref="light1"
+          color="#0E09DC"
+          :intensity="0.85"
+          :position="{ x: 0, y: 0, z: 50 }"
+        />
+        <PointLight
+          ref="light2"
+          color="#1CD1E1"
+          :intensity="0.85"
+          :position="{ x: 0, y: 0, z: 50 }"
+        />
+        <PointLight
+          ref="light3"
+          color="#18C02C"
+          :intensity="0.85"
+          :position="{ x: 0, y: 0, z: 50 }"
+        />
+        <PointLight
+          ref="light4"
+          color="#ee3bcf"
+          :intensity="0.85"
+          :position="{ x: 0, y: 0, z: 50 }"
+        />
+
+        <NoisyPlane
+          :width="200"
+          :width-segments="100"
+          :height="200"
+          :height-segments="100"
+          :time-coef="0.0003"
+          :noise-coef="5"
+          :displacement-scale="15"
+          :delta-coef="1 / 200"
+          :position="{ x: 0, y: 0, z: 0 }"
+        >
+          <PhysicalMaterial />
+        </NoisyPlane>
+
+        <RefractionMesh ref="mesh" :position="{ x: 0, y: -20, z: 20 }" auto-update>
+          <TorusGeometry :radius="8" :tube="3" :radial-segments="8" :tubular-segments="6" />
+          <StandardMaterial color="#ffffff" :metalness="1" :roughness="0" flat-shading />
+        </RefractionMesh>
+      </Scene>
+    </Renderer>
   </div>
 </template>
 
 <script lang='ts'>
+import {
+  Camera,
+  PhysicalMaterial,
+  PointLight,
+  RefractionMesh,
+  Renderer,
+  Scene,
+  StandardMaterial,
+  TorusGeometry,
+} from "troisjs";
+import NoisyPlane from "troisjs/src/components/noisy/NoisyPlane.js";
+import NoisySphere from "troisjs/src/components/noisy/NoisySphere.js";
+import NoisyText from "troisjs/src/components/noisy/NoisyText.js";
 export default {
   name: "welcome",
+  components: {
+    Camera,
+    NoisyPlane,
+    NoisySphere,
+    NoisyText,
+    PhysicalMaterial,
+    PointLight,
+    RefractionMesh,
+    Renderer,
+    Scene,
+    StandardMaterial,
+    TorusGeometry,
+  },
+  mounted() {
+    const renderer = this.$refs.renderer;
+    const light1 = this.$refs.light1.light;
+    const light2 = this.$refs.light2.light;
+    const light3 = this.$refs.light3.light;
+    const light4 = this.$refs.light4.light;
+    const mesh = this.$refs.mesh.mesh;
+    renderer.onBeforeRender(() => {
+      const time = Date.now() * 0.001;
+      const d = 100;
+      light1.position.x = Math.sin(time * 0.1) * d;
+      light1.position.y = Math.cos(time * 0.2) * d;
+      light2.position.x = Math.cos(time * 0.3) * d;
+      light2.position.y = Math.sin(time * 0.4) * d;
+      light3.position.x = Math.sin(time * 0.5) * d;
+      light3.position.y = Math.sin(time * 0.6) * d;
+      light4.position.x = Math.sin(time * 0.7) * d;
+      light4.position.y = Math.cos(time * 0.8) * d;
+      mesh.rotation.x += 0.02;
+      mesh.rotation.y += 0.01;
+    });
+  },
 };
 </script>
 
 <style scoped>
 .welcome {
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  height: 100vh;
-  background: url("../assets/welcome.png") no-repeat center;
-  background-size: cover;
   position: absolute;
 }
 </style>