三.js 定位并引导相机 [英] Three.js position and direct the camera

问题描述

经过数小时/数天的搜索，我无法在 Three.js 中找到这样一个核心问题的答案:我知道 1)相机的位置(=我的眼睛)2)相机的方向(我的眼睛)3)我头部的方向.生成相机(我们忽略相机角度、近/远、aso).我得到的最近的如下:

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();

其中 eye_deg1 是眼睛的高度(-90:看底部，90:向上看)，eye_deg2(xy 平面方向，0:-x方向).

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?!?).

但说实话，我只需要一个生成相机的函数，我不需要任何解释.我不明白为什么要解决这么简单的问题，我必须阅读一本 600 页的关于 3D 图形的书......

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....

眼睛向量为 (-cos a1 cos a2,-cos a1 sin a2,sin a1)，其中 a1 = eye_deg1 且 a2 = eye_deg2.三.js默认是(0,0,-1)，即a1=-90(下)

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)

头部向量是(-sin a1 cos a2,-sin a1 sin a2,cos a1).三.js默认为(0,1,0)，即a2=90.

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.

举个例子，a1=0.眼睛向量是(-cos a2,-sin a2,0)，头部向量是(0,0,1).

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

推荐答案

解决方案

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)
));

这篇关于三.js 定位并引导相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！