Three.js - change camera POV on click

0
votes

Some project background:

I have a Sprite particle field that is randomly generated. The camera is located at position 0, 0, 0. The particle field is all around the camera. I'm using Raycaster to be able to select the particle that is clicked on and change it's color. Once clicked I would like the camera to focus on this particle. I'm also attempting to use Tween to glide the particle into view.

I've attempted several different methods and none of them work. They are described here:

  1. A traditional lookAt method that used Raycaster to pick up the intersect point from clicking.

    var raycaster = new THREE.Raycaster(); raycaster.setFromCamera(mouse, this.camera); var intersects = raycaster.intersectObjects( this.starfield.children ); this.camera.lookAt(intersects[0].object.position)

  2. A distanceTo method where the distance between the camera and the intersect coordinates is used to move the camera. This only moves the camera along the z plane. It wont actually change its 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));
  1. I calculated the angle of rotation for each X, Y, and Z axis via tan and cos equations. I then attempted to rotate the camera by those degrees. I even tried converting them to radians to see if that would make a difference with the rotation method. It didnt :(

I don't know what else to do. At this stage I'm completely open to a different approach as long as I get this camera working. I'm very stuck, any help would be greatly appreciated!

1
animationthree.jscameratween.js
What does intersects[0].object.position log? If you have THREE.Points its always going to get the same value. – pailhead
intersects[0].object.position is the point the mouse clicks on, it contains coordinates x, y, z – Marlene Flores
interesting, x,y,z sounds like it might be THREE.Vector3. If you write console.log(intersects[0].object.position) and run the code, what are the values of these coordinates, x,y and z? – pailhead
those coordinates are 0,0,0 – Marlene Flores
If you are using the same value as input, you can't expect to get different results. The particle system lives at 0,0,0, and the property you are asking for correctly reflects that. zoomPos will always log 0, because you're asking for the distance to and from the same point. – pailhead

1 Answers

1
votes

Instead of using

intersects[0].object.position

try using

intersects[0].point

.point is the world space position of the hit.

.objectis the object the triangle belongs to. .object.position is just the origin of that object, in this case the particle system. The particle positions themselves are relative to this origin.