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

时间:2013-08-27 13:16:56

标签: javascript camera three.js

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

Rotate camera in Three.js with mouse

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

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

6 个答案:

答案 0 :(得分:31)

这就是你想要的: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;(在第73版中测试。最近版本的OrbitControls.js添加了此控件。)

答案 1 :(得分:2)

这里有一个快速技巧,以防您出于某种原因不想使用 OrbitControl。

            camera.position.copy( target );
            camera.position.x+=Math.sin(camera.rotationy)*3;
            camera.position.z+=Math.cos(camera.rotationy)*3;
            camera.position.y+=cameraHeight; // optional
            tempVector.copy(target).y+=cameraHeight; // the += is optional
            camera.lookAt( tempVector );

camera.rotationy 是鼠标旋转值的副本,因为我们通过调用 lookAt 来更改它。

答案 2 :(得分:1)

实际上,如果用您选择的物体替换“相机”,物体将会旋转。但如果周围有其他物体(例如地板上的网格),它们仍然会静止不动。这可能是你想要的,或者看起来很奇怪。 (想象一下椅子在地板上漂浮......?)

初始化轨道控制后,我选择从我的代码中覆盖OrbitControls.JS中心对象

public class ShellBoot: Bootstrapper<ShellViewModel>
    {
        public ShellBoot(IServiceContainer package)
        {
            DisplayRootViewFor<ShellViewModel>();
            Start();
        }
    }

(免责声明:我的印象是有不同版本的OrbitControls.js,但我认为他们都使用这个中心对象)

答案 3 :(得分:1)

如果您使用的是 ES6,以下可用于 OrbitControls

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// this would create the orbit controls
// it would allow camera control using mouse
const orbitControls = new OrbitControls(camera, renderer.domElement);

如果您需要自动旋转,

function init() {
  ...

  // following would enable autorotate
  const orbitControls.autoRotate = true;

  ..
}

function animate() {
  // need to update the orbitcontrols for autorotate camera to take effect
  orbitControls.update();

  ...
  renderer.render( scene, camera );
  requestAnimationFrame( animate );
}

参考:https://threejs.org/docs/#examples/en/controls/OrbitControls

答案 4 :(得分:0)

添加一个侦听器以在OrbitControl更改时触发渲染方法:

    const controls = new OrbitControls(camera, this.renderer.domElement);
    controls.enableDamping = true;   //damping 
    controls.dampingFactor = 0.25;   //damping inertia
    controls.enableZoom = true;      //Zooming
    controls.autoRotate = true;       // enable rotation
    controls.maxPolarAngle = Math.PI / 2; // Limit angle of visibility
    controls.keys = {
      LEFT: 37, //left arrow
      UP: 38, // up arrow
      RIGHT: 39, // right arrow
      BOTTOM: 40 // down arrow
    };

   controls.addEventListener("change", () => {
      if (this.renderer) this.renderer.render(this.scene, camera);
    });

和动画更新控件中:

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  };
  stop = () => {
    cancelAnimationFrame(this.frameId);
  };

  renderScene = () => {
    if (this.renderer) this.renderer.render(this.scene, camera);
  };


animate = () => {
    // update controls
    controls.update();
}

答案 5 :(得分:0)

寻找自动旋转方向限制的人的其他信息:

if (
   controls.getAzimuthalAngle() >= Math.PI / 2 ||
   controls.getAzimuthalAngle() <= -Math.PI / 2
 ) {
   controls.autoRotateSpeed *= -1;
 }

 controls.update();