Creating Transport Routes Using Cylinder Geometry

Originally I used LineGeometry to draw lines between an array of points to make up the routes of buses around the campus. However this caused problems with Windows computers as I could not control the line width, meaning that lines would only be 1px wide and much harder to see.

To combat this I decided to create a function to draw a cylinder between the points of the array instead of using the Three.js LineGeometry. This meant that I could control the width of the cylinder and it would look the same on both Windows and Mac.

I simply loop through the array of points and feed the previous and next points into the new function. The function then draws a cylinder between the two points with a specified colour and adds the cylinder to an array to be displayed later. I have added a check to change the width of the cylinder for footpaths (coloured #333333) to differentiate between them and the bus and cycle routes.

function drawCylinder(vstart, vend, name, colour){
    var HALF_PI = Math.PI * .5;
    var distance = vstart.distanceTo(vend);
    var position  = vend.clone().add(vstart).divideScalar(2);

    var material = new THREE.MeshBasicMaterial({ color: colour, transparent: true, opacity: 0.8 });
	if(colour == 0x333333){
    	var cylinder = new THREE.CylinderGeometry(0.5,0.5,distance,6,6,false);
		var cylinder = new THREE.CylinderGeometry(1,1,distance,6,6,false);

    var orientation = new THREE.Matrix4();
    var offsetRotation = new THREE.Matrix4();
    var offsetPosition = new THREE.Matrix4();
    orientation.lookAt(vstart,vend,new THREE.Vector3(0,1,0));

    var mesh = new THREE.Mesh(cylinder,material);
	mesh.visible = false;

Be the first to leave a comment. Don’t be shy.

Join the Discussion

Thank you for taking the time to look over my most recent work. Please feel free to contact me for any further information, to hire me for a project or to simply have a good old chat.

Click here to hire me