P12 Landing Page

项目简介

P12 Landing Page 是 Project Twelve 的官方网站，展示了项目的愿景，网站采用现代化设计，通过 3D 模型渲染和自定义粒子系统为用户提供沉浸式体验。

页面模块

Vision - 3D 星球交互

首页展示了一个可交互的 3D 星球模型，星球表面分布着各种游戏场景元素：建筑、角色、热带植物等。用户可以通过拖拽旋转星球，点击热点后相机会平滑过渡到目标视角，沉浸式探索 P12 的游戏世界。

技术实现：

• 使用 GLTF/DRACO 压缩格式加载 3D 星球模型
• 页面加载时先展示 20 万粒子组成的球体，基于 Simplex 4D Noise 生成有机运动效果，随后平滑过渡（1.2s）到实际模型
• CSS2DRenderer 实现 4 个可交互热点标签，热点位置绑定模型坐标
• 基于四元数（Quaternion）的拖拽旋转交互，闲置时自动旋转（~30 RPM）
• 热点点击触发 GSAP 动画（0.8s），相机平滑过渡到目标视角

News - 社区与资讯

社区入口聚合了 Discord、Twitter、Mirror、Youtube 等渠道，下方是新闻轮播卡片，展示项目的重要公告与活动信息。

技术实现：

• 移动端使用 Swiper Coverflow 效果（rotate: 0°, stretch: -20px, depth: 80px），3s 自动轮播
• 桌面端采用横向滚动容器，支持平滑滚动
• 新闻数据通过 API 获取，支持置顶标记和类型标签

Editor - GPARK 编辑器

P12 GPARK Editor 产品介绍页，展示”首个也是唯一的 GUI 链上引擎”的愿景。背景采用精美的二次元风格概念图，通过视差滚动营造层次感。

技术实现：

• 使用 parallax-js 库实现深度视差效果，data-depth 范围 ±0.1
• 6 层图片堆叠，基于 4196:2160 宽高比动态计算尺寸，防止边缘露出
• 两个 Swiper 轮播：Logo 垂直无限循环 + 功能特性渐隐切换（5s 间隔）
• 可点击的交互热点分布在特定坐标位置，触发弹窗展示详情

Assets - 数字资产

P12 Assets 页面展示生态系统中的数字身份资产，包括 P12 Gamer SBT、Developer SBT、Power Level 和 Badges。页面中央是可交互的 3D 角色模型，用户可点击切换查看不同资产类型。

亮点：角色模型支持在 3D 渲染与粒子形态之间平滑切换（8s 自动循环）。粒子化效果通过自定义 WebGL Shader 实现，呈现出角色”数据化”的视觉隐喻。

技术实现：

• 双渲染模式：Mesh 模式（原生 GLTF）与 Point 模式（粒子云）自动切换
• 粒子生成算法：基于三角形面采样，使用重心坐标在三角形内随机生成点，密度 0.1/单位面积，Drop Rate 13%
• 自定义 Shader：
  • Vertex Shader：伪随机粒子大小计算 (r² × 5 + 1) × 0.5 × size × dpr
  • Fragment Shader：Square 粒子形状 + smoothstep 软边缘过渡
• 后处理：UnrealBloomPass（strength: 2.4, threshold: 0.8, radius: 0.1）实现发光效果
• OrbitControls 自动旋转（1.5 RPM），支持阻尼但禁用缩放

Partners - 合作伙伴

合作伙伴页面展示投资方（Primavera、GALXE、CyberConnect 等）、链上合作伙伴（Linea、BNB Chain、Xterio 等）以及媒体报道（Bloomberg、Yahoo Finance 等）。

技术实现：

• 背景使用 ButterflyGL (HPG.js) 粒子流体模拟库
• 粒子跟随鼠标吸引/排斥交互，支持多点触控
• 参数漂移每 6s 触发一次（初始延迟 3s），实现动态视觉演化
• 基于 Page Visibility API 控制渲染，不可见时暂停以节省性能

技术亮点

Three.js 3D 渲染

• GLTF/DRACO 压缩格式加载 3D 星球模型，优化加载体验
• CSS2DRenderer 实现 DOM 元素与 3D 场景的混合渲染
• 可交互热点系统，点击后相机平滑过渡到目标视角

自定义 WebGL 粒子系统

• 20 万粒子的大规模粒子效果，GPU 加速渲染
• 基于 Simplex Noise 的有机运动算法
• 多层粒子系统（3 层），不同层级有不同的运动特征
• 自定义 Vertex/Fragment Shader，实现粒子大小、透明度、颜色的动态变化
• Additive Blending 混合模式，营造发光效果

GSAP 动画编排

• Timeline 编排复杂动画序列
• 粒子系统到 3D 模型的平滑过渡动画
• 基于四元数（Quaternion）的拖拽旋转交互
• 热点点击后的缩放聚焦动画

GPU 流体模拟背景

• 集成 ButterflyGL GPU 流体模拟库
• 后处理效果：Bloom 泛光、RGB 色差、时间混合
• 鼠标跟随粒子轨迹
• 参数漂移实现动态视觉演化

技术栈

• 框架: React 18
• 3D 渲染: Three.js (GLTF/DRACO Loader)
• 动画: GSAP Timeline, Tween.js
• 状态管理: Jotai
• 样式: LESS + BEM
• 数据请求: Axios, React Query