How to put extra distance between target and camera while retaining control target vector? (camera animation)

Questions
,
1

Hey all!

To show you the issue I’m dealing with, please look at the following video:

First things first, the controls (trackballcontrols) always has a target of the middle of the cube, rather than targeting the clicked nodes themselves. Ultimately, I always want the camera to be pointed at the center of the cube.

controls.target = CENTER_VECTOR

You can see when I click on a node, the camera animates to the node vector while keeping a lock on to the center of the cube. However, because the camera animation finishes at the same coordinates as the object itself, it is not within the cameras view. If I zoom out just slightly, the selected node comes into view and is centered as expected.

I’d like for the animation to finish so that it has the object in view. I’ve already searched some camera distance stuff on here and have played around with some things, but am unable to get it to work. Perhaps it’s because I’m trying to do this while animating that’s making it more difficult.

Here’s an example of how it should work, but for any node. The reason it works in this example is because these nodes are near the center of the cube, and the controls.minDistance is keeping the camera from getting any closer to the center:

Appreciate any help!

2 Likes
2

Hi!
Maybe something like that:

var point = some_vector3;
var desiredDist = some_float; // desired distance between camera and point

var targetDist = new THREE.Vector3().copy( point ).setLength( desiredDist );

var destination = new THREE.Vector3().addVectors( point, targetDist );
2 Likes
3

Hello again, @prisoner849! Thank you for looking into this :slight_smile:

I implemented your idea, and it doesn’t seem to be doing what’s intended. I actually put the code up on codepen so you could take a better look at what’s going on. The code is a bit of a mess right now, but the area in question to look at is around Lines 1266 to 1300. This is where the onClick event happens, and where the animation function would take place. Anyways, you can see that I’ve put in your idea:

    point = new THREE.Vector3(newX, newY, newZ);
    targetDistance = new THREE.Vector3().copy(point).setLength(desiredDistance);
    destination = new THREE.Vector3().addVectors(point, targetDistance);

The camera still animates, but it seems shifted off instead of being centered with the selected node.

4

Try this:

            /*newX = node.geometry.attributes.translateEnd.array[node.hover * 3] * PLOT_RADIUS * 2;
            newY = node.geometry.attributes.translateEnd.array[node.hover * 3 + 1] * PLOT_RADIUS * 2;
            newZ = node.geometry.attributes.translateEnd.array[node.hover * 3 + 2] * PLOT_RADIUS * 2;*/
            

            point = new THREE.Vector3().fromBufferAttribute(node.geometry.attributes.translateEnd, node.hover).multiplyScalar(PLOT_RADIUS * 2);
            point.sub(CENTER_VECTOR);
            targetDistance = new THREE.Vector3().copy(point).setLength(desiredDistance);
            destination = new THREE.Vector3().addVectors(point, targetDistance).add(CENTER_VECTOR);


line 584

3 Likes
5

@prisoner849 You have been so helpful so many times! Thank you so much! :grin:

1 Like
6

You’re welcome :slight_smile: :beers: