three.js ~ example ~ Mr.doob

2012-01-05 ~

JavaScript

var scene = new THREE.Scene(),
    CAMERAS = [
        new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100),
        new THREE.OrthographicCamera(-3*window.innerWidth/window.innerHeight,3*window.innerWidth/window.innerHeight,3,-3,0.001,10)
    ],
    camera,
    projector = new THREE.Projector(),
    renderer = new THREE.CanvasRenderer(),
    mesh = new THREE.Mesh(
        new THREE.CubeGeometry(4,0.5,1),
        new THREE.MeshNormalMaterial()
    ),
    circle = new THREE.Mesh(
		new THREE.CircleGeometry(0.5,32),
        new THREE.MeshBasicMaterial({color:0xeecc44})
	);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
for (var c in CAMERAS) {
    camera = CAMERAS[c];
    camera.position.x = 4;
    camera.position.y = 6;
    camera.position.z = 4;
    camera.rotation.y = 0.5;
    camera.rotation.x = -0.9;
    camera.rotation.z = 0.58;
    scene.add(camera);
}
camera = CAMERAS[0];
scene.add(createAxes());
scene.add(mesh);
scene.add(circle);
circle.applyMatrix(
    new THREE.Matrix4().setRotationFromEuler(camera.rotation)
);
circle.position.x = 1;
circle.position.y = 1;
circle.position.z = 1;
render();

document.addEventListener('click',function(e){
    CAMERAS.push(CAMERAS.shift());
    camera = CAMERAS[0];
});

document.addEventListener('mousemove',function(e){
	var v = new THREE.Vector3(
        (e.clientX/window.innerWidth)*2-1,
        -(e.clientY/window.innerHeight)*2+1,
        1
    );
	projector.unprojectVector(v,camera);
    
   	var dist = circle.position.sub(camera.position,circle.position),
		pos = camera.position.clone();
    pos = pos.add(pos,v.sub(v,camera.position).normalize().multiplyScalar(dist.length()));
    //pos = pos.add(pos,v.normalize().multiplyScalar(dist.length()));
    
	circle.position.x = pos.x;
	circle.position.y = pos.y;
	circle.position.z = pos.z;
});

function createAxes(){
    var axes = new THREE.Object3D(),
        geometry = new...