如果只看标题， Show HN: Christopher Nolan's Hymn to Athena 很难让人立刻反应过来：这是一个网站、一段交互实验、还是一个 AI 生成项目？但如果你看过诺兰的《信条》（Tenet），看到 Athena 这个词，应该会想起那个藏在整个时间逆转阴谋核心里的“算法”装置。Athena 是诺兰电影里一个不算庞大、却决定整个时间线走向的关键设定：一件被拆分成多个部件、可以逆转熵流方向的神秘算法。把一个电影的虚构概念做成一个面向 Hacker News 展示的技术项目，这件事本身就很有诺兰风格：用最复杂的物理隐喻，去讲一个最直接的情感命题。

这篇文章我想以一个技术实践的视角来拆解，如果你也想做一个“电影概念可视化”类的 Web 项目，从诺兰的 Athena 设定切入，到底应该怎么设计、怎么选型、怎么一步步实现。

1. 这个项目真正要解决的问题

先说一个判断：这类“Show HN”项目的核心价值，不在于 3D 渲染有多炫，而在于你有没有把抽象概念转化成交互体验的能力。

诺兰电影里的 Athena，本质是一个“熵逆转算法”。这个概念如果写成技术文档，三句话就能说完：它能改变物体熵流方向，让子弹从弹孔回到枪膛，让爆炸反向坍缩。但如果你想让一个普通观众快速理解这个概念，文字远不如一段可交互的视觉演示来得直接。

这个项目要解决的，正是这样一个问题：

如何用浏览器技术，把一个电影设定中的抽象物理概念，变成用户可以亲手操作的实时体验？

它涉及的并不是某一种高深技术，而是多种前端能力的组合：

• 3D 场景构建与动画渲染；
• 粒子系统与时间轴控制；
• 状态管理与人机交互；
• 响应式布局与性能调优。

如果你正在做类似的项目——不管是对电影概念的可视化、对历史数据的沉浸式还原，还是对抽象算法的交互演示，这篇文章的思路和代码都能直接复用。而如果你只是想找一个 Three.js 或 React 结合的实战案例，也能从后面的实现里找到完整的参考路径。

真正值得学习的，不是“用 Three.js 画一个立方体”，而是： 从一个概念出发，拆解交互需求，再落地为工程实现。

2. Athena 概念拆解与项目功能设计

2.1 诺兰电影中的 Athena 是什么

在《信条》的设定里，Athena 是被拆分后隐藏于世界各地的算法装置。当所有部件被组合并激活后，整个世界的时间流向会被逆转。而从物理学角度看，这描述的其实是“熵减”状态：混乱度自动降低、破碎的玻璃自行复原、子弹回到弹膛。

对整个项目来说，Athena 最重要的视觉和交互特征有三个：

1. 时间可逆 ：一切运动都可以正向/反向播放。
2. 熵流可视化 ：需要一种直观方式表现“正向变得越来越混乱”与“反向恢复秩序”。
3. 部件组合 ：Athena 由多个部件拼接而成，这让它天然适合做模块化拆解和重组交互。

2.2 交互项目的功能边界

一个“致敬”类项目最忌讳贪多。如果你把电影里所有设定都塞进去，用户只会迷失方向。这个项目更合理的功能范围是做一个 3D 互动演示：

• 用户进入页面后，看到一个悬浮的多面体核心（Athena）。
• 围绕核心分布的粒子系统，默认做正向运动（熵增，扩散出去）。
• 用户点击按钮或拖动时间轴时，粒子运动反向，所有效果表现为熵减——碎片重新聚拢、颜色恢复、透明度收敛。
• 提供一个时间轴滑块，让用户可以在正反两个方向自由控制运动。

换句话说，这个项目要表达的核心交互就是： 一开始很混乱，拖动时间轴，一切回到秩序。

2.3 技术挑战在哪里

很多人以为这类项目最难的部分是 Three.js 场景搭建。实际上，场景搭建只是基础，真正的技术挑战在两方面：

• 粒子数量与性能的平衡 ：粒子太少效果不够震撼，太多则可能在低端设备上掉帧。
• 时间反向状态的完整性 ：反向播放时，粒子需要精确回到出发位置，而不是简单地改变速度方向；否则演示会失真。

这也是为什么需要先从架构上想清楚，而不是一上来就狂堆代码。

3. 技术选型与核心架构设计

3.1 为什么选择 Three.js + React

