Isosurface Mesh

Plotly = require("https://cdn.plot.ly/plotly-2.35.2.min.js")

N = 20

coords = {
  const v = [];
  for (let i = 0; i < N; i++) v.push(-2 + (4 * i) / (N - 1));
  return v;
}

isoData = {
  const x = [], y = [], z = [], value = [];
  for (const xi of coords)
    for (const yi of coords)
      for (const zi of coords) {
        x.push(xi); y.push(yi); z.push(zi);
        value.push(xi * xi + yi * yi + zi * zi);
      }
  return { x, y, z, value };
}

plot = {
  const trace = {
    type: 'isosurface',
    x: isoData.x,
    y: isoData.y,
    z: isoData.z,
    value: isoData.value,
    isomin: 0.5,
    isomax: 3.0,
    surface: { count: 4 },
    colorscale: 'RdBu',
    caps: { x: { show: false }, y: { show: false }, z: { show: false } }
  };
  const layout = {
    title: { text: 'x² + y² + z² isosurfaces', font: { size: 14 } },
    margin: { t: 40, b: 0, l: 0, r: 0 },
    scene: { aspectmode: 'cube' },
    paper_bgcolor: 'rgba(0,0,0,0)',
    plot_bgcolor: 'rgba(0,0,0,0)'
  };
  const el = document.createElement('div');
  el.style.cssText = 'width:100%;height:500px';
  requestAnimationFrame(() =>
    Plotly.newPlot(el, [trace], layout, { responsive: true })
  );
  return el;
}