使用Three.js在物体周围旋转相机

Question

我正在使用WebGlRenderer显示带有Three.js的OBJ元素,现在我想允许用户在任何方向上围绕对象旋转相机,我找到了这个答案:

使用鼠标在Three.js中旋转相机

但是这两个例子都给我带来了错误,第一个说没有定义投影机,我不知道"投影机"是什么意思.我只是一个简单的相机,物体和一些光.第二个代码表示undefined不是一个函数.

有人知道如何获得我需要的结果吗？

Answer 1

这就是你想要的:http://threejs.org/examples/misc_controls_orbit.html

包括轨道控件(下载后):

<script src="js/controls/OrbitControls.js"></script>

设置变量:

var controls;

将控件附加到相机并添加一个监听器:

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );

并在您的animate函数中更新控件:

controls.update();

[更新] controls.autoRotate = true;(在v73中测试.最近版本的OrbitControls.js添加了此控件.)

Answer 2

如果您不想搞乱OrbitControls，只需将相机添加到吊杆上即可Group

  const boom = new THREE.Group();
  boom.add(camera);
  scene.add(boom);
  camera.position.set( 0, 0, 100 ); // this sets the boom's length 
  camera.lookAt( 0, 0, 0 ); // camera looks at the boom's zero

那么你可以旋转这个吊杆而不是相机本身。

  boom.rotation.x += 0.01;

顺便说一句，您可能想向此吊杆添加一些额外的对象，例如灯光等