目前浏览器端 3D 可视化主要有三条路线：

技术路线	适合场景	学习成本
原生 WebGL	需要极致性能，完全掌控渲染管线	高
Three.js	常规 3D 场景、粒子系统、动画	中
Babylon.js	游戏引擎级功能需求	中高

对于这个项目，Three.js 是最合适的选择。它有强大的粒子系统支持，可以快速实现 BufferGeometry；社区文档丰富；和 React 结合可以做比较清晰的组件化设计。

React 不是必须的，但在这个项目里有个明显优势：

• 用 React 管理 UI 控件（时间轴、按钮、状态显示）；
• 用 Three.js 管理 3D 场景；
• 两者通过 ref 和自定义事件通信，避免频繁 setState 导致 3D 场景重建。

3.2 架构分层

整个项目可以拆成三层：

交互层（React UI）
    ↓
状态层（控制时间方向与播放进度）
    ↓
渲染层（Three.js 场景、粒子系统、核心模型）

核心思路是： UI 层和 3D 层不直接互调对方内部方法，而是统一通过一个状态对象或事件总线通信。

举个实际例子：用户拖动时间轴滑块，React 组件只负责把当前时间值写入一个共享状态，不直接操作 Three.js 对象。Three.js 渲染循环在每一帧读取这个共享状态，更新粒子的位置和颜色。这样 UI 操作再频繁，也不会触发 React 组件的重复渲染，性能会更平稳。

3.3 数据流设计

为方便理解，画出核心数据流（这里用文字描述）：

用户操作（按钮/滑块）
    ↓
更新 Timeline 状态（currentTime, direction）
    ↓
每帧渲染循环读取状态
    ↓
计算每个粒子的目标位置（正向 = 随机扩散位置；反向 = 初始聚集位置）
    ↓
更新粒子位置和颜色

这也是整个项目中最值得借鉴的部分： 把“用户交互/状态管理”和“渲染更新”解耦。

4. 环境准备与工程初始化

在开始写代码之前，先说明环境要求。由于这个项目使用的技术栈是 React + Vite + Three.js，你本机需要准备：

• Node.js 版本建议使用 18 或以上，具体以你本机环境为准；
• 推荐使用 VS Code，方便调试 TypeScript 和 JSX；
• 包管理器可以使用 npm 或 pnpm，本文以 npm 为例，其他工具命令类似。

4.1 创建项目

npm create vite@latest athena-hymn -- --template react
cd athena-hymn
npm install

执行完上面的命令后，你会得到一个 React 基础工程目录结构。

4.2 安装 Three.js 依赖

npm install three
npm install -D @types/three

three 是核心 3D 库， @types/three 是 TypeScript 类型声明文件。如果你用 JavaScript 而非 TypeScript，第二个包可以不装，但建议还是安装，对编码过程中的提示帮助很大。

4.3 清理默认模板代码

Vite 默认模板会生成一个 App.jsx 和 App.css，我们需要清理掉演示用的内容，保持入口文件干净。

进入 src/App.jsx ，把里边的默认代码清空，只保留一个描述性结构，后续再填充完整代码。这里不是核心逻辑，具体文件改造会在下一节统一给出。

5. 核心功能实现与代码解析

下面进入整个项目的核心部分。我会分成四个文件来写：

• src/App.jsx ：页面入口，负责搭 UI 和初始化 3D 视图；
• src/components/Scene.jsx ：Three.js 场景管理与粒子动画逻辑；
• src/components/TimelineControl.jsx ：时间轴与按钮控件；
• src/index.css ：基础样式。

5.1 场景组件：Three.js 粒子系统与熵运动

这个文件是整个项目的核心，实现了三件事：

1. 构建一个多面体核心模型；
2. 创建大量粒子，让它们围绕核心运动；
3. 接收外部状态，控制粒子聚集或扩散。

先看代码。

// 文件路径：src/components/Scene.jsx
import { useEffect, useRef } from 'react';
import * as THREE from 'three';

// 粒子数量，可根据设备性能调整
const PARTICLE_COUNT = 6000;
// 扩散半径
const SCATTER_RADIUS = 8;
// 聚集半径
const CLUSTER_RADIUS = 2.5;

