# Move vector3 along normal (vector math help)

**URL:** <https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305>\
**Category:** Questions\
**Tags:** math\
**Created:** [October 17, 2019, 3:18pm UTC](https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305 "2019-10-17T15:18:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryki](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ryki/32/4710_2.png) [@ryki](https://discourse.threejs.org/u/ryki)\
**Post date:** [October 17, 2019, 3:18pm UTC](https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305/1 "2019-10-17T15:18:52Z")

</div>

I was hoping someone could help me out with some vector math in three.js

Say I had 3 Vector3 points, A, B, C, which form a plane called ABC.  
I would like to move point B by 10 units, along a vector that is perpendicular to the vector AC, and sits on the plane ABC.

How would I go about doing that in three?

 ![05%20am](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/ae7a9b7f864d33e4b831084a6f107229609fe0e4.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 17, 2019, 3:32pm UTC](https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305/2 "2019-10-17T15:32:57Z")

</div>

How about projecting `B` on the line segment `AC` and then compute a direction vector from the projected point to B. Something like this:

```auto
const A = new THREE.Vector3( 1, 0, 0 );
const B = new THREE.Vector3( 0, 1, 0 );
const C = new THREE.Vector3( - 1, 0, 0 );

const B_ON_AC = new THREE.Vector3();
const direction = new THREE.Vector3();

const lineSegment = new THREE.Line3( A, C );
lineSegment.closestPointToPoint( B, true, B_ON_AC );

direction.subVectors( B, B_ON_AC ).normalize();
B.add( direction.multiplyScalar( 10 ) );

```

Live demo: [https://jsfiddle.net/0eb21kvs/](https://jsfiddle.net/0eb21kvs/)

---

<div class="post-metadata">

**Author:** ![ryki](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ryki/32/4710_2.png) [@ryki](https://discourse.threejs.org/u/ryki)\
**Post date:** [October 17, 2019, 3:38pm UTC](https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305/3 "2019-10-17T15:38:45Z")

</div>

As far as I can tell that does the trick! Thanks!

---

<div class="post-metadata">

**Author:** ![ryki](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ryki/32/4710_2.png) [@ryki](https://discourse.threejs.org/u/ryki)\
**Post date:** [October 17, 2019, 4:50pm UTC](https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305/4 "2019-10-17T16:50:34Z")

</div>

Unfortunately it doesn’t appear to work with the following example

```auto
const A = new THREE.Vector3( 100, -149, 0 );
const B = new THREE.Vector3( 100, -148, 0 );
const C = new THREE.Vector3( 100, -146, 0 );

```

returns

```auto
{x: 100, y: -148, z: 0}

```

I would expect x to be `90` or `110`

* * *

Looks like it’s because you can’t form a plane when everything aligns. I suppose maybe I could hack something together there by temporarily moving the middle point.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [October 19, 2019, 5:43am UTC](https://discourse.threejs.org/t/move-vector3-along-normal-vector-math-help/10305/5 "2019-10-19T05:43:31Z")

</div>

> [@ryki](#):
>
> Unfortunately it doesn’t appear to work with the following example

The problem is that’s a degenerate triangle - all points are on the same line.

> **[triangle (100, -149, 0), (100, -148, 0),(100, -146, 0) - Wolfram|Alpha](https://www.wolframalpha.com/input/?i=%2Btriangle%2B%28100%2C%2B-149%2C%2B0%29%2C%2B%28100%2C%2B-148%2C%2B0%29%2C%28100%2C%2B-146%2C%2B0%29)**
>
> Wolfram|Alpha brings expert-level knowledge and capabilities to the broadest possible range of people—spanning all professions and education levels.

> I suppose maybe I could hack something together there by temporarily moving the middle point.

You could subtract a tiny value from A.x and B.x:

```js
const eps = 0.0000000000001;

if( degenerate ) {
    A.x = A.x - epsilon;
    B.x = B.x - epsilon;
}

```

Then your answer will be (89.9999999999999, -148, 0).

However, you have to make choices: + or - eps, and which axis (`x` or `z` in this case) to subtract from.