专辑封面隧道

真实专辑封面组成三维隧道，悬停吸起，点击沿弧线飞入中央，滚动或拖动不断穿行。

三维交互六框架TypeScript雷师傅原创

演示

悬停吸起封面，点击切换主专辑，上下滚动或拖动穿行；聚焦场景后用方向键切换，空格暂停或继续。

npm install react react-dom three@0.185.1

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom three@0.185.1

AlbumCoverTunnel.tsx

正在加载代码…

App.tsx

import { AlbumCoverTunnel } from "./AlbumCoverTunnel";

export default function App() {
  return <AlbumCoverTunnel />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.images` 1–96张图片地址或包含 src、alt 的对象；默认55张封面已内嵌。	`(string \| { src: string; alt?: string })[]`
`options.paused` 暂停模拟，键盘与本地控件仍可操作。	`boolean`	`false`
`options.autoTravel` 闲置五秒后自动向前穿行。	`boolean`	`true`
`options.active` 按从零开始的图片序号选择封面，外部更新不触发 onSelect。	`number`
`options.onSelect` 用户选择封面时回调图片序号。	`(index: number) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`675`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`