Tuesday, 27 August 2013

Setting the camera matrix manually in ThreeJS

Setting the camera matrix manually in ThreeJS

I'm trying to manually set the matrix of a camera in a simple three.js
scene. I've tried calling the matrix.set method in combination with
matrixAutoUpdate = false, but whilst the scene renders initially it
doesn't change over time as I was hoping. I've also tried setting the
matrix with camera.matrix = with the same result. Makes me think I'm
missing something about how to get the object to 'take on' the manually
set values. I've also tried applyMatrix but that seems to do something
else entirely.
Any advice much appreciated - thanks!
Here's a pen of the code in action:
http://codepen.io/heyscam/pen/phflL
And here's just the JS:
var WIDTH = 640;
var HEIGHT = 360;
var VIEW_ANGLE = 31.417;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 0.1;
var FAR = 10000;
var $container = $('#container');
console.log($container);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR
);
scene.add(camera);
var cube = new THREE.Mesh(
new THREE.CubeGeometry(200, 200, 200)
);
scene.add(cube);
var frame = 0;
animate();
function animate() {
camera.matrixAutoUpdate = false;
camera.matrix.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 500 + (frame * 10),
0, 0, 0, 1);
render();
frame++;
requestAnimationFrame(animate);
}
function render() {
renderer.render(scene, camera);
}

No comments:

Post a Comment