用途:在 Claude Code 中按概念描述生成交互式 Three.js 画布,输出单个自包含 HTML 文件,无需构建步骤、框架,可离线运行。定位是供观看、探索与沉思,而非产品查看器、游戏引擎或数据看板。若需完整创意指导,可同时启用 minoan-frontend-design 技能。
主要能力(六种模式):
- 叙事粒子:粒子系统、相位循环、晶格结构、球形相机、星空、连接线、响应式控制与 CSS 叠加层。
- Spinner/加载动画:基于 Three.js WebGPU + TSL,GPU 端粒子轨迹沿参数曲线运动。
- 无限画廊隧道:滚动驱动的程序化走廊,四壁嵌图,Catmull-Rom 无限路径与线框网格 GLSL 着色器。
- 活体标本:带动画 glTF 生物(蝴蝶、鹦鹉、鱼、水母),含跟随鼠标、游荡、软墙排斥等行为。
- 黑胶展示:CubeCamera 环境映射反射摄像头,程序化纹路/划痕纹理,滚动关键帧与拖拽刮擦交互。
- 玻璃主视觉:MeshPhysicalMaterial 实现折射、色散、虹彩的 3D 玻璃面板。
用法:用自然语言描述概念或叙事,例如 /threejs-particle-canvas the lifecycle of a star。可指定参数:particleCount(100-5000)、phaseCount(2-10)、cycleDuration(30-180s)、latticeGeometry、颜色、threadCount、starCount、cameraRadius、fogDensity、font 等。内置主题预设:Consciousness、Oceanic、Cosmic、Neural、Ruin。校验命令:python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_spinner.py output.js。黑胶生成器:python3 ~/.claude/skills/threejs-particle-canvas/scripts/vinyl_showcase_generator.py --label-text "MINOAN MYSTERY" --label-style cool --groove-preset deep --scratch-intensity heavy --audio crackle-only --theme dark -o output.html。
限制:资料未提供具体收费、价格与平台支持信息;使用需 Three.js r134+(通过 CDN,无 npm 或打包器)。输出为静态 HTML,不做数据看板或游戏引擎。隧道含图片注入哨兵与常量,不可重命名。WebGPU/TSL 模式对浏览器有要求,资料未详述兼容范围。生成内容含大量创意参数,最终效果取决于描述质量。