如何使相机围绕一个点旋转？

Question

如何使相机围绕一个点旋转？

3

如何使摄像机绕一个点旋转？我开始尝试，但当phi=90和-90时遇到了一些问题，并且在这种旋转方式下，摄像机不会翻滚。

    theta = - ( ( event.clientX - lastLeft ) * 360 /window.innerWidth ) + onMouseDownTheta;
    phi = ( ( event.clientY - lastTop ) * 360 /window.innerHeight ) + onMouseDownPhi;
    var cosPhi = Math.cos( phi * Math.PI / 180 );
    var sinPhi = Math.sin( phi * Math.PI / 180 );
    var sinTheta = Math.sin( theta * Math.PI / 180 );
    var cosTheta = Math.cos( theta * Math.PI / 180 );

   camera.position.x = - radious * sinTheta * cosPhi;
   camera.position.y = radious * sinPhi;
   camera.position.z = radious * cosTheta * cosPhi;

   camera.lookAt(new THREE.Vector3(0,0,0))


  if(phi > 90){
     u = u*(-1);                
     camera.up = new THREE.Vector3(0, u, 0);
  }
  camera.updateMatrix();

- Setaper

你的意思是相机在某些点上会翻转，但你想要的旋转更像这个：http://braingl.de？ - Roest

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nimphious · Accepted Answer

常见的相机控制类型已经内置于three.js中，并且可以轻松实现。

许多示例已经使用这些控制接口，您可以像下面这样简单地利用它们：

var scene, renderer, camera, controls, clock;

function init() {
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT_RATIO, NEAR, FAR);
    controls = new THREE.TrackballControls(camera);

    clock = new THREE.Clock();

    // ... (Scene setup)

    requestAnimationFrame(update);
}

function update() {
    requestAnimationFrame(update);

    // Fetch the delta from THREE.js' clock.
    var delta = clock.getDelta();
    // Pass it to the camera controller.
    controls.update(delta);

    renderer.render();
}

// Load up the scene when the page finishes loading.
// This can be done a few different ways, this one is
// useful for script tags embedded in the <head> of the page.
window.addEventListener('load', init, false);

如果你想编写自己的控制器，可以查看控制器的源代码，以了解内置控制器如何操作相机： https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js