Three.js camera understanding

Question

Here's the task:

We have an Mesh, drawn in position POS with rotation ROT Also we have a camera Which position and rotation is relative to Mesh For example camera point is CPOS and camera rotation is CROT.

How to calculate resulting angle for camera? I was assuming that it something like:

camera.rotation.x = mesh.rotation.x + viewport.rotation.x
camera.rotation.y = mesh.rotation.y + viewport.rotation.y
camera.rotation.z = mesh.rotation.z + viewport.rotation.z

That worked strange and wrong.

Then I decided to read about it on docs and completely dissapointed.

There are several kind of rotation structures (Euler, Quaternion). But What a want is something different.

Imagine, like you are on spaceship. And it moves in space. You are sitting at starboard turret and looking at objects. They seems like passing by... Then you want to turn your head - Angel of your head is known to you (in raw opengl, I'd just multiplied head rotation matrix on ship's rotation matrix and got my projection matrix).

In other words I want only x and y axis for camera rotations, combined in matrix. Then I want to multiply it with position-rotation matrix of an object. And this final matrix would be my projection matrix.

How could I do the same in THREE.js?

-----EDIT----- Thank you for the answer.

Which coords should I give to a camera? It should be local, mesh relative coords, or something absolute?

I understand, that this questions are obvious, but there's no any description about relative objects in THREE.JS docs (besides api description). And the answer might be ambiguous.

Add the camera as a child of the mesh ( mesh.add( camera ) ) and see if that gives you the behavior you want. — WestLangley
When the camera is a child of an object, the camera's position is specified in object-relative coordinates. (Have I understood your question? If so, I will compose an answer.) — WestLangley
Absolutely. Sorry for long time testing your solution. This works absolutely right for me! I making quaternions for camera (when rotating camera) and for mesh (when rotating mesh). Camera turns around it's own axises, mesh around it own and turns camera as his child. Camera positioned relative to Mesh. Everything just fine! — Vasiliy Stavenko

WestLangley WestLangley · Accepted Answer · 2013-11-24T13:49:29

Add the camera as a child of the mesh like so:

mesh.add( camera );

When the camera is a child of an object, the camera's position and orientation are specified relative to the parent object.

You can set the camera's orientation by setting either the camera's quaternion or Euler rotation -- your choice.

Please note that the renderer updates the object's matrix and matrixWorld for you. You do not need to do that manually.

three.js r.63

Three.js camera understanding

1 Answers