From f0f60e6e0471f41496e8998487aeaa4e00e61fbe Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Mon, 24 Jul 2023 22:30:49 +0800
Subject: [PATCH 01/19] feat: update basic chart

---
 .../src/components/chart/BasicBarChart.vue    |  2 +-
 .../chart/BasicCandlestickChart.vue           | 34 +++++++++++++++++--
 .../src/components/chart/BasicLineChart.vue   |  2 +-
 .../src/components/chart/BasicPieChart.vue    |  2 +-
 .../components/chart/BasicScatterChart.vue    |  2 +-
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/chart/BasicBarChart.vue b/frontend/src/components/chart/BasicBarChart.vue
index 42e347e8..33eb6cde 100644
--- a/frontend/src/components/chart/BasicBarChart.vue
+++ b/frontend/src/components/chart/BasicBarChart.vue
@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { BarChart, type BarSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<BarSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
diff --git a/frontend/src/components/chart/BasicCandlestickChart.vue b/frontend/src/components/chart/BasicCandlestickChart.vue
index a5d29a3b..e6400a4d 100644
--- a/frontend/src/components/chart/BasicCandlestickChart.vue
+++ b/frontend/src/components/chart/BasicCandlestickChart.vue
@@ -2,12 +2,13 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { CandlestickChart, type CandlestickSeriesOption } from 'echarts/charts'
-import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption } from 'echarts/components'
+import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
-type EchartsOptions = echarts.ComposeOption<CandlestickSeriesOption | GridComponentOption | TitleComponentOption>
+type EchartsOptions = echarts.ComposeOption<CandlestickSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
 
-echarts.use([CandlestickChart, GridComponent, TitleComponent, CanvasRenderer])
+echarts.use([CandlestickChart, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, LabelLayout, UniversalTransition, CanvasRenderer])
 
 const el = ref<HTMLDivElement | null>(null)
 
@@ -26,6 +27,32 @@ onMounted(() => {
           color: '#333',
         },
       },
