camera - three.js: カメラをパンした後に原点を中心に回転する

Question

約1100 x 1100のグリッドを持つ平面/ボードがあります。パンした後、ボードが画面の中心に戻るという事実を除いて、パン、ズーム、および回転が機能しています。したがって、ボードをまったくパンしなければ、すべてが機能します。ボードをパンした後、回転しようとすると画面の中央に戻ります。ボードの中心を中心に回転するようにカメラの原点を変更する方法がわかりません。カメラの中心を中心に回転しているように見えます。

var radius = 1500、シータ = 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)); カメラ Y = 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);

シーン = 新しい THREE.Scene(); camera.lookAt(シーン.位置);

与える（）;

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);

};