名称：three-js-interactive-builder 描述：使用Three.js搭建和构建交互式3D可视化，强调算法艺术、神圣几何、时间动画和模块化架构。适用于创建WebGL可视化、生成艺术作品、交互式3D体验、粒子系统、流场，或项目如引力螺旋、时间视角作品或照明视觉叙事。在请求Three.js项目、3D网页图形、算法可视化或神圣几何渲染时触发。许可证：MIT

Three.js交互式构建器

使用算法艺术原则构建生产就绪的Three.js可视化。

核心架构

每个项目遵循模块化合成哲学：组件作为振荡器，连接作为补丁。

项目/
├── index.html          # 入口点，包含画布
├── src/
│   ├── main.js         # 场景编排器
│   ├── geometry/       # 形状生成器
│   ├── animation/      # 时间控制器
│   ├── shaders/        # GLSL程序
│   └── utils/          # 数学辅助函数
└── assets/             # 纹理、字体

快速开始

从assets/threejs-boilerplate/复制样板代码
使用首选渲染器设置初始化场景
从scripts/添加几何生成器
连接动画循环

几何图案

神圣几何基元

使用scripts/sacred_geometry.py生成顶点数据，用于：

生命之花：重叠圆形，可自定义深度
梅塔特隆立方体：13个圆形形成，带有连接线
斯里扬特拉：9个互锁三角形
生命之种：7个圆形起源图案
鱼形相交：交集几何

螺旋系统

用于引力/黄金螺旋：

function goldenSpiral(loops, pointsPerLoop, scale) {
  const phi = (1 + Math.sqrt(5)) / 2;
  const points = [];
  for (let i = 0; i < loops * pointsPerLoop; i++) {
    const theta = i * 0.1;
    const r = scale * Math.pow(phi, theta / (2 * Math.PI));
    points.push(new THREE.Vector3(r * Math.cos(theta), r * Math.sin(theta), 0));
  }
  return points;
}

车道系统

用于多车道可视化（如灵魂车道、数据流）：

function createLaneSystem(laneCount, radius, spacing) {
  const lanes = [];
  for (let i = 0; i < laneCount; i++) {
    lanes.push({ radius: radius + (i * spacing), objects: [], speed: 1 / (i + 1) });
  }
  return lanes;
}

动画图案

时间视角

用于同时时间可视化（所有时刻同时可见）：

class TemporalController {
  constructor(timeline) {
    this.moments = timeline;
    this.currentView = 'linear';
  }
  setSimultaneous() {
    this.moments.forEach((m, i) => {
      m.mesh.visible = true;
      m.mesh.material.opacity = 0.3 + (0.7 * (i / this.moments.length));
    });
  }
}

基于呼吸的动画

使用正弦波实现有机脉动：

function breathe(object, speed = 1, amplitude = 0.1) {
  const scale = 1 + Math.sin(Date.now() * 0.001 * speed) * amplitude;
  object.scale.setScalar(scale);
}

着色器图案

参见references/glsl-patterns.md获取发光效果、噪声函数、颜色渐变和符号渲染。

项目类型

算法艺术：定义规则 → 生成几何 → 添加时间维度 → 应用美学层

交互式可视化：轨道控制 → 光线投射 → UI覆盖 → 状态管理

叙事体验：故事节拍作为状态 → 过渡 → 音频提示 → 导航

性能

对于超过1000个顶点使用BufferGeometry
对于重复对象使用InstancedMesh
对于复杂场景使用LOD
合并几何以减少绘制调用

参考

references/glsl-patterns.md - 着色器代码库
references/sacred-geometry-math.md - 数学基础