Three.js - 单击更改相机 POV答案

【问题标题】：Three.js - change camera POV on clickThree.js - 单击更改相机 POV
【发布时间】：2018-04-24 05:42:57
【问题描述】：

一些项目背景：

我有一个随机生成的 Sprite 粒子场。相机位于位置 0, 0, 0。粒子场在相机周围。我正在使用 Raycaster 来选择被点击的粒子并改变它的颜色。单击后，我希望相机聚焦在这个粒子上。我还尝试使用 Tween 将粒子滑入视野。

我尝试了几种不同的方法，但都没有奏效。它们在此处进行了描述：

一种传统的lookAt 方法，它使用Raycaster 从点击中拾取相交点。

var raycaster = new THREE.Raycaster(); raycaster.setFromCamera（鼠标，this.camera）； var intersects = raycaster.intersectObjects(this.starfield.children); this.camera.lookAt(intersects[0].object.position)
一种 distanceTo 方法，其中相机和相交坐标之间的距离用于移动相机。这只会沿 z 平面移动相机。它实际上不会改变它的 POV。

var cameraPosition = new THREE.Vector3(this.camera.position.x, this.camera.position.y, this.camera.position.z);

var intersectPosition = new THREE.Vector3(intersects[0].object.position.x, intersects[0].object.position.y , intersects[0].object.position.z );

var zoomPos = intersectPosition.distanceTo( cameraPosition );

const newCameraPosition = cameraPosition.addVectors(this.camera.position, vector.setLength(zoomPos));

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

我不知道还能做什么。在这个阶段，只要我让这台相机正常工作，我就完全愿意接受不同的方法。我很困任何帮助将不胜感激！

【问题讨论】：

intersects[0].object.position 记录什么？如果你有 THREE.Points 它总是会得到相同的值。
intersects[0].object.position 是鼠标点击的点，包含坐标x,y,z
有趣，x,y,z 听起来可能是THREE.Vector3。如果你写console.log(intersects[0].object.position)并运行代码，这些坐标x、y和z的值是多少？
那些坐标是0,0,0
如果你使用相同的值作为输入，你不能期望得到不同的结果。粒子系统位于 0,0,0，您要求的属性正确反映了这一点。 zoomPos 将始终记录 0，因为您要求的是到同一点的距离。

标签： animation three.js camera tween.js

【解决方案1】：

而不是使用

intersects[0].object.position

尝试使用

intersects[0].point

.point 是命中的世界空间位置。

.object是三角形所属的对象。 .object.position 只是该对象的来源，在本例中为粒子系统。粒子位置本身是相对于这个原点的。

【讨论】：