export default function Scene({ timelineRef }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 1. 创建场景、相机、渲染器
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0a0a14);

    const camera = new THREE.PerspectiveCamera(
      60,
      window.innerWidth / window.innerHeight,
      0.1,
      100
    );
    camera.position.set(0, 2, 12);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    containerRef.current.appendChild(renderer.domElement);

    // 2. 创建中心核心体（用二十面体代表 Athena 的算法核心）
    const coreGeometry = new THREE.IcosahedronGeometry(1.2, 1);
    const coreMaterial = new THREE.MeshStandardMaterial({
      color: 0x00aaff,
      emissive: 0x004466,
      wireframe: false,
      transparent: true,
      opacity: 0.9,
    });
    const coreMesh = new THREE.Mesh(coreGeometry, coreMaterial);
    scene.add(coreMesh);

    // 添加线框效果
    const wireframeMaterial = new THREE.MeshBasicMaterial({
      color: 0x88ddff,
      wireframe: true,
      transparent: true,
      opacity: 0.35,
    });
    const wireframeMesh = new THREE.Mesh(coreGeometry, wireframeMaterial);
    wireframeMesh.scale.set(1.05, 1.05, 1.05);
    scene.add(wireframeMesh);

    // 3. 创建粒子
    // 粒子的初始位置保存到 initPositions，扩散位置保存到 scatterPositions
    const positions = new Float32Array(PARTICLE_COUNT * 3);
    const initPositions = new Float32Array(PARTICLE_COUNT * 3);
    const scatterPositions = new Float32Array(PARTICLE_COUNT * 3);

    for (let i = 0; i < PARTICLE_COUNT; i++) {
      // 初始位置：在核心周围聚集（球壳分布）
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.acos(2 * Math.random() - 1);
      const r = CLUSTER_RADIUS * (0.6 + Math.random() * 0.6);

      const x = r * Math.sin(phi) * Math.cos(theta);
      const y = r * Math.sin(phi) * Math.sin(theta);
      const z = r * Math.cos(phi);

      initPositions[i * 3] = x;
      initPositions[i * 3 + 1] = y;
      initPositions[i * 3 + 2] = z;

      // 扩散位置：在较大范围内随机分布
      const sr = SCATTER_RADIUS * (0.5 + Math.random() * 0.8);
      const sx = sr * Math.sin(phi) * Math.cos(theta);
      const sy = sr * Math.sin(phi) * Math.sin(theta);
      const sz = sr * Math.cos(phi);

      scatterPositions[i * 3] = sx;
      scatterPositions[i * 3 + 1] = sy;
      scatterPositions[i * 3 + 2] = sz;

      // 初始显示为聚集状态
      positions[i * 3] = x;
      positions[i * 3 + 1] = y;
      positions[i * 3 + 2] = z;
    }

    const particleGeometry = new THREE.BufferGeometry();
    particleGeometry.setAttribute(
      'position',
      new THREE.BufferAttribute(positions, 3)
    );

    // 粒子的颜色：接近核心时更亮，扩散后变暗
    const colors = new Float32Array(PARTICLE_COUNT * 3);
    for (let i = 0; i < PARTICLE_COUNT; i++) {
      colors[i * 3] = 0.6 + Math.random() * 0.4;
      colors[i * 3 + 1] = 0.7 + Math.random() * 0.3;
      colors[i * 3 + 2] = 1.0;
    }
    particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

    const particleMaterial = new THREE.PointsMaterial({
      size: 0.08,
      vertexColors: true,
      transparent: true,
      opacity: 0.85,
      blending: THREE.AdditiveBlending,
      depthWrite: false,
    });

    const particles = new THREE.Points(particleGeometry, particleMaterial);
    scene.add(particles);

    // 4. 灯光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);

    const pointLight = new THREE.PointLight(0x00aaff, 1.5, 20);
    pointLight.position.set(3, 3, 3);
    scene.add(pointLight);

    // 5. 动画循环
    let animationId;

    const animate = () => {
      const progress = timelineRef.current.progress;
      // direction： 1 表示正向，-1 表示反向
      const direction = timelineRef.current.direction;

      // 根据进度计算插值系数
      // 如果 direction 为 1，progress 从 0 → 1，粒子从聚集到扩散
      // 如果 direction 为 -1，progress 从 1 → 0，粒子从扩散回聚集
      const interp = direction === 1 ? progress : 1 - progress;

      const posAttr = particles.geometry.attributes.position;
      const colorAttr = particles.geometry.attributes.color;

      for (let i = 0; i < PARTICLE_COUNT; i++) {
        const idx = i * 3;

        const ix = initPositions[idx];
        const iy = initPositions[idx + 1];
        const iz = initPositions[idx + 2];

        const sx = scatterPositions[idx];
        const sy = scatterPositions[idx + 1];
        const sz = scatterPositions[idx + 2];

        // 线性插值
        posAttr.array[idx] = ix + (sx - ix) * interp;
        posAttr.array[idx + 1] = iy + (sy - iy) * interp;
        posAttr.array[idx + 2] = iz + (sz - iz) * interp;

        // 颜色随高度变化，扩散后整体变暗
        const brightness = 0.5 + 0.5 * (1 - interp);
        colorAttr.array[idx] = colors[idx] * brightness;
        colorAttr.array[idx + 1] = colors[idx + 1] * brightness;
        colorAttr.array[idx + 2] = colors[idx + 2] * brightness;
      }

      posAttr.needsUpdate = true;
      colorAttr.needsUpdate = true;

      // 核心缓慢自转
      coreMesh.rotation.y += 0.002;
      wireframeMesh.rotation.y -= 0.001;
      particles.rotation.y += 0.0005;

      renderer.render(scene, camera);
      animationId = requestAnimationFrame(animate);
    };

    animate();

    // 6. 处理窗口大小变化
    const handleResize = () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    };

    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
      cancelAnimationFrame(animationId);
      window.removeEventListener('resize', handleResize);
      particleGeometry.dispose();
      particleMaterial.dispose();
      coreGeometry.dispose();
      coreMaterial.dispose();
      renderer.dispose();
      if (renderer.domElement.parentNode) {
        renderer.domElement.parentNode.removeChild(renderer.domElement);
      }
    };
  }, [timelineRef]);

  return <div ref={containerRef} className="scene-container" />;
}

