infinite-tunnel
使用Three.js和GSAP创建沉浸式无限隧道视觉效果的AI技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：infinite-tunnel。 它的用途是：使用Three.js和GSAP创建沉浸式无限隧道视觉效果的AI技能。 完整的 Skill 内容见：https://321skill.com/skills/infinite-tunnel/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Three.js做一个产品展示网站，想要一个无限延伸的彩色管道作为背景，请用infinite-tunnel技能帮我实现。”，它会根据技能库中的模式，生成包含隧道分段、色彩渐变和无限循环动画的完整Three.js与GSAP代码片段，你可以直接集成到项目中。
介绍
这个技能旨在解决开发者在网页中创建流畅、引人入胜的3D无限隧道或滚动效果时，面临的复杂几何计算、动画循环逻辑和性能优化难题。它通过提供一套完整的代码模式、最佳实践和核心逻辑，将复杂的Three.js和GSAP动画实现过程标准化，让开发者能快速集成到项目中。
使用时，你只需在兼容的AI编码工具（如Claude Code、Cursor）中，通过显式指令（如“使用infinite-tunnel技能”）或提及相关关键词（如“3D隧道”、“无限滚动”），AI助手便会调用该技能，为你生成或优化实现无限隧道效果的核心代码框架，包括场景设置、几何体创建、相机动画和循环逻辑。
该技能非常适合前端开发、全栈开发和智能体开发者，特别是那些需要在网站、作品集或交互式演示中构建酷炫3D视觉体验，但希望节省底层实现时间、避免重复造轮子的技术人员。
建议在使用前确保项目已安装Three.js和GSAP依赖。由于涉及3D渲染，需注意性能优化，尤其是在移动设备上。对于非常定制化的视觉效果，可能需要在技能生成的代码基础上进行二次调整。
核心特点
与仅提供代码片段的普通教程不同，它封装了完整的“无限循环”核心逻辑（摄像机移动与几何体重置）及多种高级效果（如粒子、辉光）的实现模式，可直接被AI智能体理解并调用，实现从描述到可运行代码的一键生成。
注意事项
不适合对Three.js零基础、或需要完全定制化、非隧道类3D动画（如角色动画、物理模拟）的场景。
常见问题
如何用这个技能创建一个发光的无限隧道？
在AI工具中提示：“使用infinite-tunnel技能，创建一个带有辉光（Bloom）效果的霓虹色无限隧道”，技能会引导生成包含后期处理（post-processing）的代码。
这个技能支持移动端适配吗？
技能提供的代码模式包含动态宽高比处理，但移动端性能极大依赖设备GPU，需要开发者根据生成的代码进一步做性能测试和优化。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/infinite-tunnel/raw/index.md 读取 infinite-tunnel 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/infinite-tunnel/raw/index.md（查看排版版本）