Both side line Arrow

Questions
1

Hello sir,
Hope you are doing good!

I need both side arrow in three js.

I have used this code.

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

2

Hello sir,

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

2 Likes
3

Add this

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

Hi Pailhead.

I have added your code, Its working.

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

Thanks.

5

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

Thanks.

6

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

7

I think he mutated his origin.

8

Thanks Prisoner
Your code is working.

thanks.

9

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.

1 Like
10

Hi pailhead,

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

Thanks for suggestion.

thanks.

11

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

12

Have a look at this SO thread.

13

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

thanks.

14
  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 and link2).

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

15

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

1 Like
16

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