feat: import fluid portfolio snapshot

2026-06-11 12:24:52 +08:00
parent f7b529b1bd
commit 22baa715fd
22 changed files with 2955 additions and 6813 deletions
@@ -0,0 +1,255 @@
+import * as THREE from "three";
+import { blobFragment, blobVertex, particleFragment, particleVertex } from "./shaders";
+
+// 三状态目标值 —— 每帧向目标插值，无硬切
+const STATES = {
+  idle:      { freq: 1.15, amp: 0.24, speed: 0.22, heat: 0.0,  scale: 1.0,  attract: 0.12 },
+  thinking:  { freq: 2.6,  amp: 0.27, speed: 0.95, heat: 0.7,  scale: 0.86, attract: 1.0 },
+  answering: { freq: 1.9,  amp: 0.46, speed: 0.5,  heat: 0.22, scale: 1.09, attract: 0.0 },
+};
+
+const lerp = (a, b, t) => a + (b - a) * t;
+
+export function createMind(canvas, { reduced = false } = {}) {
+  const isMobile = window.innerWidth < 880;
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.5 : 2));
+  renderer.setSize(window.innerWidth, window.innerHeight);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 30);
+  camera.position.z = 6;
+
+  const group = new THREE.Group();
+  scene.add(group);
+
+  /* ---- 流体球 ---- */
+  const blobUniforms = {
+    uTime: { value: 0 },
+    uFreq: { value: STATES.idle.freq },
+    uAmp: { value: STATES.idle.amp },
+    uSpeed: { value: STATES.idle.speed },
+    uHeat: { value: 0 },
+    uOpacity: { value: 1 },
+    uColorA: { value: new THREE.Color("#22d3ee") },
+    uColorB: { value: new THREE.Color("#a78bfa") },
+  };
+  const blob = new THREE.Mesh(
+    new THREE.IcosahedronGeometry(1.35, isMobile ? 48 : 96),
+    new THREE.ShaderMaterial({
+      vertexShader: blobVertex,
+      fragmentShader: blobFragment,
+      uniforms: blobUniforms,
+      transparent: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    })
+  );
+  group.add(blob);
+
+  /* ---- 伴生粒子 ---- */
+  const COUNT = isMobile ? 900 : 2000;
+  const seeds = new Float32Array(COUNT * 3);
+  const radii = new Float32Array(COUNT);
+  const speeds = new Float32Array(COUNT);
+  for (let i = 0; i < COUNT; i++) {
+    seeds[i * 3] = Math.random();
+    seeds[i * 3 + 1] = Math.random();
+    seeds[i * 3 + 2] = Math.random();
+    radii[i] = 1.7 + Math.random() * 1.5;
+    speeds[i] = 0.25 + Math.random() * 0.6;
+  }
+  const pGeo = new THREE.BufferGeometry();
+  pGeo.setAttribute("position", new THREE.BufferAttribute(new Float32Array(COUNT * 3), 3));
+  pGeo.setAttribute("aSeed", new THREE.BufferAttribute(seeds, 3));
+  pGeo.setAttribute("aRadius", new THREE.BufferAttribute(radii, 1));
+  pGeo.setAttribute("aSpeed", new THREE.BufferAttribute(speeds, 1));
+
+  const particleUniforms = {
+    uTime: { value: 0 },
+    uAttract: { value: STATES.idle.attract },
+    uBurst: { value: 0 },
+    uDir: { value: -1 },
+    uSize: { value: isMobile ? 9 : 12 },
+    uMouse: { value: new THREE.Vector3(999, 999, 999) },
+    uMouseForce: { value: 0 },
+    uGrab: { value: 0 },
+    uHeat: { value: 0 },
+    uOpacity: { value: 1 },
+    uColorA: blobUniforms.uColorA,
+    uColorB: blobUniforms.uColorB,
+  };
+  const particles = new THREE.Points(
+    pGeo,
+    new THREE.ShaderMaterial({
+      vertexShader: particleVertex,
+      fragmentShader: particleFragment,
+      uniforms: particleUniforms,
+      transparent: true,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    })
+  );
+  group.add(particles);
+
+  /* ---- 状态机 ---- */
+  let current = { ...STATES.idle };
+  let target = STATES.idle;
+  let stateName = "idle";
+  let burst = 0;
+
+  const colorA = blobUniforms.uColorA.value;
+  const colorB = blobUniforms.uColorB.value;
+  const targetColorA = colorA.clone();
+  const targetColorB = colorB.clone();
+
+  // 停靠位置：side -1 内容在右 → 流体去左；1 → 右；0 → 居中偏后
+  const dock = new THREE.Vector3();
+  const dockTarget = new THREE.Vector3();
+  const pointer = { x: 0, y: 0 };
+
+  function dockFor(side) {
+    if (window.innerWidth < 880) {
+      // 移动端：居中上移、退后、缩小，让内容可读
+      return new THREE.Vector3(side * 0.3, 1.25, -1.6);
+    }
+    if (side === 0) return new THREE.Vector3(0, 0.95, -2.8);
+    return new THREE.Vector3(side * 2.05, 0.1, -0.7);
+  }
+
+  let side = 1;
+  let opacityTarget = 1;
+  let hasPointer = false;
+  let mouseSnapped = false;
+  // 按压牵引弹簧（欠阻尼 → 过冲回弹的阻尼感）
+  let grab = 0;
+  let grabVel = 0;
+  let grabTarget = 0;
+  const mouseRay = new THREE.Vector3();
+  const mouseLocal = new THREE.Vector3();
+
+  const api = {
+    setState(name) {
+      if (name === stateName || reduced) return;
+      stateName = name;
+      target = STATES[name];
+      if (name === "answering") burst = 1; // 喷发脉冲，随帧衰减
+    },
+    setSide(s) {
+      side = s;
+      dockTarget.copy(dockFor(s));
+      particleUniforms.uDir.value = s === 0 ? 0 : -s; // 粒子喷向内容区
+      opacityTarget = s === 0 ? 0.42 : 1; // 居中停靠时减淡，保证内容可读
+    },
+    setPalette([a, b]) {
+      targetColorA.set(a);
+      targetColorB.set(b);
+    },
+    get state() {
+      return stateName;
+    },
+    debug() {
+      return { stateName, side, dock: dock.toArray(), dockTarget: dockTarget.toArray(), group: group.position.toArray() };
+    },
+  };
+
+  api.setSide(1);
+  dock.copy(dockTarget);
+  group.position.copy(dock);
+
+  window.addEventListener("pointermove", (e) => {
+    pointer.x = (e.clientX / window.innerWidth) * 2 - 1;
+    pointer.y = (e.clientY / window.innerHeight) * 2 - 1;
+    hasPointer = true;
+  });
+
+  window.addEventListener("pointerdown", (e) => {
+    pointer.x = (e.clientX / window.innerWidth) * 2 - 1;
+    pointer.y = (e.clientY / window.innerHeight) * 2 - 1;
+    hasPointer = true;
+    grabTarget = 1;
+  });
+  const release = () => { grabTarget = 0; };
+  window.addEventListener("pointerup", release);
+  window.addEventListener("pointercancel", release);
+  window.addEventListener("blur", release);
+
+  window.addEventListener("resize", () => {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    api.setSide(side);
+  });
+
+  /* ---- 帧循环（由外部 ticker 驱动） ---- */
+  const clock = new THREE.Clock();
+  function tick() {
+    const dt = Math.min(clock.getDelta(), 0.05);
+    const t = clock.elapsedTime;
+    const k = 1 - Math.pow(0.0014, dt); // 帧率无关的平滑系数
+
+    current.freq = lerp(current.freq, target.freq, k);
+    current.amp = lerp(current.amp, target.amp, k);
+    current.speed = lerp(current.speed, target.speed, k);
+    current.heat = lerp(current.heat, target.heat, k);
+    current.scale = lerp(current.scale, target.scale, k);
+    current.attract = lerp(current.attract, target.attract, k);
+    burst = lerp(burst, 0, 1 - Math.pow(0.25, dt)); // 脉冲衰减
+
+    blobUniforms.uTime.value = reduced ? t * 0.25 : t;
+    blobUniforms.uFreq.value = current.freq;
+    blobUniforms.uAmp.value = current.amp;
+    blobUniforms.uSpeed.value = current.speed;
+    blobUniforms.uHeat.value = current.heat;
+
+    particleUniforms.uTime.value = reduced ? t * 0.25 : t;
+    particleUniforms.uAttract.value = current.attract;
+    particleUniforms.uBurst.value = burst;
+    particleUniforms.uHeat.value = current.heat;
+
+    colorA.lerp(targetColorA, k);
+    colorB.lerp(targetColorB, k);
+
+    const op = lerp(blobUniforms.uOpacity.value, opacityTarget, k);
+    blobUniforms.uOpacity.value = op;
+    particleUniforms.uOpacity.value = op;
+
+    const breathe = 1 + Math.sin(t * 1.4) * 0.018;
+    group.scale.setScalar(current.scale * breathe);
+
+    dock.lerp(dockTarget, 1 - Math.pow(0.02, dt));
+    group.position.set(
+      dock.x + pointer.x * 0.14,
+      dock.y - pointer.y * 0.1,
+      dock.z
+    );
+    group.rotation.y += dt * 0.12;
+    group.rotation.x = pointer.y * 0.08;
+
+    // 鼠标牵引：把指针投影到流体所在深度平面，转到 group 局部空间后平滑跟随
+    if (hasPointer && !reduced) {
+      mouseRay.set(pointer.x, -pointer.y, 0.5).unproject(camera).sub(camera.position).normalize();
+      const planeDist = (group.position.z - camera.position.z) / mouseRay.z;
+      mouseLocal.copy(camera.position).addScaledVector(mouseRay, planeDist);
+      group.updateMatrixWorld();
+      group.worldToLocal(mouseLocal);
+      if (!mouseSnapped) {
+        particleUniforms.uMouse.value.copy(mouseLocal);
+        mouseSnapped = true;
+      } else {
+        particleUniforms.uMouse.value.lerp(mouseLocal, 1 - Math.pow(0.01, dt));
+      }
+      particleUniforms.uMouseForce.value = lerp(particleUniforms.uMouseForce.value, 0.85, k);
+
+      // 按压牵引：欠阻尼弹簧积分 —— 按下缓冲吸入，松开过冲散开再归位
+      grabVel += (grabTarget - grab) * 26 * dt;
+      grabVel *= Math.exp(-3.2 * dt);
+      grab += grabVel * dt;
+      particleUniforms.uGrab.value = grab;
+    }
+
+    renderer.render(scene, camera);
+  }
+
+  return { ...api, tick };
+}
@@ -0,0 +1,202 @@
+// 思维流体 GLSL —— Ashima simplex noise + 3 octave FBM + Fresnel
+const SIMPLEX = /* glsl */ `
+vec3 mod289(vec3 x){ return x - floor(x * (1.0/289.0)) * 289.0; }
+vec4 mod289(vec4 x){ return x - floor(x * (1.0/289.0)) * 289.0; }
+vec4 permute(vec4 x){ return mod289(((x*34.0)+1.0)*x); }
+vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v){
+  const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0))
+    + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+    + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+  p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+}
+
+float fbm(vec3 p){
+  float sum = 0.0;
+  float amp = 0.5;
+  for (int i = 0; i < 3; i++) {
+    sum += amp * snoise(p);
+    p *= 2.1;
+    amp *= 0.5;
+  }
+  return sum;
+}
+`;
+
+export const blobVertex = /* glsl */ `
+uniform float uTime;
+uniform float uFreq;
+uniform float uAmp;
+uniform float uSpeed;
+
+varying float vDisp;
+varying vec3 vNormal;
+varying vec3 vViewDir;
+
+${SIMPLEX}
+
+void main(){
+  float t = uTime * uSpeed;
+  float d = fbm(normal * uFreq + vec3(t, t * 0.7, -t * 0.4));
+  vDisp = d;
+  vec3 displaced = position + normal * d * uAmp;
+
+  vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
+  vNormal = normalize(normalMatrix * normal);
+  vViewDir = normalize(-mvPosition.xyz);
+  gl_Position = projectionMatrix * mvPosition;
+}
+`;
+
+export const blobFragment = /* glsl */ `
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+uniform float uHeat;
+uniform float uOpacity;
+
+varying float vDisp;
+varying vec3 vNormal;
+varying vec3 vViewDir;
+
+void main(){
+  float fresnel = pow(1.0 - max(dot(vNormal, vViewDir), 0.0), 2.4);
+  vec3 base = mix(uColorA, uColorB, vDisp * 0.5 + 0.5);
+  base = mix(base, vec3(1.0, 0.62, 0.38), uHeat * 0.4);
+  vec3 color = base * (0.32 + fresnel * 1.6) + base * smoothstep(0.35, 0.9, vDisp) * 0.45;
+  float alpha = (0.22 + fresnel * 0.85) * uOpacity;
+  gl_FragColor = vec4(color, alpha);
+}
+`;
+
+export const particleVertex = /* glsl */ `
+uniform float uTime;
+uniform float uAttract;  // 1 = 吸入核心 (thinking)
+uniform float uBurst;    // 1 = 向外喷发 (answering)
+uniform float uDir;      // 喷发的水平方向（指向内容区）
+uniform float uSize;
+uniform vec3 uMouse;     // 指针在粒子局部空间的位置
+uniform float uMouseForce;
+uniform float uGrab;     // 按压牵引强度（弹簧驱动，可为负 → 回弹散开）
+
+attribute vec3 aSeed;    // 每粒子随机种子
+attribute float aRadius;
+attribute float aSpeed;
+
+varying float vFade;
+
+void main(){
+  float t = uTime * aSpeed;
+  // 进动轨道：两组相位叠加，避免规则圆轨
+  float theta = aSeed.x * 6.2831 + t;
+  float phi = aSeed.y * 3.1415 + sin(t * 0.6 + aSeed.z * 6.2831) * 0.7;
+
+  float r = aRadius * mix(1.0, 0.3, uAttract);
+  r += uBurst * (0.8 + aSeed.z * 2.6);
+
+  vec3 pos = vec3(
+    cos(theta) * sin(phi) * r,
+    cos(phi) * r * 0.85,
+    sin(theta) * sin(phi) * r
+  );
+  // 喷发时整体偏向内容区一侧
+  pos.x += uBurst * uDir * (0.6 + aSeed.y * 1.8);
+
+  // 鼠标牵引：靠近指针的粒子被吸过去，绕指针形成小漩涡
+  float md = distance(pos, uMouse);
+  float pull = smoothstep(2.8, 0.2, md) * uMouseForce * (0.35 + aSeed.z * 0.65);
+  vec3 swirl = vec3(
+    sin(t * 2.2 + aSeed.x * 6.2831),
+    cos(t * 1.7 + aSeed.y * 6.2831),
+    sin(t * 1.3 + aSeed.z * 6.2831)
+  ) * (0.12 + aSeed.y * 0.3);
+  pos = mix(pos, uMouse + swirl, pull);
+
+  // 按住鼠标：全体粒子被牵向按压点，逐粒错相往复脉动；
+  // uGrab 为负（松开回弹）时 mix 外推 → 粒子向外散开再被拉回
+  float osc = 0.55 + 0.45 * sin(uTime * (1.2 + aSeed.x * 1.6) + aSeed.y * 6.2831);
+  float gpull = clamp(uGrab, -0.35, 1.25) * osc * (0.5 + aSeed.z * 0.5);
+  gpull = clamp(gpull, -0.4, 0.96);
+  vec3 gswirl = vec3(
+    sin(t * 1.8 + aSeed.y * 6.2831),
+    cos(t * 1.4 + aSeed.z * 6.2831),
+    sin(t * 1.1 + aSeed.x * 6.2831)
+  ) * (0.18 + aSeed.x * 0.5);
+  pos = mix(pos, uMouse + gswirl, gpull);
+
+  vFade = 1.0 - uBurst * aSeed.z * 0.9;
+  vFade = min(vFade + pull * 0.5 + max(gpull, 0.0) * 0.35, 1.2);
+
+  vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+  gl_PointSize = uSize * (0.6 + aSeed.z) * (1.0 + pull * 0.5 + max(gpull, 0.0) * 0.3) * (3.4 / -mvPosition.z);
+  gl_Position = projectionMatrix * mvPosition;
+}
+`;
+
+export const particleFragment = /* glsl */ `
+uniform vec3 uColorA;
+uniform vec3 uColorB;
+uniform float uHeat;
+uniform float uOpacity;
+
+varying float vFade;
+
+void main(){
+  vec2 uv = gl_PointCoord - 0.5;
+  float d = length(uv);
+  float mask = smoothstep(0.5, 0.05, d);
+  vec3 color = mix(uColorA, uColorB, vFade);
+  color = mix(color, vec3(1.0, 0.62, 0.38), uHeat * 0.35);
+  gl_FragColor = vec4(color, mask * vFade * 0.75 * uOpacity);
+}
+`;