I am working on creating a 3D line chart using data.
If you'd like to see it in action, check out this Demo.
Here is the specific section of code that generates the lines:
parentTransform = new THREE.Object3D();
var _color = d3.scale.category10();
for (var i = 5; i > 0; i--) {
var material = new THREE.LineBasicMaterial({
color: _color(i), linewidth: 50
});
var PI2 = Math.PI * 2;
var geometry = new THREE.Geometry();
var k = -10;
for (var j = 0; j < 80; j=j+10) {
var _x = j;
var _y = (Math.floor(Math.random() * (50 - 10 + 1)) + 10);
var _z = i*5;
geometry.vertices.push(new THREE.Vector3(_x,_y,_z));
var _point = new THREE.SphereGeometry(0.8);
var material = new THREE.MeshBasicMaterial( {color: _color(i)} );
var sphere = new THREE.Mesh( _point, material );
sphere.position.set(_x,_y,_z);
parentTransform.add( sphere );
};
var line = new THREE.Line(geometry, material);
line.material.linewidth = 2;
parentTransform.add(line);
};
scene.add( parentTransform );
Sometimes when I rotate or zoom, the lines disappear and only the points remain visible.
I also wanted to add three axis walls, any assistance would be greatly appreciated as I have experience with d3.js but I'm new to Three.js.