Setting the projectionMatrix of a Perspective Camera in Three.js

Question

I'm trying to set the ProjectionMatrix of a Three.js Perspective Camera to match a projection Matrix I calculated with a different program.

So I set the camera's position and rotation like this:

self.camera.position.x = 0;
self.camera.position.y = 0;
self.camera.position.z = 142 ;
self.camera.rotation.x = 0.0;// -0.032
self.camera.rotation.y = 0.0;
self.camera.rotation.z = 0;

Next I created a 4x4 Matrix (called Matrix4 in Three.js) like this:

var projectionMatrix = new THREE.Matrix4(-1426.149, -145.7176, -523.0170, 225.07519, -42.40711, -1463.2367, -23.6839, 524.3322, -0.0174, -0.11928, -0.99270, 0.43826, 0, 0, 0, 1);

and changed the camera's projection Matrix entries like this:

for ( var i = 0; i < 16; i++) {
    self.camera.projectionMatrix.elements[i] = projectionMatrix.elements[i];
}

when I now render the scene I just get a black screen and can't see any of the objects I inserted. Turning the angle of the Camera doesn't help either. I still can't see any objects.

If I insert a

self.camera.updateProjectionMatrix();

after setting the camera's projection Matrix to the values of my projectionMatrix the camera is set back to the original Position (x=0,y=0,z=142 and looking at the origin where I created some objects) and the values I set in the camera's matrix seem to have been overwritten. I checked that by printing the cameras projection Matrix to the console. If I do not call the updateProjectionMatrix() function the values stay as I set them.

Does somebody have an idea how to solve this problem?

Have you found a solution for this problem? If so, could you please post it? I'm having to deal with the same issue. Thanks. — Luiz SSB

pailhead pailhead · Accepted Answer · 2014-05-28T08:05:16

If I do not call the updateProjectionMatrix() function the values stay as I set them.

Correct, updateProjectionMatrix() calculates those 16 numbers you pasted in your projection matrix based on a bunch of parameters. ~~Those parameters are, the position and rotation you set above, plus the parameters you passed (or default) for the camera.~~ (these actually make the matrixWorld and its inverse.

In case of a perspective camera, you don't have much - near, far, fov and aspect. Left,right,top,bottom are derived from these, with an orthographic camera you set them directly. These are then used to compose the projection matrix.

Scratch a pixel has a REALLY good tutorial on this subject. The next lesson on the openGL projection matrix is actually more relevant to WebGL. left right top and bottom are made from your FOV and your aspect ratio. Add near and far and you've got yourself a projection matrix.

Now, in order for this thing to work, you either have to know what you're doing, or get really lucky. Pasting these numbers from somewhere else and getting it to work is short of winning the lottery. Best case scenario, you can have your scale all wrong and clipping your scene. Worst case, you've mixed a completely different matrix, different XYZ convention, and there's no way you'll get it to work, or at least make sense.

Out of curiosity, what are you trying to do? Are you trying to match your camera to a camera from somewhere else?

Setting the projectionMatrix of a Perspective Camera in Three.js

1 Answers