相机滚筒

Question

我正试着在一个特定的位置/方向设置一个照相机。我可以得到正确的位置和目标，但相机的“向上”方向是不正确的。

例如，我的相机位于+Z轴上，观察着原点的立方体。我想“滚动”我的相机顺时针沿Z轴，45°角相对于+Y。

当我在动画循环中应用旋转时，它可以工作。当我在init中应用旋转时，或者在动画循环之外的任何地方，它都不能工作。

我正在使用TrackballControls.js。没有控制，设置角度很好。我尝试过一些事情来使TrackballControls.js屈服于我的意志，但我一定是错过了什么。再一次，我可以在没有任何问题的情况下设定位置和目标，似乎是轮换造成了问题。

这是我的小提琴，虽然没有太多的东西：http://jsfiddle.net/TheJim01/f75q9rz0/30/

var hostDiv, scene, renderer, camera, root, controls, light, shape, theta;

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FOV = 35,
    NEAR = 0.1,
    FAR = 100;

function init() {
    hostDiv = document.createElement('div');
    document.body.appendChild(hostDiv);

    renderer = new THREE.WebGLRenderer({ antialias: true, preserverDrawingBuffer: true });
    renderer.setSize(WIDTH, HEIGHT);
    hostDiv.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
    camera.position.z = 75;

    controls = new THREE.TrackballControls(camera, renderer.domElement);

    light = new THREE.PointLight(0xffffff, 1, Infinity);
    light.position.copy(camera.position);

    scene = new THREE.Scene();
    scene.add(camera);
    scene.add(light);

    var geo = new THREE.BoxGeometry(5, 5, 5);
    var mat = new THREE.MeshPhongMaterial({color:'red'});
    var msh = new THREE.Mesh(geo, mat);
    scene.add(msh);

    theta = 0.78;

    //camera.rotateZ(theta);
    controls.object.rotateZ(theta);

    animate();
}

function animate() {
    //camera.rotateZ(theta);

    light.position.copy(camera.position);

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
}

init();

r68

Answer 1

我终于想出了办法。我用一种新的方法修改了TrackballControl.js以重置，然后设置摄像机的位置/旋转。旋转必须通过修改相机的向上矢量来完成，而不是通过旋转相机来完成(尽管人们会认为它们会产生同样的效果)。