Moving Tesseract

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();

function catmullrom(a, b, c, d, i)
{
    return a * ((-i + 2) * i - 1) * i * 0.5 +
           b * (((3 * i - 5) * i) * i + 2) * 0.5 +
           c * ((-3 * i + 4) * i + 1) * i * 0.5 +
           d * ((i - 1) * i * i) * 0.5;
}

function transformCylinderToP1P2(cyl, p1, p2)
{
	cyl.matrixAutoUpdate = false;

	center = new THREE.Vector3(0,0,0);
	center.copy(p1);
	center.addSelf(p2);
	center.multiplyScalar(0.5);

	cyl.matrix.makeTranslation(center);	

	vector = new THREE.Vector3(0,0,0);
	vector.copy(p2);
	vector.subSelf(p1);

	var length = vector.length();

	// take cross product of vector and up vector to get axis of rotation
	var yAxis = new THREE.Vector3(0,1,0);
	// Needed later for dot product, just do it now;
	// a little lazy, should really copy it to a local Vector3.
	vector.normalize();
	var rotationAxis = new THREE.Vector3();
	rotationAxis.cross(vector, yAxis);
	if ( rotationAxis.length() < 0.000001 )
	{
		// Special case: if rotationAxis is just about zero, set to X axis,
		// so that the angle can be given as 0 or PI. This works ONLY
		// because we know one of the two axes is +Y.
		rotationAxis.set( 1, 0, 0 );
	}
	rotationAxis.normalize();

	// take dot product of vector and up vector to get cosine of angle of rotation
	var theta = -Math.acos( vector.dot( yAxis ) );
	var rotMatrix = new THREE.Matrix4();
	rotMatrix.makeRotationAxis( rotationAxis, theta );
    
    //TODO: fix this
//	cyl.matrix.multiply( rotMatrix );
	cyl.matrix.multiplySelf( rotMatrix );
	
	cyl.matrix.scale(new THREE.Vector3(1, length, 1));
}

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 100;
    scene.add(camera);

    var material = new THREE.MeshLambertMaterial({color: 0xaabbff});

    var vertexPoints =...