围绕具有Three.js的对象旋转相机 [英] Rotate camera around object with Three.js

问题描述

我使用WebGlRenderer显示一个带有Three.js的OBJ元素，现在我想允许用户在任何方向上旋转对象，我发现这个答案：

使用鼠标在Three.js中旋转相机但是这两个例子都返回了我的错误，第一个说投影机没有定义，我不知道它是什么意思与投影机。我只是一个简单的相机，对象和一些光。
第二个代码说undefined不是一个函数。

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

解决方案

这是你想要的： 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添加了此控件。）

I'm displaying an OBJ element with Three.js using WebGlRenderer, now I'd like to allow users to rotate the camera around the object in any direction, I've found this answer:

Rotate camera in Three.js with mouse

But both examples return me errors, the first says that projector is not defined, and I don't know what it means with "projector". I've just a simple camera, the object and some light. The second code says that undefined is not a function.

Does someone know how to get the result I need?

解决方案

This is what you want: http://threejs.org/examples/misc_controls_orbit.html

Include the orbit controls (after you have downloaded them):

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

Setup the variable:

var controls;

Attach the controls to the camera and add a listener:

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

and in your animate function update the controls:

controls.update();

[Update] controls.autoRotate = true; (tested in v73. Recent versions of OrbitControls.js has added this control.)

这篇关于围绕具有Three.js的对象旋转相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！