three.js: Rotate around origin after panning camera

问题

I have a plane/board, with a grid, that is about 1100 x 1100. I have panning, zooming, and rotating working except for the fact that the board moves back to the center of the screen after it has been panned. So, if I don't pan the board at all then everything works. After I pan the board it moves back to the center of the screen when I try to rotate it. I cannot figure out how to change the origin of the camera so that it rotates around the center of the board. It seems like it rotates around the center of the camera.

var radius = 1500, theta = 45 * 0.5, onMouseDownTheta = 45 * 0.5; var fov = 45; var mouse2D = new THREE.Vector3(0, 10000, 0.5);

cameraX = radius * Math.sin(THREE.Math.degToRad(theta)); cameraY = 1000; cameraZ = radius * Math.cos(THREE.Math.degToRad(theta));

camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(cameraX, cameraY, cameraZ);

scene = new THREE.Scene(); camera.lookAt(scene.position);

render();

ThreeBoard.prototype.render = function() {

mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse2D.y = - (event.clientY / window.innerHeight) * 2 + 1;

// rotate
if (isMouseDown && isShiftPressed && !isCtrlPressed) {
    theta = ((event.pageX - mouse2D.x) * 0.5) + onMouseDownTheta;

    cameraX = radius * Math.sin(THREE.Math.degToRad(theta));
    cameraZ = radius * Math.cos(THREE.Math.degToRad(theta));

    camera.position.set(cameraX, cameraY, cameraZ);

    camera.lookAt(scene.position);
}

// pan
if (isMouseDown && isShiftPressed && isCtrlPressed) {
    theta = ((event.pageX - mouse2D.x) * 0.5) + onMouseDownTheta;

    cameraX += 10 * mouse2D.x;
    // cameraY += 10;
    cameraZ -= 10 * mouse2D.y;

    camera.position.set(cameraX, cameraY, cameraZ);

    // camera.lookAt(scene.position);
}

renderer.render(scene, camera);

};

来源：https://stackoverflow.com/questions/16204720/three-js-rotate-around-origin-after-panning-camera

标签

camera

rotation

three.js

pan