Three.js交互构建技能 three-js-interactive-builder

---

名称：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/             # 纹理、字体

快速开始

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

几何模式

神圣几何基元

使用 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 - 数学基础