threejs相机围绕原点旋转

时间:2015-12-09 04:57:54

标签: javascript camera three.js

一天 - 我试图做一些看似简单的事情,但它对我不起作用 - 我在原点有一堆物体,我想要旋转相机在他们周围,总是指着原点。据我所知,阅读文档时,这应该有效:

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

但原点上的方块很快就会飞出屏幕,然后偶尔会再次回来 - 所以我显然完全没有理解某些东西 - 我已经想到了,因为我有一个0,0的盒子,0和我看着0,0,0,然后将相机放在我无法看到盒子的任何地方是不可能的?

1 个答案:

答案 0 :(得分:0)

也许您正在寻找的是轨道控制。

您可以在这里找到演示:OrbitControl Demo

OrbitControl带来了一堆非常有用的属性来管理摄像机围绕THREE.Vector3进行轨道运行(在你的情况下为0,0,0)

编辑:

以下是使用轨道控制的原点围绕轨道相机的示例:

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