Question

我正在尝试在特定位置/方向设置相机。我可以让位置和目标行为正确，但相机的“向上”方向不正确。

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

当我在动画循环中应用旋转时，它可以正常工作。当我在我的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以重置，然后设置相机位置/旋转。旋转必须通过修改相机的向上矢量来完成，而不是通过旋转相机（尽管人们会认为它们具有相同的效果）。

设置相机胶卷

1 个答案: