4

我的应用程序中有一个摄像头： 

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必须在我按下按键时旋转相机： 

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)并按照她所看到的方向移动相机。PS 这是一个文档，也许它会有所帮助。 为了处理键盘事件，我使用KeyboardJS 这是一个函数： cos(1)rotateOnAxistranslate

three.js

degInRad

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

JSFiddle上的链接

相机旋转

O- 相机的位置
O-O1- 当前的相机方向
R1- 当前的旋转方向
R- 我想要的方向
对不起图片好。

4

2 回答 2

14

您只需设置即可获得您想要的camera.rotation.order = 'YXZ';

于 2013-09-17T19:06:36.067 回答
5

相信您在概念上寻找的是相机装备设置。在这种方法中，您首先构建一个Object3D“颈部”，然后将相机连接到您想要的旋转对象上。然后，您可以将旋转应用Object3D到环顾四周，而不会产生摆动效果。为了更进一步，您可以将该“颈部”对象嵌套在另一个对象中Object3D以充当“身体”，并将平移应用于该对象以在场景中移动。这样，您就有了一个基本的相机控制器装备。我像这样修改了你的小提琴：

编辑：实现更改以更好地适应@ostapische 用例。这是小提琴链接

function degInRad(deg) {
    return deg * Math.PI / 180;
}
/////////////////////////////////
function render() {
    requestAnimationFrame(render);
    if (leftPressed) {
        neck.rotation.y += degInRad(1);
    } else if (rightPressed) {
        neck.rotation.y -= degInRad(1);
    }
    if (upPressed) {
        camera.rotation.x += degInRad(1);
    } else if (downPressed) {
        camera.rotation.x -= degInRad(1);
    }
    renderer.render(scene, camera);
}
/////////////////////////////////
var scene, camera, renderer, grass, neck;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;
/////////////////////////////////
window.onload = function() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    cameraHolder = new THREE.Object3D();
    cameraHolder.add( camera );
    renderer = new THREE.WebGLRenderer();
    renderer.rendererSize = {width: window.innerWidth, height: window.innerHeight, quality: 100, maxQuality: 400, minQuality: 20};
    renderer.setSize( renderer.rendererSize.width, renderer.rendererSize.height );
    document.body.appendChild( renderer.domElement );

    var texture, material, geometry, element;

    material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    material.side = THREE.DoubleSide;
    geometry = new THREE.PlaneGeometry(24, 24);   
    grass = new THREE.Mesh( geometry, material );
    grass.name = "grass";
    scene.add( grass );

    neck = new THREE.Object3D();
    neck.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
    neck.up = new THREE.Vector3(0, 0, 1);
    neck.position.z = 1;
    neck.position.y = -5;


    neck.add(camera);
    scene.add(neck);    

    KeyboardJS.on('left', function() { leftPressed = true; }, function() { leftPressed = false; });
    KeyboardJS.on('right', function() { rightPressed = true; }, function() { rightPressed = false; });
    KeyboardJS.on('up', function() { upPressed = true; }, function() { upPressed = false; });
    KeyboardJS.on('down', function() { downPressed = true; }, function() { downPressed = false; });

    render();
}

我本来打算提到 PointLockControl 或 FirstPersonControl，但我看到 WestLangley 提出的建议非常好。总之祝你好运

于 2013-09-16T18:56:24.237 回答