Cube Tubes

by Mikel Ortega

JavaScript

var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

// UDACITY: Lesson 5 Problem set 3

/**
* Returns a THREE.Mesh cone (CylinderGeometry) going from top to bottom positions
* @param material - THREE.Material
* @param radiusTop, radiusBottom - same as CylinderGeometry, the top and bottom radii of the cone
* @param top, bottom - THREE.Vector3, top and bottom positions of cone
* @param segmentsWidth - tessellation around equator, like radiusSegments in CylinderGeometry
* @param openEnded - whether the ends of the cone are generated; true means they are not 
*/
function createCylinderFromEnds( material, radiusTop, radiusBottom, top, bottom, segmentsWidth, openEnded)
{
	// defaults
	segmentsWidth = (segmentsWidth === undefined) ? 32 : segmentsWidth;
	openEnded = (openEnded === undefined) ? false : openEnded;

	// Dummy settings, replace with proper code:
	var cylAxis = new THREE.Vector3();
    cylAxis.subVectors(top, bottom);
	var length = cylAxis.length();
	var center = new THREE.Vector3();
    center.add(cylAxis);
    center.multiplyScalar(0.5);
    center.add(bottom);
	////////////////////

	var cylGeom = new THREE.CylinderGeometry( radiusTop, radiusBottom, length, segmentsWidth, 1, openEnded );
	var cyl = new THREE.Mesh( cylGeom, material );
	
	// pass in the cylinder itself, its desired axis, and the place to move the center.
	makeLengthAngleAxisTransform( cyl, cylAxis, center );

	return cyl;
}

// Transform cylinder to align with given axis and then move to center 
function makeLengthAngleAxisTransform( cyl, cylAxis, center )
{
	cyl.matrixAutoUpdate = false;
	
	// From left to right using frames: translate, then rotate; TR.
	// So translate is first.
	cyl.matrix.makeTranslation( center.x, center.y, center.z );

	// take cross product of cylAxis and up vector to get axis of rotation
	var yAxis = new THREE.Vector3(0,1,0);
	// Needed later for dot product,...