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

**URL:** <https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607>\
**Category:** Questions\
**Tags:** camera-controls, animation\
**Created:** [March 18, 2020, 10:16pm UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607 "2020-03-18T22:16:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lunch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lunch/32/4127_2.png) [@lunch](https://discourse.threejs.org/u/lunch)\
**Post date:** [March 18, 2020, 10:16pm UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607/1 "2020-03-18T22:16:33Z")

</div>

Hey all!

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

> <https://gfycat.com/rightqueasyfallowdeer>

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:

> <https://gfycat.com/sparsedecisiveanemoneshrimp>

Appreciate any help!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 19, 2020, 6:42am UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607/2 "2020-03-19T06:42:13Z")

</div>

Hi!  
Maybe something like that:

```auto
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 );

```

---

<div class="post-metadata">

**Author:** ![lunch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lunch/32/4127_2.png) [@lunch](https://discourse.threejs.org/u/lunch)\
**Post date:** [March 19, 2020, 4:31pm UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607/3 "2020-03-19T16:31:49Z")

</div>

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

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);

```

https://codepen.io/bitzilla/embed/preview/ExjpPbJ?height=300&slug-hash=ExjpPbJ&default-tabs=js,result&host=https://codepen.io

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 19, 2020, 8:31pm UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607/4 "2020-03-19T20:31:20Z")

</div>

Try this:

```auto
            /*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);

```

https://codepen.io/prisoner849/embed/preview/oNXMLVV?height=300&slug-hash=oNXMLVV&default-tabs=js,result&host=https://codepen.io  
line 584

---

<div class="post-metadata">

**Author:** ![lunch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lunch/32/4127_2.png) [@lunch](https://discourse.threejs.org/u/lunch)\
**Post date:** [March 19, 2020, 8:42pm UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607/5 "2020-03-19T20:42:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 19, 2020, 8:44pm UTC](https://discourse.threejs.org/t/how-to-put-extra-distance-between-target-and-camera-while-retaining-control-target-vector-camera-animation/13607/6 "2020-03-19T20:44:14Z")

</div>

You’re welcome 🙂 🍻