这段代码是项目的绝对核心，有几处值得停下来解释：

为什么初始位置用“球壳分布”而不是“直线点阵”？

因为 Attena 在电影里是一个多面体算法装置，粒子聚集时靠近核心，用球壳分布会让视觉上更有“围绕核心旋转”的立体感。如果全都挤在同一个球面上，反向运动时看不出纵深感。

为什么用插值而不是直接改速度？

这是一个很隐蔽的坑。如果直接在动画循环里给粒子速度取反，粒子会在很短时间里走出非常远的距离，效果是“瞬间爆开”而不是“缓慢逆转”。插值的方式更像电影里的时间逆转：每一帧根据当前进度计算位置，形成连续的、可控制的反向流动效果。

为什么颜色也要插值？

电影里时间逆转的画面往往伴随色调和光线变化。粒子从聚拢时的明亮蓝色渐变到扩散时的暗蓝色，能在视觉上强化“秩序与混乱”的对立感。纯位置变化不够，加上颜色变化才更容易让用户理解状态切换。

5.2 时间轴控制组件

下面是控制组件。它只负责 UI 交互，把用户操作写入 timelineRef。

// 文件路径：src/components/TimelineControl.jsx
import { useState } from 'react';

export default function TimelineControl({ timelineRef }) {
  const [progress, setProgress] = useState(0);
  const [isReversing, setIsReversing] = useState(false);

  const handleSliderChange = (e) => {
    const value = parseFloat(e.target.value);
    setProgress(value);
    timelineRef.current.progress = value;
  };

  const handleReverse = () => {
    const nextReversing = !isReversing;
    setIsReversing(nextReversing);
    timelineRef.current.direction = nextReversing ? -1 : 1;
  };

  const handleReset = () => {
    setIsReversing(false);
    setProgress(0);
    timelineRef.current.direction = 1;
    timelineRef.current.progress = 0;
  };

  return (
    <div className="control-panel">
      <h2>Athena 时间逆转</h2>
      <p>
        拖动下方时间轴，感受熵流方向的变化。
        <br />
        向左拖动到起始位置：粒子聚拢，秩序恢复。
        <br />
        向右拖动到末端：粒子扩散，系统趋于混乱。
      </p>

      <input
        type="range"
        min="0"
        max="1"
        step="0.001"
        value={progress}
        onChange={handleSliderChange}
        className="timeline-slider"
      />

      <div className="button-group">
        <button onClick={handleReverse}>
          {isReversing ? '切换为正向' : '切换为反向'}
        </button>
        <button onClick={handleReset}>重置</button>
      </div>

      <div className="status">
        当前进度：{Math.round(progress * 100)}%
        <br />
        当前方向：{isReversing ? '反向（熵减）' : '正向（熵增）'}
      </div>
    </div>
  );
}

