SOURCE

console 命令行工具 X clear

                    
>
console
var labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
var data = [2,3,4,5,6,7,1,8,10,12]
var rectW = 1

var mathbox = mathBox({
  plugins: ['core', 'cursor', 'controls'],
  controls: {
    klass: THREE.OrbitControls,
  },
});
if (mathbox.fallback) throw "WebGL error";

// Set renderer background
var three = mathbox.three;
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

// Set mathbox units and place camera
mathbox.set({
  scale: 1000,
  focus: 3
});
mathbox.camera({
  proxy: true,
  position: [0, 0, 3]
});

// Create cartesian view
var view = mathbox.cartesian({
  range: [[ - 4, 4], [ - 4, 4]],
  scale: [1, 1],
});

// 2D axes / grid
view.axis({
  axis: 1,
  width: 3
});
view.axis({
  axis: 2,
  width: 3
});
view.axis({
  axis: 3,
  width: 3
});

view.grid({
  width: 1.5,
  divideX: 10,
  divideY: 10
});

view.scale({
  divide: 10,
});

var present = view.present({
  index: 1,
});
var slide = present.slide();
var len = data.length
data = data.map((e,index)=>{
	let point1 = new THREE.Vector3(- rectW / 2, 0,0)
	let point2 = new THREE.Vector3(- rectW / 2, e,0)
	let point3 = new THREE.Vector3(rectW / 2, e,0)
	let point4 = new THREE.Vector3(rectW / 2, 0,0)

	var ran = 360/len * index
	rotatePoint(point1,ran,1)
	rotatePoint(point2,ran,1)
	rotatePoint(point3,ran,1)
	rotatePoint(point4,ran,1)

	return [[point1.x,point1.y],[point2.x,point2.y],[point3.x,point3.y],[point4.x,point4.y]]
})


function rotatePoint(point,degree,offset)
{
	var offsetVec = new THREE.Vector3(0,1,0)
	var matrix = new THREE.Matrix3();
	var radian = degree* Math.PI / 180
	point.add(offsetVec)

	matrix.set(Math.cos(radian),-Math.sin(radian),0,
					 Math.sin(radian),Math.cos(radian),0,
					 0,0,0
					)

	point.applyMatrix3(matrix)
	
	return point
}

console.log(data)



// data = data.map(e => [[ - rectW / 2, 0], [ - rectW / 2, e], [rectW / 2, e], [rectW / 2, 0]]); 
slide.array({
  data: data,
  channels: 2,
  items: 4
})
  .face({
  color: 0x3090FF,
  width: 3,
})
  .end()
<script src="http://acko.net/files/mathbox2/mathbox-bundle.min.js">
</script>