Question

如何让相机围绕一个点旋转？我开始这样做，但是当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();

Answer 1

常见的相机控制类型已经内置到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

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

1 个答案: