Function buildAxesIndicator

js/viewer.js:32–82

(size)

let _hoverMaterial = null;
let _needsRender = true;
let _diagEdges = null;       // LineSegments2 for open/non-manifold edges
let _diagFaces = [];         // Array of THREE.Mesh overlays for face highlights

// Turntable pitch clamp: keep the view direction at least this far (radians)
// away from ±world Z. At the pole itself the up direction is ambiguous and
// lookAt() flips, which is what used to make the view jump — stopping just
// short of it makes the pole unreachable, so no flip can ever occur.
const _POLAR_EPS = 0.01;

// Build a labelled coordinate axes indicator scaled to `size`.
// X = red, Y = green, Z = blue (up).
function buildAxesIndicator(size) {
  const group = new THREE.Group();

  const addAxis = (dir, hex, label) => {
    const r = size;
    // Shaft
    const pts = [new THREE.Vector3(0, 0, 0), dir.clone().multiplyScalar(r * 0.78)];
    const line = new THREE.Line(
      new THREE.BufferGeometry().setFromPoints(pts),
      new THREE.LineBasicMaterial({ color: hex, transparent: true, opacity: 0.9 }),
    );
    group.add(line);

    // Cone arrowhead
    const cone = new THREE.Mesh(
      new THREE.ConeGeometry(r * 0.07, r * 0.22, 8),
      new THREE.MeshBasicMaterial({ color: hex }),
    );
    cone.position.copy(dir.clone().multiplyScalar(r * 0.89));
    cone.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir);
    group.add(cone);

    // Text sprite label
    const c   = document.createElement('canvas');
    c.width   = c.height = 64;
    const ctx = c.getContext('2d');
    ctx.fillStyle = `#${hex.toString(16).padStart(6, '0')}`;
    ctx.font      = 'bold 48px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(label, 32, 32);
    // depthWrite OFF + renderOrder above the wireframe overlay (3): label
    // quads must not stamp their rectangle into the depth buffer, or they
    // punch line-free holes into the wireframe drawn after them. Rendered
    // last, the transparent label background lets the wireframe shine
    // through while the glyph stays readable on top.
    const sprite = new THREE.Sprite(
      new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(c), transparent: true, depthWrite: false }),
    );
    sprite.renderOrder = 4;
    sprite.position.copy(dir.clone().multiplyScalar(r * 1.18));
    sprite.scale.set(r * 0.32, r * 0.32, 1);
    group.add(sprite);