Three.js position and direct the camera

问题

For me is impossible after hours/days of search to find the answer to such a central problem in Three.js: I know 1) the position of the camera (=my eyes) 2) The direction of the camera (of my eyes) 3) the direction of my head. Generate the camera (we ignore camera angle, near/far, aso). The nearest I get is as follows:

  camera = new THREE.PerspectiveCamera(150, window.innerWidth / window.innerHeight, 0.1, 5000);

  camera.position.x = myParams.eye_x;
  camera.position.y = myParams.eye_y;
  camera.position.z = myParams.eye_z;

  camera.rotateOnAxis(new THREE.Vector3(0,0,1),  Math.PI /2);
  camera.rotateOnAxis(new THREE.Vector3(0,0,1),  Math.PI * (myParams.eye_deg2)/180);
  camera.rotateOnAxis(new THREE.Vector3(sin(myParams.eye_deg2),-cos(myParams.eye_deg2),0), Math.PI * (myParams.eye_deg1+90)/180);

  camera.updateProjectionMatrix();

where eye_deg1 is the high of the eyes (-90: look at bottom, 90: look upwards), eye_deg2 (xy-plane direction, 0: -x direction).

The first two rotations are on the same axis and could be done in one step. The second rotation does not work.

If I switch the setting of the position and the rotation, I do not observe any change (but rotation does not commute with translation?!?).

But to be honest I just need a function that generate the camera and I don't need any explanation. I do not understand why to solve such a simple problem I have to read a 600 pg book on 3D graphics....

The eye vector is (-cos a1 cos a2,-cos a1 sin a2,sin a1), where a1 = eye_deg1 and a2 = eye_deg2. Three.js default is (0,0,-1), that is a1=-90 (bottom)

The head vector is (-sin a1 cos a2,-sin a1 sin a2,cos a1). Three.js default is (0,1,0), that is a2=90.

An example, a1= 0. The eye vector is (- cos a2,-sin a2,0), the head vector is (0,0,1).

回答1:

The solution

camera = new THREE.PerspectiveCamera(150, window.innerWidth / window.innerHeight, 0.1, 5000);

camera.position.x = myParams.eye_x;
camera.position.y = myParams.eye_y;
camera.position.z = myParams.eye_z;

camera.up.set( 
    -sin(myParams.eye_deg1) * cos (myParams.eye_deg2),
    -sin(myParams.eye_deg1) * sin (myParams.eye_deg2),
    cos(myParams.eye_deg1)
);
camera.lookAt(new THREE.Vector3(
    myParams.eye_x - cos (myParams.eye_deg1) * cos (myParams.eye_deg2),
    myParams.eye_y - cos (myParams.eye_deg1) * sin (myParams.eye_deg2),
    myParams.eye_z + sin (myParams.eye_deg1)
));

来源：https://stackoverflow.com/questions/47162561/three-js-position-and-direct-the-camera

标签

javascript

three.js