+      legend: {
+        data: ['data'],
+        left: 'right',
+        top: 'bottom',
+        textStyle: {
+          color: '#999',
+        },
+      },
+      grid: {
+        top: '5%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
       xAxis: {
         data: ['A', 'B', 'C', 'D', 'E'],
       },
@@ -33,6 +60,7 @@ onMounted(() => {
       series: [
         {
           type: 'candlestick',
+          name: 'data',
           data: [
             [20, 34, 10, 38],
             [40, 35, 30, 50],
diff --git a/frontend/src/components/chart/BasicLineChart.vue b/frontend/src/components/chart/BasicLineChart.vue
index bcd65d85..7ab3c36c 100644
--- a/frontend/src/components/chart/BasicLineChart.vue
+++ b/frontend/src/components/chart/BasicLineChart.vue
@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { LineChart, type LineSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<LineSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
diff --git a/frontend/src/components/chart/BasicPieChart.vue b/frontend/src/components/chart/BasicPieChart.vue
index 510c1994..776e6523 100644
--- a/frontend/src/components/chart/BasicPieChart.vue
+++ b/frontend/src/components/chart/BasicPieChart.vue
@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { PieChart, type PieSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<PieSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
diff --git a/frontend/src/components/chart/BasicScatterChart.vue b/frontend/src/components/chart/BasicScatterChart.vue
index fba8a74d..e72ff864 100644
--- a/frontend/src/components/chart/BasicScatterChart.vue
+++ b/frontend/src/components/chart/BasicScatterChart.vue
@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { ScatterChart, type ScatterSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<ScatterSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>

From b6f2bc8e55910769b3b5f52f2edc5ac7c353a88f Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Mon, 24 Jul 2023 22:58:04 +0800
Subject: [PATCH 02/19] feat: create radar chart view

---
 frontend/src/layout/PageSidebar.vue     |  4 ++++
 frontend/src/locale/en-US.ts            |  1 +
 frontend/src/locale/zh-CN.ts            |  1 +
 frontend/src/router/index.ts            |  8 ++++++++
 frontend/src/views/chart/RadarChart.vue | 11 +++++++++++
 5 files changed, 25 insertions(+)
 create mode 100644 frontend/src/views/chart/RadarChart.vue

diff --git a/frontend/src/layout/PageSidebar.vue b/frontend/src/layout/PageSidebar.vue
index fad213d9..fd2010a4 100644
--- a/frontend/src/layout/PageSidebar.vue
+++ b/frontend/src/layout/PageSidebar.vue
@@ -129,6 +129,10 @@ watch(
           <el-icon><Histogram /></el-icon>
           <span>{{ i18n.t('router./chart/candlestick') }}</span>
         </el-menu-item>
+        <el-menu-item index="/chart/radar">
+          <el-icon><Histogram /></el-icon>
+          <span>{{ i18n.t('router./chart/radar') }}</span>
+        </el-menu-item>
       </el-sub-menu>
 
       <!-- 嵌套菜单 -->
diff --git a/frontend/src/locale/en-US.ts b/frontend/src/locale/en-US.ts
index 24e4a377..704da4e0 100644
--- a/frontend/src/locale/en-US.ts
+++ b/frontend/src/locale/en-US.ts
@@ -320,6 +320,7 @@ export default {
     '/chart/pie': 'Pie Chart',
     '/chart/scatter': 'Scatter Chart',
     '/chart/candlestick': 'Candlestick Chart',
+    '/chart/radar': 'Radar Chart',
     '/route': 'Menu',
     '/route/1': 'Menu-1',
     '/route/2': 'Menu-2',
diff --git a/frontend/src/locale/zh-CN.ts b/frontend/src/locale/zh-CN.ts
index 36c77293..1aad50c0 100644
--- a/frontend/src/locale/zh-CN.ts
+++ b/frontend/src/locale/zh-CN.ts
@@ -320,6 +320,7 @@ export default {
     '/chart/pie': '饼图',
     '/chart/scatter': '散点图',
     '/chart/candlestick': 'K 线图',
+    '/chart/radar': '雷达图',
     '/route': '菜单',
     '/route/1': '菜单-1',
     '/route/2': '菜单-2',
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f7fc3474..3d5b11f2 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -189,6 +189,14 @@ const router = createRouter({
                 isView: true,
               },
             },
+            {
+              name: Symbol('/chart/radar'),
+              path: '/chart/radar',
+              component: () => import('@/views/chart/RadarChart.vue'),
+              meta: {
+                isView: true,
+              },
+            },
           ],
         },
 
diff --git a/frontend/src/views/chart/RadarChart.vue b/frontend/src/views/chart/RadarChart.vue
new file mode 100644
index 00000000..f92834ea
--- /dev/null
+++ b/frontend/src/views/chart/RadarChart.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ElSpace } from 'element-plus'
+</script>
+
+<template>
+  <el-space direction="vertical">
+    <div>chart</div>
+  </el-space>
+</template>
+
+<style scoped lang="scss"></style>

From 41743ecc285017bd4344fe2f34d045bf8ae952e4 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Mon, 24 Jul 2023 23:28:09 +0800
Subject: [PATCH 03/19] feat: add example radar chart

---
 .../src/components/chart/BasicRadarChart.vue  | 109 ++++++++++++++++++
 frontend/src/components/chart/index.ts        |   2 +
 frontend/src/views/chart/RadarChart.vue       |   3 +-
 3 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/chart/BasicRadarChart.vue

diff --git a/frontend/src/components/chart/BasicRadarChart.vue b/frontend/src/components/chart/BasicRadarChart.vue
new file mode 100644
index 00000000..95e413de
--- /dev/null
+++ b/frontend/src/components/chart/BasicRadarChart.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import * as echarts from 'echarts/core'
+import { RadarChart, type RadarSeriesOption } from 'echarts/charts'
+import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+type EchartsOptions = echarts.ComposeOption<RadarSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
+
+echarts.use([RadarChart, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, LabelLayout, UniversalTransition, CanvasRenderer])
+
+const el = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  echarts
+    .init(el.value as HTMLDivElement, 'light', {
+      width: 1000,
+      height: 600,
+    })
+    .setOption<EchartsOptions>({
+      title: {
+        text: 'Simple Radar Chart',
+        left: 'center',
+        top: 'top',
+        textStyle: {
+          color: '#999',
+        },
+      },
+      legend: {
+        data: ['dataA', 'dataB'],
+        left: 'right',
+        top: 'bottom',
+        textStyle: {
+          color: '#999',
+        },
+      },
+      grid: {
+        top: '5%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      radar: {
+        indicator: [
+          {
+            name: 'A',
+          },
+          {
+            name: 'B',
+          },
+          {
+            name: 'C',
+          },
+          {
+            name: 'D',
+          },
+          {
+            name: 'E',
+          },
+          {
+            name: 'F',
+          },
+          {
+            name: 'G',
+          },
+        ],
+      },
+      series: [
+        {
+          type: 'radar',
+          name: 'data',
+          data: [
+            {
+              name: 'dataA',
+              value: [20, 34, 10, 38, 45, 23, 21],
+            },
+            {
+              name: 'dataB',
+              value: [40, 17, 20, 19, 22, 12, 32],
+            },
+          ],
+        },
+      ],
+    })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(el.value as HTMLDivElement)?.dispose()
+})
+</script>
+
+<template>
+  <div ref="el" style="width: 1000px; height: 600px"></div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/chart/index.ts b/frontend/src/components/chart/index.ts
index a6b3e328..b5cdf7a7 100644
--- a/frontend/src/components/chart/index.ts
+++ b/frontend/src/components/chart/index.ts
@@ -6,4 +6,6 @@ export { default as BasicLineChart } from './BasicLineChart.vue'
 
 export { default as BasicPieChart } from './BasicPieChart.vue'
 
+export { default as BasicRadarChart } from './BasicRadarChart.vue'
+
 export { default as BasicScatterChart } from './BasicScatterChart.vue'
diff --git a/frontend/src/views/chart/RadarChart.vue b/frontend/src/views/chart/RadarChart.vue
index f92834ea..e2704287 100644
--- a/frontend/src/views/chart/RadarChart.vue
+++ b/frontend/src/views/chart/RadarChart.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ElSpace } from 'element-plus'
+import { BasicRadarChart } from '@/components'
 </script>
 
 <template>
   <el-space direction="vertical">
-    <div>chart</div>
+    <basic-radar-chart />
   </el-space>
 </template>
 

From 8336d723c56f468fde210040b27775f0f5f97ced Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Tue, 25 Jul 2023 23:29:59 +0800
Subject: [PATCH 04/19] feat: create great raining effect view

---
 frontend/src/layout/PageSidebar.vue          |  4 ++
 frontend/src/locale/en-US.ts                 |  1 +
 frontend/src/locale/zh-CN.ts                 |  1 +
 frontend/src/router/index.ts                 |  8 +++
 frontend/src/views/3D/GreatRainingEffect.vue | 71 ++++++++++++++++++++
 5 files changed, 85 insertions(+)
 create mode 100644 frontend/src/views/3D/GreatRainingEffect.vue

diff --git a/frontend/src/layout/PageSidebar.vue b/frontend/src/layout/PageSidebar.vue
index fd2010a4..e93cfad9 100644
--- a/frontend/src/layout/PageSidebar.vue
+++ b/frontend/src/layout/PageSidebar.vue
@@ -309,6 +309,10 @@ watch(
           <el-icon><Box /></el-icon>
           <span>{{ i18n.t('router./3d/raining-effect') }}</span>
         </el-menu-item>
+        <el-menu-item index="/3d/great-raining-effect">
+          <el-icon><Box /></el-icon>
+          <span>{{ i18n.t('router./3d/great-raining-effect') }}</span>
+        </el-menu-item>
         <el-menu-item index="/3d/earth">
           <el-icon><Box /></el-icon>
           <span>{{ i18n.t('router./3d/earth') }}</span>
diff --git a/frontend/src/locale/en-US.ts b/frontend/src/locale/en-US.ts
index 704da4e0..9b4113b2 100644
--- a/frontend/src/locale/en-US.ts
+++ b/frontend/src/locale/en-US.ts
@@ -360,6 +360,7 @@ export default {
     '/3d/video-box': 'Video Box',
     '/3d/mirror-text': 'Mirror Text',
     '/3d/raining-effect': 'Raining Effect',
+    '/3d/great-raining-effect': 'Raining Effect Plus',
     '/3d/earth': '3D Earth',
     '/3d/active-building': 'Active Building',
     '/3d/rotation-circle': 'Rotation Circle',
diff --git a/frontend/src/locale/zh-CN.ts b/frontend/src/locale/zh-CN.ts
index 1aad50c0..93fff651 100644
--- a/frontend/src/locale/zh-CN.ts
+++ b/frontend/src/locale/zh-CN.ts
@@ -360,6 +360,7 @@ export default {
     '/3d/video-box': '视频盒子',
     '/3d/mirror-text': '镜像文字',
     '/3d/raining-effect': '下雨效果',
+    '/3d/great-raining-effect': '下雨效果 Plus',
     '/3d/earth': '3D 地球',
     '/3d/active-building': '活动建筑',
     '/3d/rotation-circle': '旋转圆圈',
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3d5b11f2..47835064 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -525,6 +525,14 @@ const router = createRouter({
                 isView: true,
               },
             },
+            {
+              name: Symbol('/3d/great-raining-effect'),
+              path: '/3d/great-raining-effect',
+              component: () => import('@/views/3D/GreatRainingEffect.vue'),
+              meta: {
+                isView: true,
+              },
+            },
             {
               name: Symbol('/3d/earth'),
               path: '/3d/earth',
diff --git a/frontend/src/views/3D/GreatRainingEffect.vue b/frontend/src/views/3D/GreatRainingEffect.vue
new file mode 100644
index 00000000..09b7f43e
--- /dev/null
+++ b/frontend/src/views/3D/GreatRainingEffect.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+// @ts-expect-error can not find type definition for this file
+import Stats from 'three/addons/libs/stats.module'
+// @ts-expect-error can not find type definition for this file
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { useEventListener } from '@sky-fly/shooks'
+
+const container = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  const render = (): void => {
+    controls.update()
+    stats.update()
+    renderer.render(scene, camera)
+  }
+
+  if (container.value === null) return
+
+  const { width, height } = container.value.getBoundingClientRect()
+
+  const stats = new Stats()
+  stats.domElement.style.position = 'absolute'
+  stats.domElement.style.top = '0'
+  container.value.appendChild(stats.domElement)
+
+  const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+  camera.position.set(0, 0, 40)
+  camera.up.set(0, 1, 0)
+  camera.lookAt(0, 0, 0)
+
+  const scene = new Scene()
+
+  const renderer = new WebGLRenderer()
+  renderer.setSize(width, height)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setAnimationLoop(render)
+
+  container.value.appendChild(renderer.domElement)
+
+  const controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.enableZoom = true
+  controls.autoRotate = false
+  controls.enablePan = true
+
+  useEventListener(window, 'resize', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
+})
+</script>
+
+<template>
+  <div id="container" ref="container"></div>
+</template>
+
+<style scoped lang="scss">
+#container {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 60px - 40px - 60px);
+}
+</style>

From b7d48817ef4a5b89cc1bf9b85d1f67990eff6099 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Tue, 25 Jul 2023 23:42:45 +0800
Subject: [PATCH 05/19] style: small as three demo template

---
 frontend/src/views/3D/RainingEffect.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/3D/RainingEffect.vue b/frontend/src/views/3D/RainingEffect.vue
index 7aab410e..2327206e 100644
--- a/frontend/src/views/3D/RainingEffect.vue
+++ b/frontend/src/views/3D/RainingEffect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { AdditiveBlending, BufferAttribute, BufferGeometry, PerspectiveCamera, Points, PointsMaterial, Scene, TextureLoader, WebGLRenderer } from 'three'
+import { AdditiveBlending, BufferAttribute, BufferGeometry, Color, PerspectiveCamera, Points, PointsMaterial, Scene, TextureLoader, WebGLRenderer } from 'three'
 // @ts-expect-error can not find type definition for this file
 import Stats from 'three/addons/libs/stats.module'
 // @ts-expect-error can not find type definition for this file
@@ -37,6 +37,7 @@ onMounted(() => {
   const stats = new Stats()
   stats.domElement.style.position = 'absolute'
   stats.domElement.style.top = '0'
+  stats.domElement.style.left = '0'
   container.value.appendChild(stats.domElement)
 
   const camera = new PerspectiveCamera(45, width / height, 1, 1000)
@@ -45,6 +46,7 @@ onMounted(() => {
   camera.lookAt(0, 0, 0)
 
   const scene = new Scene()
+  scene.background = new Color(0x000000)
 
   const renderer = new WebGLRenderer()
   renderer.setSize(width, height)
@@ -95,6 +97,17 @@ onMounted(() => {
     renderer.setSize(width, height)
     renderer.setPixelRatio(window.devicePixelRatio)
   })
+
+  useEventListener(window, 'orientationchange', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
 })
 </script>
 

From 3066075b782a9e9a046802c43e2b7b91f7bcebf9 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Wed, 26 Jul 2023 14:40:28 +0800
Subject: [PATCH 06/19] build: update ts config

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index 40a8fbcc..4dfaeb30 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": ["ESNext"],
     "target": "ESNext",
     "useDefineForClassFields": false,

From 3403f0151a72118ce178945d9b399fefdf2fd7fa Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Wed, 26 Jul 2023 23:56:53 +0800
Subject: [PATCH 07/19] feat: generate terrine support

---
 frontend/src/views/3D/GreatRainingEffect.vue | 111 ++++++++++++++++++-
 1 file changed, 108 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/3D/GreatRainingEffect.vue b/frontend/src/views/3D/GreatRainingEffect.vue
index 09b7f43e..62a29ad7 100644
--- a/frontend/src/views/3D/GreatRainingEffect.vue
+++ b/frontend/src/views/3D/GreatRainingEffect.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import { AxesHelper, CanvasTexture, ClampToEdgeWrapping, Color, DoubleSide, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, Vector3, WebGLRenderer } from 'three'
 // @ts-expect-error can not find type definition for this file
 import Stats from 'three/addons/libs/stats.module'
 // @ts-expect-error can not find type definition for this file
+import { ImprovedNoise } from 'three/addons/math/ImprovedNoise'
+// @ts-expect-error can not find type definition for this file
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 import { useEventListener } from '@sky-fly/shooks'
 
@@ -23,14 +25,16 @@ onMounted(() => {
   const stats = new Stats()
   stats.domElement.style.position = 'absolute'
   stats.domElement.style.top = '0'
+  stats.domElement.style.left = '0'
   container.value.appendChild(stats.domElement)
 
-  const camera = new PerspectiveCamera(45, width / height, 1, 1000)
-  camera.position.set(0, 0, 40)
+  const camera = new PerspectiveCamera(45, width / height, 1, 150000)
+  camera.position.set(10000, 10000, 10000)
   camera.up.set(0, 1, 0)
   camera.lookAt(0, 0, 0)
 
   const scene = new Scene()
+  scene.background = new Color(0x333333)
 
   const renderer = new WebGLRenderer()
   renderer.setSize(width, height)
@@ -39,12 +43,102 @@ onMounted(() => {
 
   container.value.appendChild(renderer.domElement)
 
+  const axes = new AxesHelper()
+  scene.add(axes)
+
   const controls = new OrbitControls(camera, renderer.domElement)
   controls.enableDamping = true
   controls.enableZoom = true
   controls.autoRotate = false
   controls.enablePan = true
 
+  const noise = new ImprovedNoise()
+  const data = new Uint8Array(256 * 256)
+  for (let j = 0, k = Math.random() * 100, quality = 1; j < 4; ++j, quality *= 5) {
+    for (let i = 0; i < 256 * 256; ++i) {
+      // eslint-disable-next-line security/detect-object-injection
+      data[i] += Math.abs(noise.noise((i % 256) / quality, ~~(i / 256) / quality, k) * quality * 1.75)
+    }
+  }
+
+  const geometry = new PlaneGeometry(7500, 7500, 255, 255)
+  geometry.rotateX(-Math.PI / 2)
+
+  const vertices = geometry.attributes.position.array
+  for (let i = 0, j = 0, l = vertices.length; i < l; ++i, j += 3) {
+    // eslint-disable-next-line security/detect-object-injection
+    vertices[j + 1] = data[i] * 10
+  }
+
+  const vector = new Vector3(0, 0, 0)
+  const sun = new Vector3(1, 1, 1).normalize()
+
+  const canvas = document.createElement('canvas')
+  canvas.width = 256
+  canvas.height = 256
+
+  const context = canvas.getContext('2d')
+  if (context === null) return
+  context.fillStyle = '#000'
+  context.fillRect(0, 0, 256, 256)
+
+  const image = context.getImageData(0, 0, canvas.width, canvas.height)
+  const imageData = image.data
+
+  for (let i = 0, j = 0, l = imageData.length; i < l; i += 4, ++j) {
+    vector.x = data[j - 2] - data[j + 2]
+    vector.y = 2
+    vector.z = data[j - 256 * 2] - data[j + 256 * 2]
+    vector.normalize()
+
+    const shade = vector.dot(sun)
+
+    // eslint-disable-next-line security/detect-object-injection
+    imageData[i] = (96 + shade * 128) * (0.5 + data[j] * 0.007)
+    // eslint-disable-next-line security/detect-object-injection
+    imageData[i + 1] = (32 + shade * 96) * (0.5 + data[j] * 0.007)
+    // eslint-disable-next-line security/detect-object-injection
+    imageData[i + 2] = shade * 96 * (0.5 + data[j] * 0.007)
+  }
+
+  context.putImageData(image, 0, 0)
+
+  const canva = document.createElement('canvas')
+  canva.width = 256 * 4
+  canva.height = 256 * 4
+
+  const contex = canva.getContext('2d')
+  if (contex === null) return
+  contex.scale(4, 4)
+  contex.drawImage(canvas, 0, 0)
+
+  const imag = contex.getImageData(0, 0, canva.width, canva.height)
+  const imagDat = imag.data
+
+  for (let i = 0, l = imagDat.length; i < l; i += 4) {
+    const v = ~~(Math.random() * 5)
+
+    // eslint-disable-next-line security/detect-object-injection
+    imagDat[i] += v
+    imagDat[i + 1] += v
+    imagDat[i + 2] += v
+  }
+
+  contex.putImageData(imag, 0, 0)
+
+  const texture = new CanvasTexture(canva)
+  texture.wrapS = ClampToEdgeWrapping
+  texture.wrapT = ClampToEdgeWrapping
+
+  const mesh = new Mesh(
+    geometry,
+    new MeshBasicMaterial({
+      map: texture,
+      side: DoubleSide,
+    })
+  )
+  scene.add(mesh)
+
   useEventListener(window, 'resize', () => {
     if (container.value === null) return
 
@@ -55,6 +149,17 @@ onMounted(() => {
     renderer.setSize(width, height)
     renderer.setPixelRatio(window.devicePixelRatio)
   })
+
+  useEventListener(window, 'orientationchange', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
 })
 </script>
 

From db409522f557c4d7124dd72012f874d0e028d410 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Thu, 27 Jul 2023 00:27:31 +0800
Subject: [PATCH 08/19] feat: support generate rain

---
 frontend/src/assets/color.png                | Bin 0 -> 1492 bytes
 frontend/src/assets/index.ts                 |   2 +
 frontend/src/views/3D/GreatRainingEffect.vue |  97 ++++++++++++++++++-
 3 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/assets/color.png

diff --git a/frontend/src/assets/color.png b/frontend/src/assets/color.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a5b17d788f5ec945467b7c60892a53dadf45819
GIT binary patch
literal 1492
zcmeAS@N?(olHy`uVBq!ia0vp@K-|E=1|%;WeOv{kBuiW)N`mv#O3D+9QW+dm@{>{(
zJaZG%Q-e|yQz{EjrrIztFso&TM3hAM`dB6B=jtVb)aX^@765fKFxc2v6eK2Rr<N!r
zrKV@**($x?y<bToGsRXZ+|<{=x4=0yBh#a*C^fjsFC@7tJJ~Wt$=*)EroswnKyGSD
zqC!P(PF}H9g{>0UTq__OB&@Hb09I0xZL0)vRD^GUf^&XRs)DJWnQpS7iK&9QrJkXg
zv5BRnj)IYap@qJIg}$M&uA!NgiGh`okpdJb0c|TvNwW%aaf8|g<k>1^l#~=$>Fbx5
zm+O@q>*W`v>l<2HTIw4Z=^Gj80#)c1SLT%@R_NvxE5l51Ni9w;$}A|!%+FH*nV6WA
zUs__T1av9H3%LbwWAlok!2}F2{ffi_eM3D1ke6TzeSPsO&CP|YE-nd5MYtEM!Nnn!
z1*!T$sm1xFMajU3OH&3}Rbb^@l$uzQUlfv`p92fUfQ<Z-{NjxK0tIJhP^eidXoP3x
zrR0|vYl8Lo`dWGB6_+IDC8v72*eU@{(aX$Cu`+jbvT(96F>rQrHZnAHb#!tyHFq&E
zaWOS<Gd6ZLae?V|$xklLP0cHT=}kfCHN>eGlpJykfHu3N7G;*DrnnX5=PH1`ZIy}B
zEyk`m&4cPq!RZ!bH=KI)fsWA!MJ`fg!-Rk-2*iXZT_6XZ_*3(MDZU7pw9{63{$^lc
za`AL=45_$vCeqQ5*^sAa^4=-opC$PIEZ*Os{D?p1)CSkJ5w3F8LPZ%%SFDv<Klx;Z
z%x<;?J^Qj|R@m;ic&&DOf}V}?>z+4e7x~y;^u9XC@kCMl8RxmU_s6cR_%6nDv2S*-
zL*k3bFAcgD#wUY)r>V~kPMoK#Y@o8&b|!N<7t5~m%PN{am!!OiWI3c!_447j6H`wF
zD;g*(zcI9V@WCK9j%z2Yhm>(vpLl2WMe8dSPH9(UDptE|_q+Xd(dc0aTxw7>vGBre
zVeZndd93NG?YmhlJ4#L_X|gA3{ZoF?n)SrUAvUgXMM`AdCP`DNX$EC}UkY?NzE4{C
zTynQV4(FZ3pv^j`t9ugOn6*~B?ySja;Y>9%nediV<#e)SZ`1-_=XpV`bNPA`-)+75
z)X>pTbnl{!Ba;fI3zc@e#0#Ddm}l$XT5+()?Zn3^diho+)8<ZYiE~+6QkmeY&g`Vu
zdQ0bt*q!9-j`x~W9aAmcBpH{lm=fH3ghNGj-kd87+S<ZjEwwa%v>>GRRL=zNDXXSD
z@IGAoVpg!HhEIFjoUA3A7EU~!C-v^4YTe!5r}10a(#~bB;K_H9_sL~+d|P7@G)Ls?
zoVK22LJh}FS1wAkowllkbIG=86a7M?+T48)F8nQbWt-TXZ(1RDH(#{nWmSCr-m_L&
z<MieQ>6-DyDyEwj<ZM`Kd;0ymbJwL~_SDvtBwT5BioI`dyZCxu()nN0?L8WPSKK;Y
zDKDNrCx8F{bGA~k$1~;6|E{=w{JPz}{QLgLE5F^S|L}*yfMMHbLHoySPAfp=tf#A=
J%Q~loCIDLWD$)P|

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/index.ts b/frontend/src/assets/index.ts
index 08e0566e..1c36f562 100644
--- a/frontend/src/assets/index.ts
+++ b/frontend/src/assets/index.ts
@@ -2,6 +2,8 @@ export { default as avatar } from './avatar.jpg'
 
 export { default as building } from './building.glb?url'
 
+export { default as color } from './color.png'
+
 export { default as earth_bump } from './earth_bump.png'
 
 export { default as earth_cloud } from './earth_cloud.png'
diff --git a/frontend/src/views/3D/GreatRainingEffect.vue b/frontend/src/views/3D/GreatRainingEffect.vue
index 62a29ad7..e25d0a9d 100644
--- a/frontend/src/views/3D/GreatRainingEffect.vue
+++ b/frontend/src/views/3D/GreatRainingEffect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { AxesHelper, CanvasTexture, ClampToEdgeWrapping, Color, DoubleSide, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, Vector3, WebGLRenderer } from 'three'
+import { AxesHelper, Box3, BufferAttribute, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Color, DoubleSide, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, TextureLoader, Vector3, WebGLRenderer } from 'three'
 // @ts-expect-error can not find type definition for this file
 import Stats from 'three/addons/libs/stats.module'
 // @ts-expect-error can not find type definition for this file
@@ -8,6 +8,7 @@ import { ImprovedNoise } from 'three/addons/math/ImprovedNoise'
 // @ts-expect-error can not find type definition for this file
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 import { useEventListener } from '@sky-fly/shooks'
+import { color } from '@/assets'
 
 const container = ref<HTMLDivElement | null>(null)
 
@@ -52,6 +53,100 @@ onMounted(() => {
   controls.autoRotate = false
   controls.enablePan = true
 
+  const loader = new TextureLoader()
+
+  const box = new Box3(new Vector3(-4000, 0, -4000), new Vector3(4000, 5000, 4000))
+
+  const rainMaterial = new MeshBasicMaterial({
+    transparent: true,
+    opacity: 0.8,
+    map: loader.load(new URL(color, import.meta.url).href),
+    depthWrite: false,
+  })
+
+  rainMaterial.onBeforeCompile = (shader) => {
+    const getRoot = `
+            uniform float top;
+            uniform float bottom;
+            uniform float time;
+            #include <common>
+            float angle(float x, float y){
+              return atan(y, x);
+            }
+            vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){
+                vec2 position;
+
+                float distanceLen = distance(pos, normal);
+
+                float a = angle(camera.x - normal.x, camera.y - normal.y);
+
+                pos.x > normal.x ? a -= 0.785 : a += 0.785; 
+
+                position.x = cos(a) * distanceLen;
+                position.y = sin(a) * distanceLen;
+                
+                return position + normal;
+            }
+            `
+    const beginVertex = `
+            vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z),  vec2(normal.x, normal.z), vec2(position.x, position.z));
+            float height = top - bottom;
+            float y = normal.y - bottom - height * time;
+            y = y + (y < 0.0 ? height : 0.0);
+            float ratio = (1.0 - y / height) * (1.0 - y / height);
+            y = height * (1.0 - ratio);
+            y += bottom;
+            y += position.y - normal.y;
+            vec3 transformed = vec3( foot.x, y, foot.y );
+            // vec3 transformed = vec3( position );
+            `
+    shader.vertexShader = shader.vertexShader.replace('#include <common>', getRoot)
+    shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>', beginVertex)
+
+    shader.uniforms.cameraPosition = {
+      value: new Vector3(0, 200, 0),
+    }
+    shader.uniforms.top = {
+      value: 500,
+    }
+    shader.uniforms.bottom = {
+      value: 0,
+    }
+    shader.uniforms.time = {
+      value: 0,
+    }
+    rainMaterial.uniforms = shader.uniforms
+  }
+
+  const rainGeometry = new BufferGeometry()
+
+  const verties = []
+  const normals = []
+  const uvs = []
+  const indices = []
+
+  for (let i = 0; i < 10000; ++i) {
+    const pos = new Vector3()
+    pos.x = Math.random() * (box.max.x - box.min.x) + box.min.x
+    pos.y = Math.random() * (box.max.y - box.min.y) + box.min.y
+    pos.z = Math.random() * (box.max.z - box.min.z) + box.min.z
+
+    const height = (box.max.y - box.min.y) / 15
+    const width = height / 50
+    verties.push(pos.x + width, pos.y + height / 2, pos.z, pos.x - width, pos.y + height / 2, pos.z, pos.x - width, pos.y - height / 2, pos.z, pos.x + width, pos.y - height / 2, pos.z)
+    normals.push(pos.x, pos.y, pos.z, pos.x, pos.y, pos.z, pos.x, pos.y, pos.z, pos.x, pos.y, pos.z)
+    uvs.push(1, 1, 0, 1, 0, 0, 1, 0)
+    indices.push(i * 4 + 0, i * 4 + 1, i * 4 + 2, i * 4 + 0, i * 4 + 2, i * 4 + 3)
+  }
+
+  rainGeometry.setAttribute('position', new BufferAttribute(new Float32Array(verties), 3))
+  rainGeometry.setAttribute('normal', new BufferAttribute(new Float32Array(normals), 3))
+  rainGeometry.setAttribute('uv', new BufferAttribute(new Float32Array(uvs), 2))
+  rainGeometry.setIndex(new BufferAttribute(new Uint32Array(indices), 1))
+
+  const rainMesh = new Mesh(rainGeometry, rainMaterial)
+  scene.add(rainMesh)
+
   const noise = new ImprovedNoise()
   const data = new Uint8Array(256 * 256)
   for (let j = 0, k = Math.random() * 100, quality = 1; j < 4; ++j, quality *= 5) {

From 7d55eb77e0c140e81229d6227d82d0797df925f5 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Thu, 27 Jul 2023 00:37:32 +0800
Subject: [PATCH 09/19] feat: animate support

---
 frontend/src/views/3D/GreatRainingEffect.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/3D/GreatRainingEffect.vue b/frontend/src/views/3D/GreatRainingEffect.vue
index e25d0a9d..68fb8a2d 100644
--- a/frontend/src/views/3D/GreatRainingEffect.vue
+++ b/frontend/src/views/3D/GreatRainingEffect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { AxesHelper, Box3, BufferAttribute, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Color, DoubleSide, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, TextureLoader, Vector3, WebGLRenderer } from 'three'
+import { AxesHelper, Box3, BufferAttribute, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Clock, Color, DoubleSide, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, TextureLoader, Vector3, WebGLRenderer } from 'three'
 // @ts-expect-error can not find type definition for this file
 import Stats from 'three/addons/libs/stats.module'
 // @ts-expect-error can not find type definition for this file
@@ -13,7 +13,19 @@ import { color } from '@/assets'
 const container = ref<HTMLDivElement | null>(null)
 
 onMounted(() => {
+  let time = 0
+  const clock = new Clock()
+
   const render = (): void => {
+    time = (time + clock.getDelta() * 0.4) % 1
+
+    rainMaterial.cameraPosition = camera.position
+
+    if (rainMaterial.uniforms) {
+      rainMaterial.uniforms.cameraPosition.value = camera.position
+      rainMaterial.uniforms.time.value = time
+    }
+
     controls.update()
     stats.update()
     renderer.render(scene, camera)

From 6f2195c76e7d9f9dfef1fd0440ea528330b99c2d Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Thu, 27 Jul 2023 00:55:50 +0800
Subject: [PATCH 10/19] fix: disable some error

---
 frontend/src/views/3D/GreatRainingEffect.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/3D/GreatRainingEffect.vue b/frontend/src/views/3D/GreatRainingEffect.vue
index 68fb8a2d..ca1a7474 100644
--- a/frontend/src/views/3D/GreatRainingEffect.vue
+++ b/frontend/src/views/3D/GreatRainingEffect.vue
@@ -19,10 +19,14 @@ onMounted(() => {
   const render = (): void => {
     time = (time + clock.getDelta() * 0.4) % 1
 
+    // @ts-expect-error not existed property
     rainMaterial.cameraPosition = camera.position
 
-    if (rainMaterial.uniforms) {
+    // @ts-expect-error not existed property
+    if (rainMaterial.uniforms != null) {
+      // @ts-expect-error not existed property
       rainMaterial.uniforms.cameraPosition.value = camera.position
+      // @ts-expect-error not existed property
       rainMaterial.uniforms.time.value = time
     }
 
@@ -127,6 +131,7 @@ onMounted(() => {
     shader.uniforms.time = {
       value: 0,
     }
+    // @ts-expect-error not existed property
     rainMaterial.uniforms = shader.uniforms
   }
 

From df1f524e899cfd9095b7caf3d3419f413773e065 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Thu, 27 Jul 2023 20:49:13 +0800
Subject: [PATCH 11/19] feat: add bloom effect view

---
 frontend/src/layout/PageSidebar.vue   |  4 ++
 frontend/src/locale/en-US.ts          |  1 +
 frontend/src/locale/zh-CN.ts          |  1 +
 frontend/src/router/index.ts          |  8 +++
 frontend/src/views/3D/BloomEffect.vue | 84 +++++++++++++++++++++++++++
 5 files changed, 98 insertions(+)
 create mode 100644 frontend/src/views/3D/BloomEffect.vue

diff --git a/frontend/src/layout/PageSidebar.vue b/frontend/src/layout/PageSidebar.vue
index e93cfad9..f1356e0f 100644
--- a/frontend/src/layout/PageSidebar.vue
+++ b/frontend/src/layout/PageSidebar.vue
@@ -321,6 +321,10 @@ watch(
           <el-icon><Box /></el-icon>
           <span>{{ i18n.t('router./3d/active-building') }}</span>
         </el-menu-item>
+        <el-menu-item index="/3d/bloom-effect">
+          <el-icon><Box /></el-icon>
+          <span>{{ i18n.t('router./3d/bloom-effect') }}</span>
+        </el-menu-item>
         <el-menu-item index="/3d/rotation-circle">
           <el-icon><Box /></el-icon>
           <span>{{ i18n.t('router./3d/rotation-circle') }}</span>
diff --git a/frontend/src/locale/en-US.ts b/frontend/src/locale/en-US.ts
index 9b4113b2..6eebafa0 100644
--- a/frontend/src/locale/en-US.ts
+++ b/frontend/src/locale/en-US.ts
@@ -363,6 +363,7 @@ export default {
     '/3d/great-raining-effect': 'Raining Effect Plus',
     '/3d/earth': '3D Earth',
     '/3d/active-building': 'Active Building',
+    '/3d/bloom-effect': 'Bloom Effect',
     '/3d/rotation-circle': 'Rotation Circle',
     '/monitor': 'Monitor',
     '/monitor/performance': 'Performance',
diff --git a/frontend/src/locale/zh-CN.ts b/frontend/src/locale/zh-CN.ts
index 93fff651..cd7ca8d2 100644
--- a/frontend/src/locale/zh-CN.ts
+++ b/frontend/src/locale/zh-CN.ts
@@ -363,6 +363,7 @@ export default {
     '/3d/great-raining-effect': '下雨效果 Plus',
     '/3d/earth': '3D 地球',
     '/3d/active-building': '活动建筑',
+    '/3d/bloom-effect': '爆炸效果',
     '/3d/rotation-circle': '旋转圆圈',
     '/monitor': '系统监控',
     '/monitor/performance': '系统性能',
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 47835064..2ce3c207 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -549,6 +549,14 @@ const router = createRouter({
                 isView: true,
               },
             },
+            {
+              name: Symbol('/3d/bloom-effect'),
+              path: '/3d/bloom-effect',
+              component: () => import('@/views/3D/BloomEffect.vue'),
+              meta: {
+                isView: true,
+              },
+            },
             {
               name: Symbol('/3d/rotation-circle'),
               path: '/3d/rotation-circle',
diff --git a/frontend/src/views/3D/BloomEffect.vue b/frontend/src/views/3D/BloomEffect.vue
new file mode 100644
index 00000000..aad091c9
--- /dev/null
+++ b/frontend/src/views/3D/BloomEffect.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Color, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+// @ts-expect-error can not find type definition for this file
+import Stats from 'three/addons/libs/stats.module'
+// @ts-expect-error can not find type definition for this file
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { useEventListener } from '@sky-fly/shooks'
+
+const container = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  const render = (): void => {
+    controls.update()
+    stats.update()
+    renderer.render(scene, camera)
+  }
+
+  if (container.value === null) return
+
+  const { width, height } = container.value.getBoundingClientRect()
+
+  const stats = new Stats()
+  stats.domElement.style.position = 'absolute'
+  stats.domElement.style.top = '0'
+  stats.domElement.style.left = '0'
+  container.value.appendChild(stats.domElement)
+
+  const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+  camera.position.set(0, 0, 40)
+  camera.up.set(0, 1, 0)
+  camera.lookAt(0, 0, 0)
+
+  const scene = new Scene()
+  scene.background = new Color(0x000000)
+
+  const renderer = new WebGLRenderer()
+  renderer.setSize(width, height)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setAnimationLoop(render)
+
+  container.value.appendChild(renderer.domElement)
+
+  const controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.enableZoom = true
+  controls.autoRotate = false
+  controls.enablePan = true
+
+  useEventListener(window, 'resize', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
+
+  useEventListener(window, 'orientationchange', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
+})
+</script>
+
+<template>
+  <div id="container" ref="container"></div>
+</template>
+
+<style scoped lang="scss">
+#container {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 60px - 40px - 60px);
+}
+</style>

From a3524f37d5cda5015f94cac24c90ea6d5fcdc1ca Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Thu, 27 Jul 2023 20:51:19 +0800
Subject: [PATCH 12/19] style: small format

---
 frontend/src/views/3D/RainingEffect.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/3D/RainingEffect.vue b/frontend/src/views/3D/RainingEffect.vue
index 2327206e..5e0f850c 100644
--- a/frontend/src/views/3D/RainingEffect.vue
+++ b/frontend/src/views/3D/RainingEffect.vue
@@ -40,14 +40,14 @@ onMounted(() => {
   stats.domElement.style.left = '0'
   container.value.appendChild(stats.domElement)
 
+  const scene = new Scene()
+  scene.background = new Color(0x000000)
+
   const camera = new PerspectiveCamera(45, width / height, 1, 1000)
   camera.position.set(0, 0, 40)
   camera.up.set(0, 1, 0)
   camera.lookAt(0, 0, 0)
 
-  const scene = new Scene()
-  scene.background = new Color(0x000000)
-
   const renderer = new WebGLRenderer()
   renderer.setSize(width, height)
   renderer.setPixelRatio(window.devicePixelRatio)

From 0daab8cbc2f781f41f33347954d473cd5da57f2e Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Thu, 27 Jul 2023 21:43:13 +0800
Subject: [PATCH 13/19] feat: done bloom effect

---
 frontend/src/views/3D/BloomEffect.vue | 73 +++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/3D/BloomEffect.vue b/frontend/src/views/3D/BloomEffect.vue
index aad091c9..1745c67b 100644
--- a/frontend/src/views/3D/BloomEffect.vue
+++ b/frontend/src/views/3D/BloomEffect.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { Color, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import { BoxGeometry, Color, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, ShaderMaterial, Vector2, WebGLRenderer } from 'three'
 // @ts-expect-error can not find type definition for this file
 import Stats from 'three/addons/libs/stats.module'
 // @ts-expect-error can not find type definition for this file
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
+// @ts-expect-error can not find type definition for this file
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer'
+// @ts-expect-error can not find type definition for this file
+import { RenderPass } from 'three/addons/postprocessing/RenderPass'
+// @ts-expect-error can not find type definition for this file
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass'
+// @ts-expect-error can not find type definition for this file
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass'
 import { useEventListener } from '@sky-fly/shooks'
 
 const container = ref<HTMLDivElement | null>(null)
@@ -14,6 +22,11 @@ onMounted(() => {
     controls.update()
     stats.update()
     renderer.render(scene, camera)
+
+    mesh.rotation.x += 0.01
+    mesh.rotation.y += 0.02
+
+    composer.render()
   }
 
   if (container.value === null) return
@@ -26,14 +39,14 @@ onMounted(() => {
   stats.domElement.style.left = '0'
   container.value.appendChild(stats.domElement)
 
+  const scene = new Scene()
+  scene.background = new Color(0x000000)
+
   const camera = new PerspectiveCamera(45, width / height, 1, 1000)
-  camera.position.set(0, 0, 40)
+  camera.position.set(0, 0, 5)
   camera.up.set(0, 1, 0)
   camera.lookAt(0, 0, 0)
 
-  const scene = new Scene()
-  scene.background = new Color(0x000000)
-
   const renderer = new WebGLRenderer()
   renderer.setSize(width, height)
   renderer.setPixelRatio(window.devicePixelRatio)
@@ -47,6 +60,56 @@ onMounted(() => {
   controls.autoRotate = false
   controls.enablePan = true
 
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicMaterial({
+    color: 0xffffff,
+  })
+  const mesh = new Mesh(geometry, material)
+  scene.add(mesh)
+
+  const composer = new EffectComposer(renderer)
+
+  const renderPass = new RenderPass(scene, camera)
+  composer.addPass(renderPass)
+
+  const bloomPass = new UnrealBloomPass(new Vector2(width, height), 1.5, 0.4, 0.85)
+  composer.addPass(bloomPass)
+
+  const finalPass = new ShaderPass(
+    new ShaderMaterial({
+      uniforms: {
+        baseTexture: {
+          value: null,
+        },
+        bloomTexture: {
+          value: composer.renderTarget2.texture,
+        },
+      },
+      vertexShader: `
+      varying vec2 vUv;
+
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+      fragmentShader: `
+      uniform sampler2D baseTexture;
+      uniform sampler2D bloomTexture;
+
+      varying vec2 vUv;
+
+      void main() {
+        gl_FragColor = texture2D(baseTexture, vUv) + texture2D(bloomTexture, vUv);
+      }
+    `,
+      defines: {},
+    }),
+    'baseTexture'
+  )
+  finalPass.needsSwap = true
+  composer.addPass(finalPass)
+
   useEventListener(window, 'resize', () => {
     if (container.value === null) return
 

From 03657e4be23d112584d21a9cac90b0122fc1b73d Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Sat, 29 Jul 2023 23:47:45 +0800
Subject: [PATCH 14/19] feat: create Periodic Table view

---
 frontend/src/layout/PageSidebar.vue     |  4 ++
 frontend/src/locale/en-US.ts            |  1 +
 frontend/src/locale/zh-CN.ts            |  1 +
 frontend/src/router/index.ts            |  8 +++
 frontend/src/views/3D/PeriodicTable.vue | 84 +++++++++++++++++++++++++
 5 files changed, 98 insertions(+)
 create mode 100644 frontend/src/views/3D/PeriodicTable.vue

diff --git a/frontend/src/layout/PageSidebar.vue b/frontend/src/layout/PageSidebar.vue
index f1356e0f..880d45be 100644
--- a/frontend/src/layout/PageSidebar.vue
+++ b/frontend/src/layout/PageSidebar.vue
@@ -329,6 +329,10 @@ watch(
           <el-icon><Box /></el-icon>
           <span>{{ i18n.t('router./3d/rotation-circle') }}</span>
         </el-menu-item>
+        <el-menu-item index="/3d/periodic-table">
+          <el-icon><Box /></el-icon>
+          <span>{{ i18n.t('router./3d/periodic-table') }}</span>
+        </el-menu-item>
       </el-sub-menu>
 
       <!-- 系统监控 -->
diff --git a/frontend/src/locale/en-US.ts b/frontend/src/locale/en-US.ts
index 6eebafa0..fedd610d 100644
--- a/frontend/src/locale/en-US.ts
+++ b/frontend/src/locale/en-US.ts
@@ -365,6 +365,7 @@ export default {
     '/3d/active-building': 'Active Building',
     '/3d/bloom-effect': 'Bloom Effect',
     '/3d/rotation-circle': 'Rotation Circle',
+    '/3d/periodic-table': 'Periodic Table',
     '/monitor': 'Monitor',
     '/monitor/performance': 'Performance',
     '/error': 'Error',
diff --git a/frontend/src/locale/zh-CN.ts b/frontend/src/locale/zh-CN.ts
index cd7ca8d2..75ce0118 100644
--- a/frontend/src/locale/zh-CN.ts
+++ b/frontend/src/locale/zh-CN.ts
@@ -365,6 +365,7 @@ export default {
     '/3d/active-building': '活动建筑',
     '/3d/bloom-effect': '爆炸效果',
     '/3d/rotation-circle': '旋转圆圈',
+    '/3d/periodic-table': '元素周期表',
     '/monitor': '系统监控',
     '/monitor/performance': '系统性能',
     '/error': '异常',
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 2ce3c207..c3cf3a4b 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -565,6 +565,14 @@ const router = createRouter({
                 isView: true,
               },
             },
+            {
+              name: Symbol('/3d/periodic-table'),
+              path: '/3d/periodic-table',
+              component: () => import('@/views/3D/PeriodicTable.vue'),
+              meta: {
+                isView: true,
+              },
+            },
           ],
         },
 
diff --git a/frontend/src/views/3D/PeriodicTable.vue b/frontend/src/views/3D/PeriodicTable.vue
new file mode 100644
index 00000000..cd00ca30
--- /dev/null
+++ b/frontend/src/views/3D/PeriodicTable.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Color, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+// @ts-expect-error can not find type definition for this file
+import Stats from 'three/addons/libs/stats.module'
+// @ts-expect-error can not find type definition for this file
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { useEventListener } from '@sky-fly/shooks'
+
+const container = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  const render = (): void => {
+    controls.update()
+    stats.update()
+    renderer.render(scene, camera)
+  }
+
+  if (container.value === null) return
+
+  const { width, height } = container.value.getBoundingClientRect()
+
+  const stats = new Stats()
+  stats.domElement.style.position = 'absolute'
+  stats.domElement.style.top = '0'
+  stats.domElement.style.left = '0'
+  container.value.appendChild(stats.domElement)
+
+  const scene = new Scene()
+  scene.background = new Color(0x000000)
+
+  const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+  camera.position.set(0, 0, 40)
+  camera.up.set(0, 1, 0)
+  camera.lookAt(0, 0, 0)
+
+  const renderer = new WebGLRenderer()
+  renderer.setSize(width, height)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setAnimationLoop(render)
+
+  container.value.appendChild(renderer.domElement)
+
+  const controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.enableZoom = true
+  controls.autoRotate = false
+  controls.enablePan = true
+
+  useEventListener(window, 'resize', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
+
+  useEventListener(window, 'orientationchange', () => {
+    if (container.value === null) return
+
+    const { width, height } = container.value.getBoundingClientRect()
+
+    camera.aspect = width / height
+    camera.updateProjectionMatrix()
+    renderer.setSize(width, height)
+    renderer.setPixelRatio(window.devicePixelRatio)
+  })
+})
+</script>
+
+<template>
+  <div id="container" ref="container"></div>
+</template>
+
+<style scoped lang="scss">
+#container {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 60px - 40px - 60px);
+}
+</style>

From d08b29c9de4b7f0042fd5f6c854dbe47da868461 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Sun, 30 Jul 2023 20:15:50 +0800
Subject: [PATCH 15/19] feat: finish periodic-table view

---
 frontend/src/data/index.ts              |   1 +
 frontend/src/data/periodic.ts           | 594 ++++++++++++++++++++++++
 frontend/src/views/3D/PeriodicTable.vue | 251 +++++++++-
 3 files changed, 829 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/data/periodic.ts

diff --git a/frontend/src/data/index.ts b/frontend/src/data/index.ts
index e69de29b..e2ecf21f 100644
--- a/frontend/src/data/index.ts
+++ b/frontend/src/data/index.ts
@@ -0,0 +1 @@
+export { default as periodic } from './periodic'
diff --git a/frontend/src/data/periodic.ts b/frontend/src/data/periodic.ts
new file mode 100644
index 00000000..70a87111
--- /dev/null
+++ b/frontend/src/data/periodic.ts
@@ -0,0 +1,594 @@
+const periodic = [
+  'H',
+  'Hydrogen',
+  '1.00794',
+  1,
+  1,
+  'He',
+  'Helium',
+  '4.002602',
+  18,
+  1,
+  'Li',
+  'Lithium',
+  '6.941',
+  1,
+  2,
+  'Be',
+  'Beryllium',
+  '9.012182',
+  2,
+  2,
+  'B',
+  'Boron',
+  '10.811',
+  13,
+  2,
+  'C',
+  'Carbon',
+  '12.0107',
+  14,
+  2,
+  'N',
+  'Nitrogen',
+  '14.0067',
+  15,
+  2,
+  'O',
+  'Oxygen',
+  '15.9994',
+  16,
+  2,
+  'F',
+  'Fluorine',
+  '18.9984032',
+  17,
+  2,
+  'Ne',
+  'Neon',
+  '20.1797',
+  18,
+  2,
+  'Na',
+  'Sodium',
+  '22.98976...',
+  1,
+  3,
+  'Mg',
+  'Magnesium',
+  '24.305',
+  2,
+  3,
+  'Al',
+  'Aluminium',
+  '26.9815386',
+  13,
+  3,
+  'Si',
+  'Silicon',
+  '28.0855',
+  14,
+  3,
+  'P',
+  'Phosphorus',
+  '30.973762',
+  15,
+  3,
+  'S',
+  'Sulfur',
+  '32.065',
+  16,
+  3,
+  'Cl',
+  'Chlorine',
+  '35.453',
+  17,
+  3,
+  'Ar',
+  'Argon',
+  '39.948',
+  18,
+  3,
+  'K',
+  'Potassium',
+  '39.948',
+  1,
+  4,
+  'Ca',
+  'Calcium',
+  '40.078',
+  2,
+  4,
+  'Sc',
+  'Scandium',
+  '44.955912',
+  3,
+  4,
+  'Ti',
+  'Titanium',
+  '47.867',
+  4,
+  4,
+  'V',
+  'Vanadium',
+  '50.9415',
+  5,
+  4,
+  'Cr',
+  'Chromium',
+  '51.9961',
+  6,
+  4,
+  'Mn',
+  'Manganese',
+  '54.938045',
+  7,
+  4,
+  'Fe',
+  'Iron',
+  '55.845',
+  8,
+  4,
+  'Co',
+  'Cobalt',
+  '58.933195',
+  9,
+  4,
+  'Ni',
+  'Nickel',
+  '58.6934',
+  10,
+  4,
+  'Cu',
+  'Copper',
+  '63.546',
+  11,
+  4,
+  'Zn',
+  'Zinc',
+  '65.38',
+  12,
+  4,
+  'Ga',
+  'Gallium',
+  '69.723',
+  13,
+  4,
+  'Ge',
+  'Germanium',
+  '72.63',
+  14,
+  4,
+  'As',
+  'Arsenic',
+  '74.9216',
+  15,
+  4,
+  'Se',
+  'Selenium',
+  '78.96',
+  16,
+  4,
+  'Br',
+  'Bromine',
+  '79.904',
+  17,
+  4,
+  'Kr',
+  'Krypton',
+  '83.798',
+  18,
+  4,
+  'Rb',
+  'Rubidium',
+  '85.4678',
+  1,
+  5,
+  'Sr',
+  'Strontium',
+  '87.62',
+  2,
+  5,
+  'Y',
+  'Yttrium',
+  '88.90585',
+  3,
+  5,
+  'Zr',
+  'Zirconium',
+  '91.224',
+  4,
+  5,
+  'Nb',
+  'Niobium',
+  '92.90628',
+  5,
+  5,
+  'Mo',
+  'Molybdenum',
+  '95.96',
+  6,
+  5,
+  'Tc',
+  'Technetium',
+  '(98)',
+  7,
+  5,
+  'Ru',
+  'Ruthenium',
+  '101.07',
+  8,
+  5,
+  'Rh',
+  'Rhodium',
+  '102.9055',
+  9,
+  5,
+  'Pd',
+  'Palladium',
+  '106.42',
+  10,
+  5,
+  'Ag',
+  'Silver',
+  '107.8682',
+  11,
+  5,
+  'Cd',
+  'Cadmium',
+  '112.411',
+  12,
+  5,
+  'In',
+  'Indium',
+  '114.818',
+  13,
+  5,
+  'Sn',
+  'Tin',
+  '118.71',
+  14,
+  5,
+  'Sb',
+  'Antimony',
+  '121.76',
+  15,
+  5,
+  'Te',
+  'Tellurium',
+  '127.6',
+  16,
+  5,
+  'I',
+  'Iodine',
+  '126.90447',
+  17,
+  5,
+  'Xe',
+  'Xenon',
+  '131.293',
+  18,
+  5,
+  'Cs',
+  'Caesium',
+  '132.9054',
+  1,
+  6,
+  'Ba',
+  'Barium',
+  '132.9054',
+  2,
+  6,
+  'La',
+  'Lanthanum',
+  '138.90547',
+  4,
+  9,
+  'Ce',
+  'Cerium',
+  '140.116',
+  5,
+  9,
+  'Pr',
+  'Praseodymium',
+  '140.90765',
+  6,
+  9,
+  'Nd',
+  'Neodymium',
+  '144.242',
+  7,
+  9,
+  'Pm',
+  'Promethium',
+  '(145)',
+  8,
+  9,
+  'Sm',
+  'Samarium',
+  '150.36',
+  9,
+  9,
+  'Eu',
+  'Europium',
+  '151.964',
+  10,
+  9,
+  'Gd',
+  'Gadolinium',
+  '157.25',
+  11,
+  9,
+  'Tb',
+  'Terbium',
+  '158.92535',
+  12,
+  9,
+  'Dy',
+  'Dysprosium',
+  '162.5',
+  13,
+  9,
+  'Ho',
+  'Holmium',
+  '164.93032',
+  14,
+  9,
+  'Er',
+  'Erbium',
+  '167.259',
+  15,
+  9,
+  'Tm',
+  'Thulium',
+  '168.93421',
+  16,
+  9,
+  'Yb',
+  'Ytterbium',
+  '173.054',
+  17,
+  9,
+  'Lu',
+  'Lutetium',
+  '174.9668',
+  18,
+  9,
+  'Hf',
+  'Hafnium',
+  '178.49',
+  4,
+  6,
+  'Ta',
+  'Tantalum',
+  '180.94788',
+  5,
+  6,
+  'W',
+  'Tungsten',
+  '183.84',
+  6,
+  6,
+  'Re',
+  'Rhenium',
+  '186.207',
+  7,
+  6,
+  'Os',
+  'Osmium',
+  '190.23',
+  8,
+  6,
+  'Ir',
+  'Iridium',
+  '192.217',
+  9,
+  6,
+  'Pt',
+  'Platinum',
+  '195.084',
+  10,
+  6,
+  'Au',
+  'Gold',
+  '196.966569',
+  11,
+  6,
+  'Hg',
+  'Mercury',
+  '200.59',
+  12,
+  6,
+  'Tl',
+  'Thallium',
+  '204.3833',
+  13,
+  6,
+  'Pb',
+  'Lead',
+  '207.2',
+  14,
+  6,
+  'Bi',
+  'Bismuth',
+  '208.9804',
+  15,
+  6,
+  'Po',
+  'Polonium',
+  '(209)',
+  16,
+  6,
+  'At',
+  'Astatine',
+  '(210)',
+  17,
+  6,
+  'Rn',
+  'Radon',
+  '(222)',
+  18,
+  6,
+  'Fr',
+  'Francium',
+  '(223)',
+  1,
+  7,
+  'Ra',
+  'Radium',
+  '(226)',
+  2,
+  7,
+  'Ac',
+  'Actinium',
+  '(227)',
+  4,
+  10,
+  'Th',
+  'Thorium',
+  '232.03806',
+  5,
+  10,
+  'Pa',
+  'Protactinium',
+  '231.0588',
+  6,
+  10,
+  'U',
+  'Uranium',
+  '238.02891',
+  7,
+  10,
+  'Np',
+  'Neptunium',
+  '(237)',
+  8,
+  10,
+  'Pu',
+  'Plutonium',
+  '(244)',
+  9,
+  10,
+  'Am',
+  'Americium',
+  '(243)',
+  10,
+  10,
+  'Cm',
+  'Curium',
+  '(247)',
+  11,
+  10,
+  'Bk',
+  'Berkelium',
+  '(247)',
+  12,
+  10,
+  'Cf',
+  'Californium',
+  '(251)',
+  13,
+  10,
+  'Es',
+  'Einstenium',
+  '(252)',
+  14,
+  10,
+  'Fm',
+  'Fermium',
+  '(257)',
+  15,
+  10,
+  'Md',
+  'Mendelevium',
+  '(258)',
+  16,
+  10,
+  'No',
+  'Nobelium',
+  '(259)',
+  17,
+  10,
+  'Lr',
+  'Lawrencium',
+  '(262)',
+  18,
+  10,
+  'Rf',
+  'Rutherfordium',
+  '(267)',
+  4,
+  7,
+  'Db',
+  'Dubnium',
+  '(268)',
+  5,
+  7,
+  'Sg',
+  'Seaborgium',
+  '(271)',
+  6,
+  7,
+  'Bh',
+  'Bohrium',
+  '(272)',
+  7,
+  7,
+  'Hs',
+  'Hassium',
+  '(270)',
+  8,
+  7,
+  'Mt',
+  'Meitnerium',
+  '(276)',
+  9,
+  7,
+  'Ds',
+  'Darmstadium',
+  '(281)',
+  10,
+  7,
+  'Rg',
+  'Roentgenium',
+  '(280)',
+  11,
+  7,
+  'Cn',
+  'Copernicium',
+  '(285)',
+  12,
+  7,
+  'Nh',
+  'Nihonium',
+  '(286)',
+  13,
+  7,
+  'Fl',
+  'Flerovium',
+  '(289)',
+  14,
+  7,
+  'Mc',
+  'Moscovium',
+  '(290)',
+  15,
+  7,
+  'Lv',
+  'Livermorium',
+  '(293)',
+  16,
+  7,
+  'Ts',
+  'Tennessine',
+  '(294)',
+  17,
+  7,
+  'Og',
+  'Oganesson',
+  '(294)',
+  18,
+  7,
+] as const
+
+export default periodic
diff --git a/frontend/src/views/3D/PeriodicTable.vue b/frontend/src/views/3D/PeriodicTable.vue
index cd00ca30..6815b2fb 100644
--- a/frontend/src/views/3D/PeriodicTable.vue
+++ b/frontend/src/views/3D/PeriodicTable.vue
@@ -1,18 +1,39 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { Color, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import { Color, Object3D, PerspectiveCamera, Scene, Vector3 } from 'three'
 // @ts-expect-error can not find type definition for this file
 import Stats from 'three/addons/libs/stats.module'
 // @ts-expect-error can not find type definition for this file
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import TWEEN from 'three/addons/libs/tween.module'
+// @ts-expect-error can not find type definition for this file
+import { TrackballControls } from 'three/addons/controls/TrackballControls'
+// @ts-expect-error can not find type definition for this file
+import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer'
 import { useEventListener } from '@sky-fly/shooks'
+import { periodic } from '@/data'
 
 const container = ref<HTMLDivElement | null>(null)
 
+const table = ref<HTMLDivElement | null>(null)
+
+const sphere = ref<HTMLDivElement | null>(null)
+
+const helix = ref<HTMLDivElement | null>(null)
+
+const grid = ref<HTMLDivElement | null>(null)
+
+const count = periodic.length / 5
+
 onMounted(() => {
-  const render = (): void => {
+  const animate = (): void => {
     controls.update()
     stats.update()
+    TWEEN.update()
+
+    window.requestAnimationFrame(animate)
+  }
+
+  const render = (): void => {
     renderer.render(scene, camera)
   }
 
@@ -29,23 +50,86 @@ onMounted(() => {
   const scene = new Scene()
   scene.background = new Color(0x000000)
 
-  const camera = new PerspectiveCamera(45, width / height, 1, 1000)
-  camera.position.set(0, 0, 40)
-  camera.up.set(0, 1, 0)
-  camera.lookAt(0, 0, 0)
+  const camera = new PerspectiveCamera(40, width / height, 1, 1000)
+  camera.position.set(0, 0, 3000)
 
-  const renderer = new WebGLRenderer()
+  const renderer = new CSS3DRenderer()
   renderer.setSize(width, height)
-  renderer.setPixelRatio(window.devicePixelRatio)
-  renderer.setAnimationLoop(render)
 
   container.value.appendChild(renderer.domElement)
 
-  const controls = new OrbitControls(camera, renderer.domElement)
-  controls.enableDamping = true
-  controls.enableZoom = true
-  controls.autoRotate = false
-  controls.enablePan = true
+  const controls = new TrackballControls(camera, renderer.domElement)
+  controls.minDistance = 500
+  controls.MaxDistance = 6000
+  controls.addEventListener('change', render)
+
+  const objects: CSS3DObject[] = []
+  const targets: Record<'table' | 'sphere' | 'helix' | 'grid', Object3D[]> = {
+    table: [],
+    sphere: [],
+    helix: [],
+    grid: [],
+  }
+
+  for (let i = 0, v = new Vector3(); i < count * 5; i += 5) {
+    const element = document.createElement('div')
+    element.classList.add('element')
+    element.style.backgroundColor = `rgba(0, 127, 127, ${Math.random() * 0.5 + 0.25})`
+
+    const number = document.createElement('div')
+    number.classList.add('number')
+    number.textContent = String(i / 5 + 1)
+    element.appendChild(number)
+
+    const symbol = document.createElement('div')
+    symbol.classList.add('symbol')
+    // eslint-disable-next-line security/detect-object-injection
+    symbol.textContent = String(periodic[i])
+    element.appendChild(symbol)
+
+    const details = document.createElement('div')
+    details.classList.add('details')
+    // eslint-disable-next-line security/detect-object-injection
+    details.innerHTML = `${String(periodic[i + 1])}<br />${String(periodic[i + 2])}`
+    element.appendChild(details)
+
+    const objectCSS = new CSS3DObject(element)
+    objectCSS.position.x = Math.random() * 4000 - 2000
+    objectCSS.position.y = Math.random() * 4000 - 2000
+    objectCSS.position.z = Math.random() * 4000 - 2000
+    scene.add(objectCSS)
+
+    objects.push(objectCSS)
+
+    const k = i / 5
+
+    const table = new Object3D()
+    table.position.x = Number(periodic[i + 3]) * 140 - 1330
+    table.position.y = Number(periodic[i + 4]) * 180 + 990
+    targets.table.push(table)
+
+    const sphere = new Object3D()
+    const phi = Math.acos(-1 + (2 * k) / (count * 5))
+    const theta = Math.sqrt(5 * count * Math.PI) * phi
+    sphere.position.setFromSphericalCoords(800, phi, theta)
+    v.copy(sphere.position).multiplyScalar(2)
+    sphere.lookAt(v)
+    targets.sphere.push(sphere)
+
+    const helix = new Object3D()
+    helix.position.setFromCylindricalCoords(900, k * 0.175 + Math.PI, -(k * 8) + 450)
+    v.x = helix.position.x * 2
+    v.y = helix.position.y
+    v.z = helix.position.z * 2
+    helix.lookAt(v)
+    targets.helix.push(helix)
+
+    const grid = new Object3D()
+    grid.position.x = (i % 5) * 400 - 800
+    grid.position.y = -(Math.floor(i / 5) % 5) * 400 + 800
+    grid.position.z = Math.floor(i / 25) * 1000 - 2000
+    targets.grid.push(grid)
+  }
 
   useEventListener(window, 'resize', () => {
     if (container.value === null) return
@@ -54,8 +138,10 @@ onMounted(() => {
 
     camera.aspect = width / height
     camera.updateProjectionMatrix()
+
     renderer.setSize(width, height)
-    renderer.setPixelRatio(window.devicePixelRatio)
+
+    render()
   })
 
   useEventListener(window, 'orientationchange', () => {
@@ -65,14 +151,76 @@ onMounted(() => {
 
     camera.aspect = width / height
     camera.updateProjectionMatrix()
+
     renderer.setSize(width, height)
-    renderer.setPixelRatio(window.devicePixelRatio)
+
+    render()
+  })
+
+  useEventListener(table.value as HTMLDivElement, 'click', (e: MouseEvent) => {
+    transform(targets.table, 2000, e.target as HTMLDivElement)
   })
+
+  useEventListener(sphere.value as HTMLDivElement, 'click', (e: MouseEvent) => {
+    transform(targets.sphere, 2000, e.target as HTMLDivElement)
+  })
+
+  useEventListener(helix.value as HTMLDivElement, 'click', (e: MouseEvent) => {
+    transform(targets.helix, 2000, e.target as HTMLDivElement)
+  })
+
+  useEventListener(grid.value as HTMLDivElement, 'click', (e: MouseEvent) => {
+    transform(targets.grid, 2000, e.target as HTMLDivElement)
+  })
+
+  const transform = (targets: Object3D[], duration: number, thisArgs: HTMLElement): void => {
+    TWEEN.removeAll()
+
+    for (let i = 0; i < count; ++i) {
+      // eslint-disable-next-line security/detect-object-injection
+      const object = objects[i]
+      // eslint-disable-next-line security/detect-object-injection
+      const target = targets[i]
+
+      new TWEEN.Tween(object.position)
+        .to({
+          x: target.position.x,
+          y: target.position.y,
+          z: target.position.z,
+        })
+        .easing(TWEEN.Easing.Exponential.InOut)
+        .start()
+
+      new TWEEN.Tween(object.rotation)
+        .to({
+          x: target.rotation.x,
+          y: target.rotation.y,
+          z: target.rotation.z,
+        })
+        .easing(TWEEN.Easing.Exponential.InOut)
+        .start()
+    }
+
+    new TWEEN.Tween(thisArgs)
+      .to({}, duration * 2)
+      .onUpdate(render)
+      .start()
+  }
+
+  window.requestAnimationFrame(animate)
+
+  transform(targets.table, 2000, container.value)
 })
 </script>
 
 <template>
   <div id="container" ref="container"></div>
+  <div id="menu">
+    <button id="table" ref="table">TABLE</button>
+    <button id="sphere" ref="sphere">SPHERE</button>
+    <button id="helix" ref="helix">HELIX</button>
+    <button id="grid" ref="grid">GRID</button>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -81,4 +229,73 @@ onMounted(() => {
   width: 100%;
   height: calc(100vh - 60px - 40px - 60px);
 }
+
+#menu {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+}
+
+.element {
+  width: 120px;
+  height: 160px;
+  font-family: Helvetica, sans-serif;
+  line-height: normal;
+  text-align: center;
+  border: 1px solid rgb(127 255 255 / 25%);
+  box-shadow: 0 0 12px rgb(0 255 255 / 50%);
+  cursor: default;
+}
+
+.element:hover {
+  border: 1px solid rgb(127 255 255 / 75%);
+  box-shadow: 0 0 12px rgb(0 255 255 / 75%);
+}
+
+.element .number {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: rgb(127 255 255 / 75%);
+  font-size: 12px;
+}
+
+.element .symbol {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  left: 0;
+  color: rgb(255 255 255 / 75%);
+  font-weight: bold;
+  font-size: 60px;
+  text-shadow: 0 0 10px rgb(0 255 255 / 95%);
+}
+
+.element .details {
+  position: absolute;
+  right: 0;
+  bottom: 15px;
+  left: 0;
+  color: rgb(127 255 255 / 75%);
+  font-size: 12px;
+}
+
+button {
+  padding: 5px 10px;
+  color: rgb(127 255 255 / 75%);
+  background: transparent;
+  border: 0;
+  outline: 1px solid rgb(127 255 255 / 75%);
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: rgb(0 255 255 / 50%);
+}
+
+button:active {
+  color: #000;
+  background-color: rgb(0 255 255 / 75%);
+}
 </style>

From d373eaa33d59a014090d096c3b61aefbb73b8369 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Sun, 30 Jul 2023 20:45:40 +0800
Subject: [PATCH 16/19] feat: update periodic table

---
 frontend/src/views/3D/PeriodicTable.vue | 105 +++++++++++++-----------
 1 file changed, 55 insertions(+), 50 deletions(-)

diff --git a/frontend/src/views/3D/PeriodicTable.vue b/frontend/src/views/3D/PeriodicTable.vue
index 6815b2fb..6aade3dc 100644
--- a/frontend/src/views/3D/PeriodicTable.vue
+++ b/frontend/src/views/3D/PeriodicTable.vue
@@ -28,6 +28,7 @@ onMounted(() => {
   const animate = (): void => {
     controls.update()
     stats.update()
+    // eslint-disable-next-line import/no-named-as-default-member
     TWEEN.update()
 
     window.requestAnimationFrame(animate)
@@ -52,6 +53,8 @@ onMounted(() => {
 
   const camera = new PerspectiveCamera(40, width / height, 1, 1000)
   camera.position.set(0, 0, 3000)
+  camera.up.set(0, 1, 0)
+  camera.lookAt(0, 0, 0)
 
   const renderer = new CSS3DRenderer()
   renderer.setSize(width, height)
@@ -71,26 +74,24 @@ onMounted(() => {
     grid: [],
   }
 
-  for (let i = 0, v = new Vector3(); i < count * 5; i += 5) {
+  for (let i = 0, v = new Vector3(); i < count; ++i) {
     const element = document.createElement('div')
     element.classList.add('element')
     element.style.backgroundColor = `rgba(0, 127, 127, ${Math.random() * 0.5 + 0.25})`
 
     const number = document.createElement('div')
     number.classList.add('number')
-    number.textContent = String(i / 5 + 1)
+    number.textContent = String(i + 1)
     element.appendChild(number)
 
     const symbol = document.createElement('div')
     symbol.classList.add('symbol')
-    // eslint-disable-next-line security/detect-object-injection
-    symbol.textContent = String(periodic[i])
+    symbol.textContent = String(periodic[i * 5])
     element.appendChild(symbol)
 
     const details = document.createElement('div')
     details.classList.add('details')
-    // eslint-disable-next-line security/detect-object-injection
-    details.innerHTML = `${String(periodic[i + 1])}<br />${String(periodic[i + 2])}`
+    details.innerHTML = `${String(periodic[i * 5 + 1])}<br />${String(periodic[i * 5 + 2])}`
     element.appendChild(details)
 
     const objectCSS = new CSS3DObject(element)
@@ -101,23 +102,21 @@ onMounted(() => {
 
     objects.push(objectCSS)
 
-    const k = i / 5
-
     const table = new Object3D()
-    table.position.x = Number(periodic[i + 3]) * 140 - 1330
-    table.position.y = Number(periodic[i + 4]) * 180 + 990
+    table.position.x = Number(periodic[i * 5 + 3]) * 140 - 1330
+    table.position.y = -Number(periodic[i * 5 + 4]) * 180 + 990
     targets.table.push(table)
 
     const sphere = new Object3D()
-    const phi = Math.acos(-1 + (2 * k) / (count * 5))
-    const theta = Math.sqrt(5 * count * Math.PI) * phi
+    const phi = Math.acos(-1 + (2 * i) / count)
+    const theta = Math.sqrt(count * Math.PI) * phi
     sphere.position.setFromSphericalCoords(800, phi, theta)
     v.copy(sphere.position).multiplyScalar(2)
     sphere.lookAt(v)
     targets.sphere.push(sphere)
 
     const helix = new Object3D()
-    helix.position.setFromCylindricalCoords(900, k * 0.175 + Math.PI, -(k * 8) + 450)
+    helix.position.setFromCylindricalCoords(900, i * 0.175 + Math.PI, -(i * 8) + 450)
     v.x = helix.position.x * 2
     v.y = helix.position.y
     v.z = helix.position.z * 2
@@ -174,6 +173,7 @@ onMounted(() => {
   })
 
   const transform = (targets: Object3D[], duration: number, thisArgs: HTMLElement): void => {
+    // eslint-disable-next-line import/no-named-as-default-member
     TWEEN.removeAll()
 
     for (let i = 0; i < count; ++i) {
@@ -182,25 +182,30 @@ onMounted(() => {
       // eslint-disable-next-line security/detect-object-injection
       const target = targets[i]
 
+      // eslint-disable-next-line import/no-named-as-default-member
       new TWEEN.Tween(object.position)
         .to({
           x: target.position.x,
           y: target.position.y,
           z: target.position.z,
         })
+        // eslint-disable-next-line import/no-named-as-default-member
         .easing(TWEEN.Easing.Exponential.InOut)
         .start()
 
+      // eslint-disable-next-line import/no-named-as-default-member
       new TWEEN.Tween(object.rotation)
         .to({
           x: target.rotation.x,
           y: target.rotation.y,
           z: target.rotation.z,
         })
+        // eslint-disable-next-line import/no-named-as-default-member
         .easing(TWEEN.Easing.Exponential.InOut)
         .start()
     }
 
+    // eslint-disable-next-line import/no-named-as-default-member
     new TWEEN.Tween(thisArgs)
       .to({}, duration * 2)
       .onUpdate(render)
@@ -237,7 +242,7 @@ onMounted(() => {
   text-align: center;
 }
 
-.element {
+:deep(.element) {
   width: 120px;
   height: 160px;
   font-family: Helvetica, sans-serif;
@@ -246,39 +251,39 @@ onMounted(() => {
   border: 1px solid rgb(127 255 255 / 25%);
   box-shadow: 0 0 12px rgb(0 255 255 / 50%);
   cursor: default;
-}
 
-.element:hover {
-  border: 1px solid rgb(127 255 255 / 75%);
-  box-shadow: 0 0 12px rgb(0 255 255 / 75%);
-}
+  &:hover {
+    border: 1px solid rgb(127 255 255 / 75%);
+    box-shadow: 0 0 12px rgb(0 255 255 / 75%);
+  }
 
-.element .number {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  color: rgb(127 255 255 / 75%);
-  font-size: 12px;
-}
+  .number {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: rgb(127 255 255 / 75%);
+    font-size: 12px;
+  }
 
-.element .symbol {
-  position: absolute;
-  top: 40px;
-  right: 0;
-  left: 0;
-  color: rgb(255 255 255 / 75%);
-  font-weight: bold;
-  font-size: 60px;
-  text-shadow: 0 0 10px rgb(0 255 255 / 95%);
-}
+  .symbol {
+    position: absolute;
+    top: 40px;
+    right: 0;
+    left: 0;
+    color: rgb(255 255 255 / 75%);
+    font-weight: bold;
+    font-size: 60px;
+    text-shadow: 0 0 10px rgb(0 255 255 / 95%);
+  }
 
-.element .details {
-  position: absolute;
-  right: 0;
-  bottom: 15px;
-  left: 0;
-  color: rgb(127 255 255 / 75%);
-  font-size: 12px;
+  .details {
+    position: absolute;
+    right: 0;
+    bottom: 15px;
+    left: 0;
+    color: rgb(127 255 255 / 75%);
+    font-size: 12px;
+  }
 }
 
 button {
@@ -288,14 +293,14 @@ button {
   border: 0;
   outline: 1px solid rgb(127 255 255 / 75%);
   cursor: pointer;
-}
 
-button:hover {
-  background-color: rgb(0 255 255 / 50%);
-}
+  &:hover {
+    background-color: rgb(0 255 255 / 50%);
+  }
 
-button:active {
-  color: #000;
-  background-color: rgb(0 255 255 / 75%);
+  &:active {
+    color: #000;
+    background-color: rgb(0 255 255 / 75%);
+  }
 }
 </style>

From a6d8013ff8d7e16e962bdefde71914a3ac4707f5 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Sun, 30 Jul 2023 21:06:28 +0800
Subject: [PATCH 17/19] style: format

---
 frontend/src/views/3D/RainingEffect.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/3D/RainingEffect.vue b/frontend/src/views/3D/RainingEffect.vue
index 5e0f850c..5056b9ee 100644
--- a/frontend/src/views/3D/RainingEffect.vue
+++ b/frontend/src/views/3D/RainingEffect.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { AdditiveBlending, BufferAttribute, BufferGeometry, Color, PerspectiveCamera, Points, PointsMaterial, Scene, TextureLoader, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import Stats from 'three/addons/libs/stats.module'
-// @ts-expect-error can not find type definition for this file
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { useEventListener } from '@sky-fly/shooks'
 import { rain } from '@/assets'
 
@@ -35,10 +33,10 @@ onMounted(() => {
   const { width, height } = container.value.getBoundingClientRect()
 
   const stats = new Stats()
-  stats.domElement.style.position = 'absolute'
-  stats.domElement.style.top = '0'
-  stats.domElement.style.left = '0'
-  container.value.appendChild(stats.domElement)
+  stats.dom.style.position = 'absolute'
+  stats.dom.style.top = '0'
+  stats.dom.style.left = '0'
+  container.value.appendChild(stats.dom)
 
   const scene = new Scene()
   scene.background = new Color(0x000000)

From a40be8607e8e4491da526141c60a180fbacd71f4 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Sun, 30 Jul 2023 23:59:52 +0800
Subject: [PATCH 18/19] style: update three addon import

---
 frontend/src/views/3D/3DEarth.vue            | 18 +++++---------
 frontend/src/views/3D/ActiveBuilding.vue     | 11 +++------
 frontend/src/views/3D/Base3D.vue             |  3 +--
 frontend/src/views/3D/BloomEffect.vue        | 26 ++++++++------------
 frontend/src/views/3D/GreatRainingEffect.vue | 17 ++++++-------
 frontend/src/views/3D/MirrorText.vue         | 12 ++++-----
 frontend/src/views/3D/PeriodicTable.vue      | 22 +++++++----------
 frontend/src/views/3D/RotationCircle.vue     |  5 +---
 frontend/src/views/3D/VideoBox.vue           | 20 ++++++++-------
 9 files changed, 54 insertions(+), 80 deletions(-)

diff --git a/frontend/src/views/3D/3DEarth.vue b/frontend/src/views/3D/3DEarth.vue
index f7f3ecec..7f7e1ade 100644
--- a/frontend/src/views/3D/3DEarth.vue
+++ b/frontend/src/views/3D/3DEarth.vue
@@ -1,18 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { AdditiveBlending, AmbientLight, BufferAttribute, BufferGeometry, CatmullRomCurve3, Color, CubicBezierCurve3, CylinderGeometry, DoubleSide, Fog, Group, Line, LineBasicMaterial, LoadingManager, Matrix4, Mesh, MeshBasicMaterial, MeshPhongMaterial, PerspectiveCamera, PlaneGeometry, Points, PointsMaterial, Ray, Scene, SphereGeometry, Spherical, TextureLoader, TorusGeometry, Vector2, Vector3, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-// @ts-expect-error can not find type definition for this file
-import { EffectComposer } from 'three/addons/postprocessing/EffectComposer'
-// @ts-expect-error can not find type definition for this file
-import { RenderPass } from 'three/addons/postprocessing/RenderPass'
-// @ts-expect-error can not find type definition for this file
-import { OutlinePass } from 'three/addons/postprocessing/OutlinePass'
-// @ts-expect-error can not find type definition for this file
-import { OBJLoader } from 'three/addons/loaders/OBJLoader'
-// @ts-expect-error can not find type definition for this file
-import { MTLLoader } from 'three/addons/loaders/MTLLoader'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
+import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import { useEventListener } from '@sky-fly/shooks'
 import { earth_bump, earth_cloud, earth_spec, earth, light_ray, star, sat, satellite, wave } from '@/assets'
 
diff --git a/frontend/src/views/3D/ActiveBuilding.vue b/frontend/src/views/3D/ActiveBuilding.vue
index 5deda9be..b1d30e0d 100644
--- a/frontend/src/views/3D/ActiveBuilding.vue
+++ b/frontend/src/views/3D/ActiveBuilding.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { AmbientLight, AxesHelper, Color, CubeTextureLoader, DirectionalLight, Euler, LoadingManager, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-// @ts-expect-error can not find type definition for this file
-import { DRACOLoader } from 'three/addons/loaders/DRACOLoader'
-// @ts-expect-error can not find type definition for this file
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { useEventListener } from '@sky-fly/shooks'
 import { building, nx, ny, nz, px, py, pz } from '@/assets'
 
@@ -25,7 +22,7 @@ dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/')
 dracoLoader.preload()
 
 const gltfLoader = new GLTFLoader(manager)
-gltfLoader.setDRACOLoader(gltfLoader)
+gltfLoader.setDRACOLoader(dracoLoader)
 
 onMounted(() => {
   if (container.value === null) return
diff --git a/frontend/src/views/3D/Base3D.vue b/frontend/src/views/3D/Base3D.vue
index 058b9064..b9367620 100644
--- a/frontend/src/views/3D/Base3D.vue
+++ b/frontend/src/views/3D/Base3D.vue
@@ -2,8 +2,7 @@
 import { onMounted, ref } from 'vue'
 import { ElCard, ElSpace } from 'element-plus'
 import { BoxGeometry, BufferGeometry, DirectionalLight, Line, LineBasicMaterial, Mesh, MeshNormalMaterial, MeshPhongMaterial, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import WebGL from 'three/addons/capabilities/WebGL.js'
+import WebGL from 'three/examples/jsm/capabilities/WebGL'
 
 const demo = ref<HTMLDivElement | null>(null)
 
diff --git a/frontend/src/views/3D/BloomEffect.vue b/frontend/src/views/3D/BloomEffect.vue
index 1745c67b..fe4b4ab9 100644
--- a/frontend/src/views/3D/BloomEffect.vue
+++ b/frontend/src/views/3D/BloomEffect.vue
@@ -1,18 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { BoxGeometry, Color, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, ShaderMaterial, Vector2, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import Stats from 'three/addons/libs/stats.module'
-// @ts-expect-error can not find type definition for this file
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-// @ts-expect-error can not find type definition for this file
-import { EffectComposer } from 'three/addons/postprocessing/EffectComposer'
-// @ts-expect-error can not find type definition for this file
-import { RenderPass } from 'three/addons/postprocessing/RenderPass'
-// @ts-expect-error can not find type definition for this file
-import { ShaderPass } from 'three/addons/postprocessing/ShaderPass'
-// @ts-expect-error can not find type definition for this file
-import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
 import { useEventListener } from '@sky-fly/shooks'
 
 const container = ref<HTMLDivElement | null>(null)
@@ -34,10 +28,10 @@ onMounted(() => {
   const { width, height } = container.value.getBoundingClientRect()
 
   const stats = new Stats()
-  stats.domElement.style.position = 'absolute'
-  stats.domElement.style.top = '0'
-  stats.domElement.style.left = '0'
-  container.value.appendChild(stats.domElement)
+  stats.dom.style.position = 'absolute'
+  stats.dom.style.top = '0'
+  stats.dom.style.left = '0'
+  container.value.appendChild(stats.dom)
 
   const scene = new Scene()
   scene.background = new Color(0x000000)
diff --git a/frontend/src/views/3D/GreatRainingEffect.vue b/frontend/src/views/3D/GreatRainingEffect.vue
index ca1a7474..8a7ea4ae 100644
--- a/frontend/src/views/3D/GreatRainingEffect.vue
+++ b/frontend/src/views/3D/GreatRainingEffect.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { AxesHelper, Box3, BufferAttribute, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Clock, Color, DoubleSide, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, TextureLoader, Vector3, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import Stats from 'three/addons/libs/stats.module'
-// @ts-expect-error can not find type definition for this file
-import { ImprovedNoise } from 'three/addons/math/ImprovedNoise'
-// @ts-expect-error can not find type definition for this file
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import { ImprovedNoise } from 'three/examples/jsm/math/ImprovedNoise'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { useEventListener } from '@sky-fly/shooks'
 import { color } from '@/assets'
 
@@ -40,10 +37,10 @@ onMounted(() => {
   const { width, height } = container.value.getBoundingClientRect()
 
   const stats = new Stats()
-  stats.domElement.style.position = 'absolute'
-  stats.domElement.style.top = '0'
-  stats.domElement.style.left = '0'
-  container.value.appendChild(stats.domElement)
+  stats.dom.style.position = 'absolute'
+  stats.dom.style.top = '0'
+  stats.dom.style.left = '0'
+  container.value.appendChild(stats.dom)
 
   const camera = new PerspectiveCamera(45, width / height, 1, 150000)
   camera.position.set(10000, 10000, 10000)
diff --git a/frontend/src/views/3D/MirrorText.vue b/frontend/src/views/3D/MirrorText.vue
index 9d19dca2..576f4c9c 100644
--- a/frontend/src/views/3D/MirrorText.vue
+++ b/frontend/src/views/3D/MirrorText.vue
@@ -2,10 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { ElCard, ElSpace } from 'element-plus'
 import { Cache, Color, DirectionalLight, Fog, Group, Mesh, MeshBasicMaterial, MeshPhongMaterial, PerspectiveCamera, PlaneGeometry, PointLight, Scene, Vector3, WebGLRenderer } from 'three'
-// @ts-expect-error can not find type definition for this file
-import { FontLoader } from 'three/addons/loaders/FontLoader'
-// @ts-expect-error can not find type definition for this file
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { type Font, FontLoader } from 'three/examples/jsm/loaders/FontLoader'
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { useEventListener } from '@sky-fly/shooks'
 import { optimer_regular } from '@/assets'
 
@@ -53,11 +51,11 @@ onMounted(() => {
   let text = 'Hello World'
   let textMesh1: Mesh
   let textMesh2: Mesh
-  let font: unknown
+  let font: Font
 
   new FontLoader().load(
     optimer_regular,
-    (result: unknown) => {
+    (result: Font) => {
       font = result
 
       renderText()
@@ -82,7 +80,7 @@ onMounted(() => {
     })
     textGeometry.computeBoundingBox()
 
-    const center = -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x)
+    const center = -0.5 * ((textGeometry.boundingBox?.max.x ?? 0) - (textGeometry.boundingBox?.min.x ?? 0))
 
     textMesh1 = new Mesh(textGeometry, materials)
     textMesh1.position.set(center, 30, 0)
diff --git a/frontend/src/views/3D/PeriodicTable.vue b/frontend/src/views/3D/PeriodicTable.vue
index 6aade3dc..b5137773 100644
--- a/frontend/src/views/3D/PeriodicTable.vue
+++ b/frontend/src/views/3D/PeriodicTable.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { Color, Object3D, PerspectiveCamera, Scene, Vector3 } from 'three'
-// @ts-expect-error can not find type definition for this file
-import Stats from 'three/addons/libs/stats.module'
-// @ts-expect-error can not find type definition for this file
-import TWEEN from 'three/addons/libs/tween.module'
-// @ts-expect-error can not find type definition for this file
-import { TrackballControls } from 'three/addons/controls/TrackballControls'
-// @ts-expect-error can not find type definition for this file
-import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import TWEEN from 'three/examples/jsm/libs/tween.module'
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'
 import { useEventListener } from '@sky-fly/shooks'
 import { periodic } from '@/data'
 
@@ -43,10 +39,10 @@ onMounted(() => {
   const { width, height } = container.value.getBoundingClientRect()
 
   const stats = new Stats()
-  stats.domElement.style.position = 'absolute'
-  stats.domElement.style.top = '0'
-  stats.domElement.style.left = '0'
-  container.value.appendChild(stats.domElement)
+  stats.dom.style.position = 'absolute'
+  stats.dom.style.top = '0'
+  stats.dom.style.left = '0'
+  container.value.appendChild(stats.dom)
 
   const scene = new Scene()
   scene.background = new Color(0x000000)
@@ -63,7 +59,7 @@ onMounted(() => {
 
   const controls = new TrackballControls(camera, renderer.domElement)
   controls.minDistance = 500
-  controls.MaxDistance = 6000
+  controls.maxDistance = 6000
   controls.addEventListener('change', render)
 
   const objects: CSS3DObject[] = []
diff --git a/frontend/src/views/3D/RotationCircle.vue b/frontend/src/views/3D/RotationCircle.vue
index 60d59018..30c0554a 100644
--- a/frontend/src/views/3D/RotationCircle.vue
+++ b/frontend/src/views/3D/RotationCircle.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { BufferGeometry, Color, ColorManagement, Float32BufferAttribute, Line, LineBasicMaterial, LineDashedMaterial, PerspectiveCamera, Scene } from 'three'
-// @ts-expect-error can not find type definition for this file
-import { SVGRenderer } from 'three/addons/renderers/SVGRenderer'
+import { SVGRenderer } from 'three/examples/jsm/renderers/SVGRenderer'
 import { useEventListener } from '@sky-fly/shooks'
 
 const container = ref<HTMLDivElement | null>(null)
@@ -36,7 +35,6 @@ onMounted(() => {
 
   const renderer = new SVGRenderer()
   renderer.setSize(width, height)
-  renderer.setPixelRatio(window.devicePixelRatio)
 
   container.value.appendChild(renderer.domElement)
 
@@ -82,7 +80,6 @@ onMounted(() => {
     camera.aspect = width / height
     camera.updateProjectionMatrix()
     renderer.setSize(width, height)
-    renderer.setPixelRatio(window.devicePixelRatio)
   })
 
   window.requestAnimationFrame(render)
diff --git a/frontend/src/views/3D/VideoBox.vue b/frontend/src/views/3D/VideoBox.vue
index 0f8ba765..834cff4b 100644
--- a/frontend/src/views/3D/VideoBox.vue
+++ b/frontend/src/views/3D/VideoBox.vue
@@ -2,13 +2,13 @@
 import { onMounted, ref } from 'vue'
 import { ElCard, ElSpace } from 'element-plus'
 import { Group, PerspectiveCamera, Scene } from 'three'
-// @ts-expect-error can not find type definition for this file
-import { TrackballControls } from 'three/addons/controls/TrackballControls'
-// @ts-expect-error can not find type definition for this file
-import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer'
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'
 
 const video = ref<HTMLDivElement | null>(null)
 
+const source = 'https://player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1'
+
 onMounted(() => {
   const animate = (): void => {
     window.requestAnimationFrame(animate)
@@ -41,13 +41,15 @@ onMounted(() => {
   const scene = new Scene()
 
   const group = new Group()
-  group.add(createElement('https://player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1', 0, 0, 240, 0))
-  group.add(createElement('https://player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1', 240, 0, 0, Math.PI / 2))
-  group.add(createElement('https://player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1', 0, 0, -240, Math.PI))
-  group.add(createElement('https://player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1', -240, 0, 0, -Math.PI / 2))
+  group.add(createElement(source, 0, 0, 240, 0))
+  group.add(createElement(source, 240, 0, 0, Math.PI / 2))
+  group.add(createElement(source, 0, 0, -240, Math.PI))
+  group.add(createElement(source, -240, 0, 0, -Math.PI / 2))
   scene.add(group)
 
-  const renderer = new CSS3DRenderer({ element: video.value })
+  const renderer = new CSS3DRenderer({
+    element: video.value as HTMLDivElement,
+  })
   renderer.setSize(1000, 600)
 
   const controls = new TrackballControls(camera, renderer.domElement)

From 410129aa507de83f3bed39c25f1c1a2de3588172 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <skyclouds2001@163.com>
Date: Mon, 31 Jul 2023 00:04:00 +0800
Subject: [PATCH 19/19] feat: small updates

---
 frontend/src/views/3D/RainingEffect.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/3D/RainingEffect.vue b/frontend/src/views/3D/RainingEffect.vue
index 5056b9ee..6083299d 100644
--- a/frontend/src/views/3D/RainingEffect.vue
+++ b/frontend/src/views/3D/RainingEffect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { AdditiveBlending, BufferAttribute, BufferGeometry, Color, PerspectiveCamera, Points, PointsMaterial, Scene, TextureLoader, WebGLRenderer } from 'three'
+import WebGL from 'three/examples/jsm/capabilities/WebGL'
 import Stats from 'three/examples/jsm/libs/stats.module'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { useEventListener } from '@sky-fly/shooks'
@@ -94,6 +95,7 @@ onMounted(() => {
     camera.updateProjectionMatrix()
     renderer.setSize(width, height)
     renderer.setPixelRatio(window.devicePixelRatio)
+    renderer.render(scene, camera)
   })
 
   useEventListener(window, 'orientationchange', () => {
@@ -105,12 +107,14 @@ onMounted(() => {
     camera.updateProjectionMatrix()
     renderer.setSize(width, height)
     renderer.setPixelRatio(window.devicePixelRatio)
+    renderer.render(scene, camera)
   })
 })
 </script>
 
 <template>
-  <div id="container" ref="container"></div>
+  <div v-if="WebGL.isWebGLAvailable()" id="container" ref="container"></div>
+  <div v-else>WebGL is not supported by current version of browser, please update to the newest version of browser.</div>
 </template>
 
 <style scoped lang="scss">