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>