# Both side line Arrow

**URL:** <https://discourse.threejs.org/t/both-side-line-arrow/3490>\
**Category:** Questions\
**Tags:** helpers\
**Created:** [July 21, 2018, 9:12am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490 "2018-07-21T09:12:21Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 21, 2018, 9:12am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/1 "2018-07-21T09:12:21Z")

</div>

Hello sir,  
Hope you are doing good!

I need both side arrow in three js.

I have used this code.

```auto
var from = new THREE.Vector3(-1, -0.5, 0.55);
var to = new THREE.Vector3(-1, 0.5, 0.55);
var direction = to.clone().sub(from);
var length = direction.length();
console.log(direction.normalize());
var arrowHelper = new THREE.ArrowHelper(direction.normalize(), from, 1, 0xff0000);
scene.add(arrowHelper);

```

![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/8/8150fc659d3382d435941e5ccd667f2294440fd3.jpg)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [July 21, 2018, 9:24am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/2 "2018-07-21T09:24:10Z")

</div>

> Hello sir,

Please don’t assume gender of the reader when posting on public forums.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [July 21, 2018, 9:25am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/3 "2018-07-21T09:25:30Z")

</div>

Add this

```auto
direction = from.clone().sub(to);
arrowHelper.add(new THREE.ArrowHelper(direction.normalize(), from, 1, 0xff0000));

```

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 21, 2018, 12:26pm UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/4 "2018-07-21T12:26:18Z")

</div>

Hi Pailhead.

I have added your code, Its working.

Thanks for your support .I am very happy with your code and support.

Thanks.

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 22, 2018, 8:43am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/5 "2018-07-22T08:43:48Z")

</div>

Hi pailhead,

Can you give me one one solution.

I am creating horizontal arrow , but horizontal arrow is not create right.please help me.

I have used this code.

```
var dir = new THREE.Vector3(-1, 0.6, 1);
     
        var origin = new THREE.Vector3(-1, 0.6, 0);
       
        var hex = 0xFFFFFF;

        var arrowHelper33 = new THREE.ArrowHelper(dir.normalize(), origin, 1, hex);
        var arrowHelper44 = new THREE.ArrowHelper(origin.normalize(), dir, 1, 0xFFFFFF);
        scene.add(arrowHelper33,arrowHelper44); 

```

![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/6/685b8897ecf37ab166b8ccb42984f85c9f0f8381.jpg)

Thanks.

---

<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:** [July 22, 2018, 9:47am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/6 "2018-07-22T09:47:10Z")

</div>

Hi!  
Why not to use `.negate()` method of `THREE.Vector3()` to set opposite directions?

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [July 22, 2018, 10:40am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/7 "2018-07-22T10:40:49Z")

</div>

I think he mutated his origin.

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 23, 2018, 4:29am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/8 "2018-07-23T04:29:45Z")

</div>

Thanks Prisoner  
Your code is working.

thanks.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [July 23, 2018, 6:29am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/9 "2018-07-23T06:29:50Z")

</div>

If you don’t bother to comprehend what the code does, i’m afraid that this is very fragile. It may break as soon as you try to do something else. I would advise studying it, not just blindly copying it.

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 23, 2018, 6:59am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/10 "2018-07-23T06:59:49Z")

</div>

Hi pailhead,

I am new in three js library. I am also study and development the project in three js.

Thanks for suggestion.

thanks.

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 23, 2018, 7:09am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/11 "2018-07-23T07:09:32Z")

</div>

Hi Every One ,

I want to need this type of text and arrow please help me.

I have used the script for arrow section.this is right way ?

I need the text script.Please help me.

// Vertical Line  
var from = new THREE.Vector3(-1, 0.2, 0.6);  
var to = new THREE.Vector3(-1, 1, 0.6);

```
        var arrowHelper11 = new THREE.ArrowHelper(to.normalize(), from, 0.7, 0xFFFFFF, 0.15, 0.025);
        arrowHelper11.name = 'Vertical Line Up';
        var arrowHelper22 = new THREE.ArrowHelper(to.negate(), from, 0.7, 0xFFFFFF, 0.025, 0.01);
        arrowHelper22.name = 'Vertical Line Down';
        scene.add(arrowHelper11, arrowHelper22);

```

![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/a/a2afc3217fc16d0d2416db9b59c36cad32833f71.jpg)

---

<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:** [July 23, 2018, 7:21am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/12 "2018-07-23T07:21:41Z")

</div>

Have a look at this [SO thread](https://stackoverflow.com/q/25850654/4045502).

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 23, 2018, 7:57am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/13 "2018-07-23T07:57:26Z")

</div>

I need in to 3D view, because my canvas is render in 3D view.  
Please give the 3D view solution.

thanks.

---

<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:** [July 23, 2018, 8:36am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/14 "2018-07-23T08:36:57Z")

</div>

1. You can draw a text on a canvas and use the canvas as the source for `THREE.CanvasTexture()` object, which you can use in the `.map` parameter of a material for a mesh with `THREE.PlaneGeometry()` or `THREE.PlaneBufferGeometry()`.
2. You can use `THREE.TextGeometry()` or `THREE.TextBufferGeometry()`.
3. You can create your own symbols of numbers, like @hofk did in his projects ([link1](https://discourse.threejs.org/t/addon-produces-almost-infinite-many-time-varying-geometries-with-functions/262/19?u=prisoner849) and [link2](https://discourse.threejs.org/t/how-many-ways-to-load-a-font-in-three-js/2054/17?u=prisoner849)).

Take time to make some researches and studies to choose the most appropriate method. So far, you question is too broad to answer.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [July 23, 2018, 4:33pm UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/15 "2018-07-23T16:33:31Z")

</div>

Do you think you might need a line at 45 degrees? or at 30?

Will you only compare those degrees to the horizontal plane? Let us know all at once so you don’t have to learn anything and we can do all the work for you.

Or just give you `sandeepsJobsWorker.js`

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [July 24, 2018, 6:22am UTC](https://discourse.threejs.org/t/both-side-line-arrow/3490/16 "2018-07-24T06:22:58Z")

</div>

Hello Pailhead

Thanks for supporting.  
No need degree or angle indication.

Only need height and width indication of input filed.Please give the suggestion.

Thanks.

![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/8/81047d35c9116c411db43de7d5377cb0d3141e10.jpg)