three.js在平面中旋转相机 [英] three.js rotate camera in plane

问题描述

我的应用程式中有相机：

I have a camera in my app:

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 1;
camera.position.y = -5;
camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
camera.up = new THREE.Vector3(0, 0, 1);  

render 函数中的代码必须旋转相机，而我按键：

Those code in render function must rotate the camera while I'm pressing the keys:

if (leftPressed) {
    camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(1));
} else if (rightPressed) {
    camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(-1));
}
if (upPressed) {
    camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(1));
} else if (downPressed) {
    camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(-1));
}  

相机旋转，但不是我需要的方式。我想要相机旋转像飞机上的FPS（第一人称射击）。查看图片以了解我想要的...

我尝试使用 sin（1）和 cos ），但不能理解 rotateOnAxis 如何工作，因为 translate

PS

这是一个 three.js 可能会有帮助。

要处理键盘事件，我使用 KeyboardJS

这里是一个 degInRad function：

Camera rotates, but not in way I need. I want that camera rotates like in FPS (first person shooter) on plane. See picture to understand what I want...
I'm try to use sin(1) and cos(1) but can't understand how rotateOnAxis works, cause translate functions work like a charm and moves camera in direction in what she sees.
P.S.
Here is a docs to the three.js maybe it helps.
To handle keyboard events I use KeyboardJS
And here is a degInRad function:

function degInRad(deg) {
    return deg * Math.PI / 180;
}  

链接 JSFiddle

O - 相机位置

O-O1 - 当前相机方向

R1 - 当前旋转方向

R - 我想要的方向

对于好的图片很抱歉。

O - position of camera
O-O1 - current camera direction
R1 - current rotation direction
R - direction what I want
Sorry for good picture.

推荐答案

您可以通过设置 camera.rotation.order ='YXZ';

这篇关于three.js在平面中旋转相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！