这个组件里有一个关键设计： 控制组件不直接操作 Three.js 对象，而是通过 timelineRef 这个共享引用。

为什么要这样设计？如果直接用 React state 存储 progress，并且每拖动一次滑块就 setState 一次，那么父组件会在用户拖动过程中频繁重新渲染。而 Three.js 场景在 useEffect 里创建，频繁重渲染会带来潜在的生命周期问题。使用 timelineRef 后，Three.js 渲染循环每一帧都能直接读取最新值，React 只在滑块 UI 内部更新，性能不受影响。

这是一个很容易被忽略但很重要的工程细节。React 的状态更新机制很适合 UI 交互，但不适合作为高频实时渲染的数据总线。两者之间通过 Ref 做桥接，是这类项目的常用做法。

5.3 App 入口与样式

// 文件路径：src/App.jsx
import { useRef } from 'react';
import Scene from './components/Scene';
import TimelineControl from './components/TimelineControl';
import './App.css';

function App() {
  // timelineRef 是连接 UI 和 3D 场景的共享状态
  const timelineRef = useRef({
    progress: 0,
    direction: 1,
  });

  return (
    <div className="app">
      <Scene timelineRef={timelineRef} />
      <TimelineControl timelineRef={timelineRef} />
    </div>
  );
}

export default App;

