Three.js - изменить POV камеры при нажатии

Question

Некоторый фон проекта:

У меня есть поле частиц Спрайта, которое генерируется случайным образом. Камера расположена в позициях 0, 0, 0. Поле частиц находится вокруг камеры. Я использую Raycaster, чтобы иметь возможность выбрать частицу, на которую нажимают, и изменить ее цвет. После нажатия я бы хотел, чтобы камера сфокусировалась на этой частице. Я также пытаюсь использовать Tween, чтобы скользить частицу в поле зрения.

Я пробовал несколько разных методов, и ни один из них не работает. Они описаны здесь:

1. Традиционный метод lookA t, который использовал Raycaster, чтобы выбрать точку пересечения от щелчка.

   var raycaster = new THREE.Raycaster (); raycaster.setFromCamera (мышь, this.camera); var intersects = raycaster.intersectObjects( this.starfield.children); this.camera.lookAt(пересекает [0].object.position)

2. Метод 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));

3. Я рассчитал угол поворота для каждой оси X, Y и Z с помощью уравнений tan и cos. Затем я попытался повернуть камеру на эти градусы. Я даже пытался преобразовать их в радианы, чтобы увидеть, изменит ли это метод вращения. Это не так:(

Я не знаю, что еще делать. На этом этапе я полностью открыт для другого подхода, пока у меня работает эта камера. Я очень застрял, любая помощь будет принята с благодарностью!

Answer 1

Вместо того, чтобы использовать

intersects[0].object.position 

попробуйте использовать

intersects[0].point

.point мировая космическая позиция удара.

.objectэто объект, к которому принадлежит треугольник. .object.position это просто происхождение этого объекта, в данном случае система частиц. Сами положения частиц относительно этого происхождения.