SpinningTorus3D.js

const Torus3D = {
  props: {
    // 3D -> 2D projection settings
    camera: {
      type: 'orthographic',
      zoom: 2.25,
      position: [ 1, 1, 1 ]
    },
    // Vertex transformation before screen space transformation
    transform: {
      rotate: [
        ({ playhead }) => playhead * Math.PI * 2,
        0,
        0
      ]
    },
    // X and Y segments of 3D parametric geometry
    shape: [ 16, 8 ],
    // Properties for the torus
    innerRadius: 0.5,
    outerRadius: 1,
    spin: ({ playhead }) => Math.sin(playhead * Math.PI)
  },
  // Parametric equation for a 3D torus
  torus (innerRadius, outerRadius, u, v) {
    return [
      (outerRadius + innerRadius * Math.cos(v)) * Math.cos(u),
      (outerRadius + innerRadius * Math.cos(v)) * Math.sin(u),
      innerRadius * Math.sin(v)
    ];
  },
  // Utility to get XY cell index to flat index using row-major order
  toIndex (x, y, xCount) {
    return x + (y * xCount);
  },
  // The 'vertex' shader
  // Here we compute the 3D position from a 2D UV parameter
  vertex ({ uv }, { innerRadius, outerRadius, spin }) {
    return this.torus(
      innerRadius,
      outerRadius,
      uv[0] * Math.PI * 2 * spin,
      uv[1] * Math.PI * 2
    );
  },
  // The 'render' shader
  // Here we render lines along the edges to make a wireframe of quads
  render (vertices, { shape, radius, util }) {
    const { math } = util;
    const [ X, Y ] = shape;

    // Build a list of horizontal and then vertices edges
    // Each element is an index into the vertices array
    const xEdges = math.linspace(Y).map((_, y) => {
      return math.linspace(X).map((_, x) => this.toIndex(x, y, X));
    });
    const yEdges = math.linspace(X).map((_, x) => {
      return math.linspace(Y).map((_, y) => this.toIndex(x, y, X));
    });
    const edges = xEdges.concat(yEdges);

    // Now map these edges to actual positions
    return edges.map(edge => {
      return {
        lineWidth: 4,
        type: 'path',
        path: edge.map(i => vertices[i].position)
      };
    });
  }
};