3D Mesh Plots in JavaScript

How to make 3D mesh plots in javascript.

Simple 3D Mesh Plot

// Generating random data..
a=[]; b=[]; c=[];
for(i=0;i<50;i++)
  {
    var a_ = Math.random(); 
    a.push(a_);
    
    var b_ = Math.random(); 
    b.push(b_);
    
    var c_ = Math.random(); 
    c.push(c_);
  }
// Plotting the mesh
var data=[
    {
      opacity:0.8,
      color:'rgb(300,100,200)',
      type: 'mesh3d',
      x: a,
      y: b,
      z: c,
    }
];
Plotly.newPlot('myDiv', data);

3D Mesh Plot with Alphahull

// Generating random data..
a=[]; b=[]; c=[];
for(i=0;i<50;i++)
  {
  var a_ = Math.random(); 
   a.push(a_);
  
  var b_ = Math.random(); 
   b.push(b_);
  
  var c_ = Math.random(); 
   c.push(c_);
  }
// Plotting the mesh
var data=[
  {
    alphahull:5,
    opacity:0.8,
    color:'rgb(200,100,300)',
    type: 'mesh3d',
    x: a,
    y: b,
    z: c,
  }
];
Plotly.newPlot('myDiv', data);

3D Mesh Tetrahedron

var data = [{
    type: "mesh3d",
    x: [0, 1, 2, 0],
    y: [0, 0, 1, 2],
    z: [0, 2, 0, 1],
    i: [0, 0, 0, 1],
    j: [1, 2, 3, 2],
    k: [2, 3, 1, 3],
    intensity: [0, 0.33, 0.66, 1],
    colorscale: [
      [0, 'rgb(255, 0, 0)'],
      [0.5, 'rgb(0, 255, 0)'],
      [1, 'rgb(0, 0, 255)']
    ]
  }
];

Plotly.newPlot('myDiv', data, {});

3D Mesh Cube

var intensity = [0, 0.14285714285714285, 0.2857142857142857, 0.42857142857142855, 0.5714285714285714, 0.7142857142857143, 0.8571428571428571, 1];

var data = [{
    type: "mesh3d",
    x: [0, 0, 1, 1, 0, 0, 1, 1],
    y: [0, 1, 1, 0, 0, 1, 1, 0],
    z: [0, 0, 0, 0, 1, 1, 1, 1],
    i: [7, 0, 0, 0, 4, 4, 6, 6, 4, 0, 3, 2],
    j: [3, 4, 1, 2, 5, 6, 5, 2, 0, 1, 6, 3],
    k: [0, 7, 2, 3, 6, 7, 1, 1, 5, 5, 7, 6],
    intensity: intensity,
    colorscale: [
      [0, 'rgb(255, 0, 255)'],
      [0.5, 'rgb(0, 255, 0)'],
      [1, 'rgb(0, 0, 255)']
    ]
  }
];

Plotly.newPlot('myDiv', data, {});

plotly.js runs on all SVG-compatible browsers