ID Life Landing Page
Immortal Dragons 官网，包含自定义 Navier-Stokes 流体模拟引擎、3D 模型交互与 GSAP 滚动动画系统
Next.js
Three.js
GSAP
WebGL
React Three Fiber
January 15, 2025
项目简介
ID Life 是 Immortal Dragons 的官方网站，是一家专注于延寿研究的生物科技基金。网站采用现代化设计语言，通过自定义流体模拟、3D 交互场景与滚动驱动的页面过渡动画，为用户呈现沉浸式的视觉体验。
页面模块
Presence - 3D 龙模型交互
首页展示了一个可交互的 3D 龙模型，代表着 Immortal Dragons 的品牌标识。用户可以通过手势拖拽旋转龙模型，松手后模型会通过弹簧物理回弹到初始位置，闲置时模型会自动进行轻微的摇摆动画。
技术实现：
- 基于 React Three Fiber 渲染 3D 龙模型
- 使用 @react-three/drei 的
useGesture实现手势拖拽旋转 - 弹簧物理系统实现松手后的回弹效果
- 闲置自动摇摆动画，增强视觉生动感
Portfolio - 项目展示
Spectrum
Engagement - 交互式世界地图
Engagement 页面展示 Immortal Dragons 的全球布局，通过交互式世界地图呈现各地区的合作伙伴与研究机构。地图采用自定义 SVG 滤镜实现鼠标跟随的光晕效果，增强视觉层次感。
Twin
Connect
