增加一个LED shader

package.json

@@ -19,6 +19,7 @@
     "ant-design-vue": "4.x",
     "highlight.js": "^11.11.1",
     "peerjs": "^1.5.4",
+    "three": "^0.172.0",
     "vue": "^3.3.0",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.5.0"
@@ -26,6 +27,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.6.1",
     "@types/node": "^20.10.6",
+    "@types/three": "^0.172.0",
     "@types/wicg-file-system-access": "^2023.10.5",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-vue": "^5.2.1",

src/pages/pointShader/pointShader.vue

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <video
+      id="video"
+      src="/static/test.mp4"
+      style="display: none"
+      loop
+      crossorigin="anonymous"
+    ></video>
+    <canvas id="canvas"></canvas>
+    <button @click="handleClick">播放</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as THREE from "three";
+import { onMounted, onUnmounted } from "vue";
+
+const handleClick = () => {
+  const video = document.getElementById("video") as HTMLVideoElement;
+  video.play();
+};
+
+// 创建场景和相机
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+camera.position.z = 5;
+
+onMounted(async () => {
+  const renderer = new THREE.WebGLRenderer({
+    canvas: document.querySelector("#canvas"),
+  });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  // 获取视频元素
+  const video = document.getElementById("video") as HTMLVideoElement;
+
+  // 创建视频纹理
+  const videoTexture = new THREE.VideoTexture(video);
+  videoTexture.minFilter = THREE.LinearFilter;
+  videoTexture.magFilter = THREE.LinearFilter;
+  videoTexture.format = THREE.RGBFormat;
+
+  // 播放视频
+  try {
+    await video.play();
+  } catch (err) {
+    console.error("视频播放失败:", err);
+  }
+
+  // 创建平面几何体
+  const geometry = new THREE.PlaneGeometry(10, 10, 200, 200);
+
+  // 创建 ShaderMaterial
+  const material = new THREE.ShaderMaterial({
+    vertexShader: `
+          varying vec2 vUv;
+          varying float vDist;
+          varying float vRandom;
+          uniform vec2 mouse;
+          uniform float radius;
+          uniform float time;
+          uniform float drag;
+
+          // 随机函数
+          float random(vec2 st) {
+              return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+          }
+
+          void main() {
+              vUv = uv;
+              vec3 pos = position;
+              
+              // 基于位置和时间生成随机值
+              float rand = random(pos.xy) * 2.0 - 1.0;
+              vRandom = rand;
+              
+              // 计算打散效果
+              float disperseFactor = sin(time * 0.5) * 0.00001;
+              vec3 disperseDir = vec3(
+                  rand * disperseFactor,
+                  rand * disperseFactor,
+                  0
+              );
+              
+              // 鼠标交互
+              vec2 mouseDir = pos.xy - mouse;
+              float dist = length(mouseDir);
+
+              if (dist < radius) {
+                  float force = (radius - dist) / radius;
+                  pos.xy += normalize(mouseDir) * force * 0.5;
+              }
+
+              // 应用打散效果
+              pos += disperseDir;
+              
+              // 减小粒子大小
+              gl_PointSize = 3.0 * (1.0 + random(pos.xy));
+
+              vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+              gl_Position = projectionMatrix * mvPosition;
+              
+              vDist = dist;
+          }`,
+    fragmentShader: `
+          uniform sampler2D mainTexture;
+          varying vec2 vUv;
+          varying float vDist;
+          varying float vRandom;
+          uniform float time;
+
+          void main() {
+              // 减小马赛克大小
+              float mosaicSize = 1000.0;
+              vec2 mosaicUv = floor(vUv * mosaicSize) / mosaicSize;
+              
+              // 减小抖动效果
+              float jitter = sin(time * 2.0 + vRandom * 6.28) * 0.000001;
+              mosaicUv += vec2(jitter);
+
+              vec4 texColor = texture2D(mainTexture, mosaicUv);
+              
+              // 调整扭曲和淡出效果
+              float distortionFactor = 1.0 - vDist * 0.05;
+              float alpha = 0.9 + 0.1 * sin(time * 2.0 + vRandom * 6.28);
+              
+              // 边缘淡出效果
+              float edgeFade = 1.0 - length(gl_PointCoord - vec2(0.5)) * 2.0;
+              edgeFade = smoothstep(0.0, 0.5, edgeFade);
+
+              gl_FragColor = vec4(texColor.rgb * distortionFactor, texColor.a * alpha * edgeFade);
+          }`,
+    uniforms: {
+      mainTexture: { value: videoTexture },
+      mouse: { value: new THREE.Vector2(0, 0) },
+      radius: { value: 0.5 },
+      time: { value: 0 },
+      drag: { value: 0.98 },
+    },
+    transparent: true,
+    side: THREE.DoubleSide,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+  });
+
+  // 创建平面点云
+  const points = new THREE.Points(geometry, material);
+  scene.add(points);
+
+  // 鼠标事件监听
+  const mouse = new THREE.Vector2();
+  const rect = renderer.domElement.getBoundingClientRect();
+  document.addEventListener("mousemove", (event) => {
+    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+    material.uniforms.mouse.value.set(mouse.x * 5, mouse.y * 5);
+  });
+
+  // 动画更新
+  function animate() {
+    requestAnimationFrame(animate);
+
+    if (video.readyState === video.HAVE_ENOUGH_DATA) {
+      videoTexture.needsUpdate = true;
+    }
+
+    material.uniforms.time.value += 0.016;
+    renderer.render(scene, camera);
+  }
+  animate();
+
+  // 窗口大小改变时更新
+  window.addEventListener("resize", () => {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(width, height);
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  const video = document.getElementById("video") as HTMLVideoElement;
+  video.pause();
+  video.src = "";
+  video.load();
+});
+</script>
+
+<style scoped>
+canvas {
+  width: 100vw;
+  height: 100vh;
+  display: block;
+}
+</style>

src/router/router.ts

@@ -1,11 +1,13 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Index from "../pages/file/index.vue";
 import Voice from "../pages/voice/webrtcVoice.vue";
+import PointShader from "../pages/pointShader/pointShader.vue";
 const router = createRouter({
     history: createWebHashHistory(),
     routes: [
         { path: "/", component: Index },
         { path: "/voice", component: Voice },
+        { path: "/pointShader", component: PointShader },
     ],
 });
 

yarn.lock

@@ -394,6 +394,11 @@
     core-js "^3.15.1"
     nanopop "^2.1.0"
 
+"@tweenjs/tween.js@~23.1.3":
+  version "23.1.3"
+  resolved "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-23.1.3.tgz#eff0245735c04a928bb19c026b58c2a56460539d"
+  integrity sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==
+
 "@types/json-schema@^7.0.12":
   version "7.0.15"
   resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -411,6 +416,28 @@
   resolved "https://registry.npmmirror.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
+"@types/stats.js@*":
+  version "0.17.3"
+  resolved "https://registry.npmmirror.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
+  integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==
+
+"@types/three@^0.172.0":
+  version "0.172.0"
+  resolved "https://registry.npmmirror.com/@types/three/-/three-0.172.0.tgz#5094852dfa781d2fe1c65eb1b4985a4aa99858b7"
+  integrity sha512-LrUtP3FEG26Zg5WiF0nbg8VoXiKokBLTcqM2iLvM9vzcfEiYmmBAPGdBgV0OYx9fvWlY3R/3ERTZcD9X5sc0NA==
+  dependencies:
+    "@tweenjs/tween.js" "~23.1.3"
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    "@webgpu/types" "*"
+    fflate "~0.8.2"
+    meshoptimizer "~0.18.1"
+
+"@types/webxr@*":
+  version "0.5.20"
+  resolved "https://registry.npmmirror.com/@types/webxr/-/webxr-0.5.20.tgz#b16b681af314ec011b2e8221b0a072d691c04953"
+  integrity sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==
+
 "@types/wicg-file-system-access@^2023.10.5":
   version "2023.10.5"
   resolved "https://registry.npmmirror.com/@types/wicg-file-system-access/-/wicg-file-system-access-2023.10.5.tgz#14b3c25eb4d914b5734795bdea71da229f918b9d"
@@ -661,6 +688,11 @@
   resolved "https://registry.npmmirror.com/@vue/tsconfig/-/tsconfig-0.1.3.tgz#4a61dbd29783d01ddab504276dcf0c2b6988654f"
   integrity sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==
 
+"@webgpu/types@*":
+  version "0.1.52"
+  resolved "https://registry.npmmirror.com/@webgpu/types/-/types-0.1.52.tgz#239995418d86de927269aca54cbadfbee04eb03a"
+  integrity sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -1175,6 +1207,11 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fflate@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.npmmirror.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
+  integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -1542,6 +1579,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+meshoptimizer@~0.18.1:
+  version "0.18.1"
+  resolved "https://registry.npmmirror.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz#cdb90907f30a7b5b1190facd3b7ee6b7087797d8"
+  integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
+
 micromatch@^4.0.4, micromatch@^4.0.5, micromatch@~4.0.8:
   version "4.0.8"
   resolved "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
@@ -2012,6 +2054,11 @@ text-table@^0.2.0:
   resolved "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+three@^0.172.0:
+  version "0.172.0"
+  resolved "https://registry.npmmirror.com/three/-/three-0.172.0.tgz#6944a72f8439e8f7e4b034c8539ec82f5ebe0082"
+  integrity sha512-6HMgMlzU97MsV7D/tY8Va38b83kz8YJX+BefKjspMNAv0Vx6dxMogHOrnRl/sbMIs3BPUKijPqDqJ/+UwJbIow==
+
 throttle-debounce@^5.0.0:
   version "5.0.2"
   resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.2.tgz#ec5549d84e053f043c9fd0f2a6dd892ff84456b1"