Tesseract

JavaScript

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

init();
animate();

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: 0xFFbbff});

    var vertexPoints = [
        new THREE.Vector3(-10,-10,-10),
        new THREE.Vector3( 10,-10,-10),
        new THREE.Vector3( 10, 10,-10),
        new THREE.Vector3(-10, 10,-10),
        new THREE.Vector3(-10,-10, 10),
        new...