3D Mesh Plots in JavaScript

How to make 3D mesh plots in javascript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

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, {});