feat: 增加threejs 示例

components/Banner.vue

@@ -1,64 +1,70 @@
 <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>
   <div ref="anchorRef"></div>
 </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>

components/Footer.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-interface Social {
+export interface Social {
   href: string;
   title: string;
   componentName: string;

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'

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",

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;

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>