<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
	<div id="myDiv"></div>
</body>
// Note x, y, z define the vertices for a unit cube

var x = [0, 0, 1, 1, 0, 0, 1, 1];
var y = [0, 1, 1, 0, 0, 1, 1, 0];
var z = [0, 0, 0, 0, 1, 1, 1, 1];
var i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7];
var j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2];
var k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6];

var range_x = [-2, 2];
var range_y = [-3, 3];
var range_z = [-1, 1];

function rectangle(x, y, z, range_x, range_y, range_z) {

  if (range_x.length !== 2 || range_y.length !== 2 || range_z.length !== 2) {
    throw 'Ranges must contain 2 values';
  }
	// we will forego other checks for to limit the length of the example	
	x = x.map(function(e, i) {
    return range_x[e];
  });

  y = y.map(function(e, i) {
    return range_y[e];
  });

  z = z.map(function(e, i) {
    return range_z[e];
  });

	return {x: x, y: y, z: z};
}

result = rectangle(x, y, z, range_x, range_y, range_z);

x = result.x;
y = result.y;
z = result.z;


var facecolor = [
    'rgb(50, 200, 200)',
    'rgb(100, 200, 255)',
    'rgb(150, 200, 115)',
    'rgb(200, 200, 50)',
    'rgb(230, 200, 10)',
    'rgb(255, 140, 0)'
];

facecolor2 = new Array(facecolor.length * 2);

facecolor.forEach(function(x, i) {
    facecolor2[i * 2 + 1] = facecolor2[i * 2] = x;
});

var data = {
    x: x,
    y: y,
    z: z,
    i: i,
    j: j,
    k: k,
    facecolor: facecolor2,
    type: 'mesh3d'
};

Plotly.newPlot('myDiv', [data], {}, {showSendToCloud: true});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.