diff --git a/components/Banner.vue b/components/Banner.vue
index a08b0cf..eb0ae43 100644
--- a/components/Banner.vue
+++ b/components/Banner.vue
@@ -1,15 +1,21 @@
 <template>
   <Header></Header>
-  <div class="banner relative h-screen bg-scroll md:bg-fixed  bg- bg-cover flex justify-center items-center"
-    :style="bannerStyle">
-    <div class="antialiased text-2xl WenYueQingLongTi text-white hover:transition-backdrop-blur duration-300 hover:backdrop-blur-[3px] p-[2rem] mix-blend-difference">
+  <div
+    class="banner relative h-screen bg-scroll md:bg-fixed bg- bg-cover flex justify-center items-center"
+    :style="bannerStyle"
+  >
+    <div
+      class="antialiased text-2xl WenYueQingLongTi text-white hover:transition-backdrop-blur duration-300 hover:backdrop-blur-[3px] p-[2rem] mix-blend-difference"
+    >
       <p class="mb-20">{{ oneText.hitokoto }}</p>
       <p class="text-center" v-if="Boolean(oneText.from)">
         {{ oneText.from }}-{{ oneText.creator }}
       </p>
     </div>
-    <div @click="scrollIntoPost"
-      class="animate-bounce absolute left-0 right-0 bottom-1 text-center cursor-pointer text-white ">
+    <div
+      @click="scrollIntoPost"
+      class="animate-bounce absolute left-0 right-0 bottom-1 text-center cursor-pointer text-white"
+    >
       <svg-icon name="paper-plane" class="text-4xl w-4 h-4"></svg-icon>
     </div>
   </div>
@@ -17,48 +23,48 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import dayjs from "dayjs";
-import { getHitokoto } from '@/api/hitokoto'
+import { ref } from "vue"
+import dayjs from "dayjs"
+import { getHitokoto } from "@/api/hitokoto"
 const props = defineProps({
   cover: {
     type: String,
-    default: `https://static.nnnnzs.cn/bing/${dayjs().format("YYYYMMDD")}.png`,
+    default: `https://static.nnnnzs.cn/bing/${dayjs().format("YYYYMMDD")}.png`
   },
   autoScroll: {
     type: Boolean,
     default: true
   }
-});
+})
 const anchorRef = ref<HTMLElement>()
 const bannerStyle = ref({
-  "background-image": `url(${props.cover})`,
-});
+  "background-image": `url(${props.cover})`
+})
 
 const oneText = ref<HitokotoData>({
   creator: "",
   from: "",
-  hitokoto: "",
-});
-
+  hitokoto: ""
+})
 
-getHitokoto().then(res => {
-  oneText.value = res;
+getHitokoto().then((res) => {
+  oneText.value = res
 })
 const route = useRoute()
 onMounted(() => {
-  if (!route.hash && props.autoScroll) {
+  if (!route.hash && props.autoScroll && window.scrollY === 0) {
     setTimeout(() => {
       scrollIntoPost()
-    }, 1000);
+    }, 1000)
   }
 })
 
 const scrollIntoPost = () => {
-  anchorRef.value && anchorRef.value.scrollIntoView({
-    behavior: 'smooth'
-  })
-};
+  anchorRef.value &&
+    anchorRef.value.scrollIntoView({
+      behavior: "smooth"
+    })
+}
 
 // loadHitokoto();
 </script>