/* 文件路径：src/App.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: #0a0a14;
  color: #e0e0ff;
  overflow: hidden;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.scene-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 90vw);
  padding: 20px 24px;
  background: rgba(10, 10, 30, 0.75);
  border: 1px solid rgba(100, 180, 255, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  z-index: 10;
  text-align: center;
}

.control-panel h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: #aaddff;
  letter-spacing: 0.04em;
}

.control-panel p {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.75;
  margin-bottom: 16px;
}

.timeline-slider {
  width: 100%;
  margin: 12px 0;
  accent-color: #00aaff;
}

.button-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 12px 0;
}

.button-group button {
  padding: 8px 20px;
  font-size: 0.9rem;
  border: 1px solid rgba(100, 180, 255, 0.5);
  border-radius: 8px;
  background: rgba(0, 170, 255, 0.15);
  color: #cceeff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-group button:hover {
  background: rgba(0, 170, 255, 0.3);
}

.status {
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.6;
}

到这里，你已经拥有了一个完整可运行的三维粒子交互项目。它实现了文章开头说的核心交互目标：用可控的粒子运动演示“熵增与熵减”的视觉对比。

6. 运行项目与效果验证

完成上述文件后，在项目根目录执行命令启动开发服务器：

npm run dev

正常情况下，终端会输出一个本地访问地址，通常是 http://localhost:5173 。在浏览器里打开后，你应该看到：

• 页面中央悬浮着一个带线框的半透明多面体；
• 周围有数千个蓝色粒子，开始时处于聚集状态；
• 点击“切换为反向”按钮，方向状态变化；
• 拖动时间轴滑块，粒子会根据进度向外扩散或向核心聚拢；
• 粒子扩散时颜色变暗，聚拢时颜色变亮。

如果你的页面能完整呈现这些效果，说明核心逻辑已经跑通。

如果某些效果没有出现，可以按下面的顺序排查：

1. 页面空白 ：打开浏览器控制台，看是否有 JavaScript 报错。最常见的问题是路径错误或依赖未安装。
2. 粒子不运动 ：检查 timelineRef.current.progress 是否在变化。可以在 animate 函数里加一行 console.log 验证。
3. 粒子数量太少或太密 ：调整 PARTICLE_COUNT 和 SCATTER_RADIUS 参数。
4. 页面在低端设备上卡顿 ：降低粒子数量到 2000 到 3000，同时把 size 调大到 0.1 左右。

7. 常见问题与排查方法

这个项目虽然不大，但在实际开发中还是会遇到一些典型问题。我把高频问题整理成表格，方便你对照排查。

问题现象	可能原因	排查方式	解决方案
页面全白，控制台报 THREE is not defined	Three.js 未正确引入	检查 package.json 是否包含 three 依赖	执行 npm install three 后重新启动
粒子看不到	相机位置或粒子大小设置不合适	调整相机 z 坐标，或把粒子 size 调大	将 camera.position.z 设为 12 到 15，粒子 size 设为 0.08 到 0.12
拖动滑块无反应	timelineRef 没有正确传递	在 React 组件里打印 timelineRef.current	确认 App 中同时传给了 Scene 和 TimelineControl
反向播放时粒子“闪跳”	插值逻辑写反	检查 direction 为 -1 时 interp 计算	使用 1 - progress 作为反向插值系数
粒子边缘有锯齿或闪烁	粒子深度写入冲突	检查粒子材质参数	设置 depthWrite: false ，并开启 AdditiveBlending
刷新页面后状态丢失	没有做任何持久化	刷新前备份状态	如需持久化，可以存 localStorage ，但非必须
移动端布局错乱	没有适配不同屏幕尺寸	查看 handleResize 是否生效	确保监听 window.resize 并更新相机和渲染器尺寸

8. 从 Demo 到工程化：进一步优化建议

如果这个项目不仅仅是你自己本地玩，而是要发布到 Show HN 或作为个人作品集展示，那么你还需要考虑下面几个层面的优化。

8.1 性能优化

粒子数量动态调整

不同设备的性能差异很大。可以用 GPU 能力和 devicePixelRatio 做基础判断。

const isMobile = /Mobi|Android/i.test(navigator.userAgent);
const pixelRatio = window.devicePixelRatio || 1;
const maxParticles = isMobile ? 2500 : 6000;

这样在手机端打开时，粒子数量会自动减少，避免卡顿。

渲染器设置

渲染器可以显式设置像素比，防止高 DPI 屏幕上模糊。

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

超过 2 的像素比对画面提升不明显，但 GPU 压力显著增大。

8.2 视觉表现升级

目前的粒子系统是最基础的球状粒子。如果想要更强的视觉冲击力，可以把粒子换成 Sprite 贴图：

• 使用一张圆形渐变贴图代替默认方形点。
• 给粒子添加旋转和缩放动画。
• 在核心周围增加一圈流动的环形光束。

这种细节改动不需要改变架构，只需要替换粒子的贴图材质即可。

const texture = new THREE.TextureLoader().load('/particle-glow.png');
const particleMaterial = new THREE.PointsMaterial({
  size: 0.15,
  map: texture,
  transparent: true,
  blending: THREE.AdditiveBlending,
  depthWrite: false,
});

8.3 音效与沉浸感

Show HN 项目往往没有背景音乐，这其实是错失了一个强化沉浸感的机会。一个与时间逆转匹配的低频氛围音，在切换方向时做渐变处理，会明显提升体验。

但要注意：音效必须显式提供“开启/关闭”按钮，不能自动播放扰人。这是基本体验底线。

8.4 响应式与跨端适配

移动端上，控制面板不能遮挡粒子主体。可以对 control-panel 做媒体查询适配。

@media (max-width: 600px) {
  .control-panel {
    bottom: 12px;
    padding: 14px 16px;
  }
  .control-panel h2 {
    font-size: 1rem;
  }
  .control-panel p {
    font-size: 0.75rem;
  }
}

9. 总结与延伸方向

从诺兰电影里的一个设定，到一个可交互的 3D 可视化项目，整个过程最核心的经历是： 概念理解 → 功能拆解 → 技术选型 → 代码落地 → 体验优化 。

这个项目用到的技术点其实很基础：Three.js 粒子系统、React 组件通信、线性插值动画。但从“能跑”到“体验好”，差别往往在于那些容易被忽略的细节：粒子数量要不要随着设备调整、滑块状态应该放在 React 还是 Ref、反向运动应该用插值还是取反速度。

如果你继续往深方向走，可以尝试下面几件事：

• 把正向/反向切换做成自动循环动画，不需要手动拖动滑块；
• 为每颗粒子增加随机扰动偏移，让扩散效果更自然；
• 引入 WebGL 后处理特效，例如泛光（Bloom）；
• 把项目部署到静态托管平台，生成可分享的链接。

这类项目还有一个很实用的价值：它是电影概念与前端可视化之间的一次桥接。类似的思路也可以迁移到数据可视化、科学教育演示、品牌互动页等真实项目中。当你需要把复杂抽象概念直观呈现给普通用户时，这个项目的基本架构可以复用。

做到这里，启动你的本地项目，拖动一下时间轴，看看粒子从秩序走向混乱、再回到秩序的全过程。这个瞬间，你就明白诺兰为什么选择用时间倒放来讲那个关于信念与信任的故事。