6

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);
}
heyscam
  • 65
  • 1
  • 4

1 Answers1

9

After setting the camera matrix, you need to call

camera.updateMatrixWorld( true );

What you are doing is not advisable.

three.js was not designed to be used this way. It is best not to mess with an object matrix directly -- unless you really know what you are doing, and understand the inner-workings of the library.

Instead just set the camera's quaternion (or rotation), position, and scale, and let the library update the matrix.

three.js r.60

WestLangley
  • 102,557
  • 10
  • 276
  • 276