diff --git a/components/Footer.vue b/components/Footer.vue
index 8a00ce2..81c8fd4 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-interface Social {
+export interface Social {
   href: string;
   title: string;
   componentName: string;
diff --git a/composables/routes.ts b/composables/routes.ts
index 4b8adc0..cf70186 100644
--- a/composables/routes.ts
+++ b/composables/routes.ts
@@ -1,11 +1,12 @@
+/** 三方验证页面路由 */
 export const AUTH_PATH = '/c/auth';
-
+/** 编辑页面 */
 export const EDIT_PAGE = '/c/edit/'
-
+/** 工具 */
 export const TOOLSE_PERFIX_PAGE = '/c/tools'
-
+/** 管理后台页面 */
 export const TOOLES_PAGE = TOOLSE_PERFIX_PAGE + '/admin'
-
+/** 标签页面 */
 export const TAG_PREFIX_PAGE = '/tags'
-
+/** 默认跳转方式 */
 export const A_TAGET = '_blank'
diff --git a/package.json b/package.json
index 5a3030d..bbe8258 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "postinstall": "nuxt prepare",
     "pm2": "pm2 start ecosystem.config.cjs --only nnnnzs.cn",
     "changelog": "conventional-changelog -p custom-config -i CHANGELOG.md -s -r 0  -n ./scripts/changelog-option.cjs",
-    "scp":"./scripts/build.sh"
+    "scp": "./scripts/build.sh"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
@@ -45,6 +45,7 @@
     "@docsearch/js": "^3.6.0",
     "@nuxtjs/algolia": "^1.10.2",
     "@pinia/nuxt": "^0.5.1",
+    "@types/three": "^0.165.0",
     "axios": "^1.7.2",
     "cryptojs": "^2.5.3",
     "dayjs": "^1.11.11",
diff --git a/pages/c/tools.vue b/pages/c/tools.vue
index dc28993..e614bb3 100644
--- a/pages/c/tools.vue
+++ b/pages/c/tools.vue
@@ -33,6 +33,7 @@ const list = [
   { path: '/admin', name: "管理" },
   { path: '/online', name: "在线" },
   { path: '/log', name: "日志" },
+  { path: '/three', name: "three" },
 ].map(e => {
   e.path = TOOLSE_PERFIX_PAGE + e.path
   return e;
diff --git a/pages/c/tools/three.vue b/pages/c/tools/three.vue
new file mode 100644
index 0000000..ba5bded
--- /dev/null
+++ b/pages/c/tools/three.vue
@@ -0,0 +1,56 @@
+<template>
+  <div ref="bodyRef" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import * as THREE from "three"
+
+const bodyRef = ref<HTMLElement>()
+
+let scene: THREE.Scene
+let camera: THREE.PerspectiveCamera
+let renderer: THREE.Renderer
+
+onMounted(() => {
+  scene = new THREE.Scene()
+  const { width, height } = bodyRef.value!.getBoundingClientRect()
+  camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
+
+  renderer = new THREE.WebGLRenderer()
+  renderer.setSize(width, height)
+
+  bodyRef.value!.appendChild(renderer.domElement)
+  // 几何体
+  const geometry = new THREE.BoxGeometry(1, 1, 1)
+  // 材质
+  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+  // 方块
+  const cube = new THREE.Mesh(geometry, material)
+  scene.add(cube)
+
+  const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff })
+  const points = [
+    new THREE.Vector3(0, 0, 0),
+    new THREE.Vector3(0, 1, 0),
+    new THREE.Vector3(1, 1, 0),
+    new THREE.Vector3(1, 0, 0)
+  ]
+  // 线
+  const geometryLine = new THREE.BufferGeometry().setFromPoints(points)
+  const line = new THREE.Line(geometryLine, lineMaterial)
+  scene.add(line)
+
+  camera.position.z = 5
+
+  function animate() {
+    requestAnimationFrame(animate)
+    renderer.render(scene, camera)
+    cube.rotation.x += 0.01
+    cube.rotation.y += 0.01
+  }
+
+  animate()
+})
+</script>
+
+<style scoped></style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c151b15..f3f447b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   '@pinia/nuxt':
     specifier: ^0.5.1
     version: 0.5.1(typescript@5.4.5)(vue@3.4.27)
+  '@types/three':
+    specifier: ^0.165.0
+    version: 0.165.0
   axios:
     specifier: ^1.7.2
     version: 1.7.2
@@ -3057,6 +3060,10 @@ packages:
       minimatch: 9.0.4
     dev: true
 
+  /@tweenjs/tween.js@23.1.2:
+    resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==}
+    dev: false
+
   /@types/cacheable-request@6.0.3:
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
     dependencies:
@@ -3164,12 +3171,26 @@ packages:
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
     dev: true
 
+  /@types/stats.js@0.17.3:
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+    dev: false
+
   /@types/svgo@2.6.4:
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
     dependencies:
       '@types/node': 20.8.6
     dev: false
 
+  /@types/three@0.165.0:
+    resolution: {integrity: sha512-AJK8JZAFNBF0kBXiAIl5pggYlzAGGA8geVYQXAcPCEDRbyA+oEjkpUBcJJrtNz6IiALwzGexFJGZG2yV3WsYBw==}
+    dependencies:
+      '@tweenjs/tween.js': 23.1.2
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.16
+      fflate: 0.8.2
+      meshoptimizer: 0.18.1
+    dev: false
+
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -3178,6 +3199,10 @@ packages:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: true
 
+  /@types/webxr@0.5.16:
+    resolution: {integrity: sha512-0E0Cl84FECtzrB4qG19TNTqpunw0F1YF0QZZnFMF6pDw1kNKJtrlTKlVB34stGIsHbZsYQ7H0tNjPfZftkHHoA==}
+    dev: false
+
   /@types/wordcloud@1.2.2:
     resolution: {integrity: sha512-UMKd/doXE3karDUd5l+2LqFKUU4SmuPWOT/VA22OrPOUGMlb8/qQvSf+DBLQf/sd8UphuBGxOK/jB/1BB5oQRw==}
     dev: true
@@ -6016,6 +6041,10 @@ packages:
       ua-parser-js: 0.7.37
     dev: false
 
+  /fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+    dev: false
+
   /file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
     dev: true
@@ -7975,6 +8004,10 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  /meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+    dev: false
+
   /metadata-scraper@0.2.61:
     resolution: {integrity: sha512-ECV8r10nIVgn7Y5vY8lnlvi9vF1YgYBJjn2R1zrOcKRe47ra9Yg25ZE1ejL3Equqi8u2Mp346KHqIcR4PLdyTA==}
     dependencies: