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

Three.js 交互式构建器

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

核心架构

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

project/
├── 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获取发光效果、噪声函数、颜色渐变和符号渲染。

项目类型

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

交互式可视化：OrbitControls → Raycasting → UI叠加 → 状态管理

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

性能

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

参考文献

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