拖动时围绕对象旋转相机

Question

在我的 three.js 场景中，我有一个带有 {x: 0, y:0 z:-150} 的对象。我的相机的位置是{x:0, y:0, z:75);。我想要的是用户可以在物体周围拖动相机，让用户一直看着物体。

相机需要在向左或向右拖动时跟随给定的圆圈描边。

我尝试使用 OrbitControls 和 pivotPoint 得到这个结果：

const controls = new OrbitControls( camera, renderer.domElement );
controls.update();
         
object.position.set(0, 0, -150);
pivotPoint = new THREE.Object3D();
object.add(pivotPoint);

camera.position.set(0, 0, 75);
camera.lookAt(object.position);

我现在遇到的问题是相机围绕自身旋转，而不是围绕物体旋转。

Answer 1

试试看：

camera.position.set(0, 0, 75);

object.position.set(0, 0, -150);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(object.position);
controls.update();

上面代码的思路是利用OrbitControls的target属性来表示对焦点。无需在相机对象上手动调用 lookAt()。

拖动时围绕对象旋转相机

Pivot camera around object on drag

javascript

3d

camera

drag

three.js