Три JS - панорамирование камеры вертикально без наклона? - PullRequest
Новая
       16

Три JS - панорамирование камеры вертикально без наклона?

0 голосов
/ 08 апреля 2020

Я использую периодический код мистера Дуба c в своем веб-приложении:

https://threejs.org/examples/css3d_periodictable.html

Я использую его в Helix просмотр. Когда я поворачиваю объект влево, я также сдвигаю положение Y камеры на определенную величину. Мое желание состоит в том, чтобы создать впечатление, что спираль штопор вертикально вверх и вниз при вращении камеры. Это код, который я использую, где angle и panAmount - это константы, управляющие частотой вращения и вертикального панорамирования в секунду: 

    let g_RotationMatrix = new THREE.Matrix4();

    g_RotationMatrix.makeRotationY(angle);

    // Apply matrix like this to rotate the camera.
    self.object.position.applyMatrix4(g_RotationMatrix);

    // Shift it vertically too.         
    self.object.position.y += panAmount;

    // Make camera look at the target.
    self.object.lookAt(self.target);

У меня проблема в том, что с точки зрения камеры объект наклоняется к вам и от вас, соответственно, в зависимости от направления вращения, когда камера смещается вертикально. Это имеет смысл для меня, потому что я предполагаю, что функция lookat () заставляет камеру смотреть в центр цели, а не в точку на цели, которая находится ближе всего к ней, поэтому камера должна наклоняться, чтобы сфокусироваться на центре масс цели. Я вижу тот же эффект, когда использую мышь для вертикального панорамирования с помощью элементов управления Orbit. Я полагаю, что другой способ описать эффект состоит в том, что объект отображается с высотой вверх и вниз при вертикальном смещении камеры.

Вместо этого мне нужен эффект омывателя окна на автоматическом поднимите лифт вверх и вниз по стороне здания, при этом сторона здания будет выглядеть идеально плоской для камеры независимо от текущего положения Y камеры.

Как мне добиться этого эффекта с камерой?

1 Ответ

1 голос
/ 08 апреля 2020

Сделайте так, чтобы камера смотрела на цель, но на том же уровне y, что и камера.

Предполагая, что self.target является объектом vector3, а self.object - камерой:

Если, например, self.target - это центр вращения камеры объекта, вы не захотите менять фактический вектор self.target. Сначала сделайте его копию. 

const newTarget = new THREE.Vector3( );

function render( ){

    // copy the target vector to newTarget so that the original self.target 
    // will not change and the camera can still rotate around the original
    // target.
    newTarget.copy( self.target );

    // Set newTarget's Y from the camera Y. So that is looks horizontal.
    newTarget.y = self.object.position.y; 

    // Make the camera look at the objects newTarget
    self.object.lookAt( newTarget);

}
...