Animation Three.js-单击即可更改摄影机POV

一些项目背景：

我有一个随机生成的精灵粒子场。摄像机位于位置0、0、0。粒子场在摄影机周围。我使用Raycaster可以选择单击的粒子并更改其颜色。单击后，我希望摄影机将焦点对准此粒子。我还尝试使用吐温将粒子滑动到视图中

我尝试过几种不同的方法，但都不管用。这里描述了它们：

一种传统的注视方法，使用光线投射器从单击中拾取相交点

var raycaster=new THREE.raycaster（）； raycaster.setFromCamera（鼠标，this.camera）； var intersects=raycaster.intersectObjects（this.starfield.children）； this.camera.lookAt（与[0].object.position相交）

distanceTo方法，其中摄影机和相交坐标之间的距离用于移动摄影机。这仅会沿z平面移动摄影机。它实际上不会改变它的POV

我通过tan和cos方程计算了每个X、Y和Z轴的旋转角度。然后，我尝试将相机旋转这些角度。我甚至尝试将它们转换成弧度，看看这是否会对旋转方法产生影响。它没有：(

我不知道还能做什么。在这个阶段，我完全愿意接受一种不同的方法，只要我能让这台相机正常工作。我被卡住了， 非常感谢您的帮助！

请不要使用

intersects[0].object.position 

试用

intersects[0].point

.point

是命中的世界空间位置

---

.object

是三角形所属的对象。

.object.position

只是该对象的原点，在本例中是粒子系统。粒子位置本身是相对于该原点的。

什么相交[0].object.position log？如果你有

3个.Points

，它总是会得到相同的值。相交[0]。object.position是鼠标单击的点，它包含坐标x，y，zinteresting，x，y，z，听起来可能是

3.Vector3

。如果你写

console.log（相交[0]。object.position）

然后运行代码，这些坐标x、y和z的值是多少？这些坐标是0,0,0如果使用相同的值作为输入，则不能期望得到不同的结果。粒子系统的生存状态是0,0,0，您请求的属性正确反映了这一点。

zoomPos

将始终记录为0，因为您正在请求与同一点之间的距离。

intersects[0].point