threejs摄像头绕原点旋转

Question

g'day - I'm trying to do something that seems easy, but it's not working for me - I have a bunch of objects at the origin, and I want to rotate a camera around them, always pointing at the origin. As far as I could tell from reading the documentation, this should work:

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;camera.position.x = 0;camera.position.y = 0;
scene.add(camera);

var spin = Tween.create().time(5000).from( {angle:0}).to({angle:2 * Math.PI})
  .apply( function (v) {
    camera.position.x = 500 * Math.cos(v.angle);
    camera.position.z = 500 * Math.sin(v.angle);
    camera.lookAt(0, 0, 0);
});
spin.chain(spin);
spin.start();

but the boxes at the origin quickly fly off screen, and then come back again occasionally - so I'm obviously completely not understanding something - I'd have thought, given I have a box at 0,0,0 and I'm looking at 0,0,0, then it would be impossible to put the camera anywhere that I can't see the box?

Answer 1

Maybe what you are looking for is the Orbit Control.

Here you can find a demo: OrbitControl Demo

With the OrbitControl comes a bunch of property very useful to manage camera to orbit around a THREE.Vector3 (in your case 0,0,0)

EDIT:

Here is an example of orbit camera around the origin using Orbit Control:

orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.target = new THREE.Vector3(0,0,0); // set the center
orbit.maxPolarAngle =  Math.PI/2; // prevent the camera from going under the ground
orbit.minDistance = 140; // the minimum distance the camera must have from center
orbit.maxDistance = 250; // the maximum distance the camera must have from center
orbit.zoomSpeed = 0.3; // control the zoomIn and zoomOut speed
orbit.rotateSpeed = 0.3; // control the rotate speed