LIMITLESS…
END-TO-END SOLUTIONS

import * as THREE from 'three';

const S = 1024;
const renderer = new THREE.WebGLRenderer({
  antialias: true, alpha: true, preserveDrawingBuffer: true
});
renderer.setSize(S, S);
renderer.setClearColor(0x000000, 0);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = null;
const H = 3.42;
const camera = new THREE.OrthographicCamera(-H, H, H, -H, 0.1, 60);
camera.position.set(0, 0, 10);

const R = 1.62, r = 0.50, TUBE = 0.43;
const Q = 2, N = 3, SEGS = 260, RADIAL = 48;

class Strand extends THREE.Curve {
  constructor(p) { super(); this.p = p; }
  getPoint(t, v = new THREE.Vector3()) {
    const u = t * Math.PI * 2;
    const w = R + r * Math.cos(Q * u + this.p);
    return v.set(
      w * Math.cos(u),
      w * Math.sin(u),
      r * Math.sin(Q * u + this.p)
    );
  }
}

const mat = new THREE.MeshBasicMaterial({ vertexColors: true });
const tmp = new THREE.Color();

for (let i = 0; i < N; i++) {
  const phase = i / N;
  const geo = new THREE.TubeGeometry(
    new Strand(phase * Math.PI * 2), SEGS, TUBE, RADIAL, true
  );
  const count = geo.attributes.position.count;
  const colors = new Float32Array(count * 3);
  for (let v = 0; v < count; v++) {
    const seg = Math.floor(v / (RADIAL + 1));
    const ang = ((v % (RADIAL + 1)) / RADIAL) * Math.PI * 2;
    tmp.setHSL(
      (seg / SEGS + phase) % 1,
      1.0,
      0.52 + 0.13 * Math.cos(ang - 0.9)
    );
    colors[v * 3] = tmp.r;
    colors[v * 3 + 1] = tmp.g;
    colors[v * 3 + 2] = tmp.b;
  }
  geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  const mesh = new THREE.Mesh(geo, mat);
  mesh.rotation.z = Math.PI / 2;
  scene.add(mesh);
}

renderer.render(scene, camera);