Javascript 使用Three.js围绕对象旋转摄影机

我正在使用WebGlRenderer显示一个带有三个.js的OBJ元素，现在我想允许用户围绕对象向任何方向旋转相机，我找到了以下答案：

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

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

这就是你想要的：

包括动态观察控件（下载后）：

将控件连接到相机并添加侦听器：

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

并在动画功能中更新控件：

controls.update();

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

---

[更新]

controls.autoRotate=true（在v73中测试。OrbitControls.js的最新版本添加了此控件。）
事实上，如果用您选择的对象替换“camera”，对象将旋转。但如果周围有其他对象（例如地板上的网格），它们仍将静止不动。这可能是你想要的，也可能看起来很奇怪。（想象一把椅子在地板上旋转……？）

初始化动态观察控件后，我选择从代码中覆盖OrbitControls.JS中的中心对象

controls = new THREE.OrbitControls(camera, renderer.domElement);
…
controls.center =  new THREE.Vector3(
    chair.position.x,
    chair.position.y,
    chair.position.z
);

（免责声明：我觉得OrbitControls.js有不同的版本，但我假设它们都使用这个中心对象）
添加一个侦听器以在更改
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.addEventListener("change", () => {
      if (this.renderer) this.renderer.render(this.scene, camera);
    });

在动画更新控件中：

controls.update();

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

查看限制自动旋转方向更改的用户的其他信息：

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

 controls.update();

if(
controls.getAzimuthalAngle（）>=Math.PI/2||
getAzimuthalAngle（）如果出于某种原因不想使用OrbitControls，这里有一个快速的技巧

            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来更改它。
谢谢，但现在是围绕相机旋转的项目…如何反转该行为？thanks@FezVrasta您可以选择要环绕的对象，这样您就可以在其中放置一个对象，而不是摄影机，例如“球体”所以它将是：新的三个。OrbitControls（球体）；谢谢，但我不能让它工作，我用这段代码来加载OBJ：但是如果我在OrbitControls中使用object，它会说object是未定义的……不必在代码中编写
控件。addEventListener（'change'，render）；
。库本身正在做这件事。还有
controls.update（）
必须在
函数render（）{…}
中，而不是在
函数animate（）{…}
中，甚至不需要使用
控件。在
render（）
中更新（）。