Create a compass

[Dad72]

Hello,

 

I am looking for idea to create a compass with its 2 images :

 

The needle of commpass :

The compass :

 

The needle is overlays on the compass.

the needle is fixed.

and the Compass move right or left depending on the global axes of the scene. Depending on where the camera look (axe x and z).

 

Does anyone have any ideas?

 

Thanks for the help.

[wagner]

First of all, I think that you need to translate the X to the size of the compass image... Maybe like that:

var xPercent = x / xMax;var compassOffset = xPercent * compassSize;

First you need to find the "percent" value of x, over the max value of x. In the real life we use angle, we have 360 grades.

Later you will get this percent to find the how is the proportional size of the compass image.

 

It's just a basic idea, and I hope that is helpful.

[Dad72]

Thanks, this is a track that I will test. Thanks for the ideas.

[Wingnut]

Hi everyone!

  I have been talking about compasses in a few other threads, but, seeing Dad72 started a new thread about compasses, I will talk here, some.

 

Dad72, your compass has few 'grads'.  Almost no tiny hash marks (but it has some little dots, which are indeed hash marks).  Your compass should be do-able with some dynamicTexture text on a rectangle groundPlane... sliding it left and right... based on a compass.update() in your registerBeforeRender.  (You know this already, of course).  You could also use uOffset to slide the texture laterally across a small rectangle (a texture-based idea).

 

Graduations - http://en.wikipedia.org/wiki/Graduation_%28instrument%29  I'll call them 'grads'... easier to type.

 

But SOME compasses, scales, and number lines... have MANY grads (graduations).  Little hash marks.

 

http://thumbs.dreamstime.com/x/compass-289770.jpg

 

And the kind of compass that I dream-about... is a radians/degrees compass... with markings like this...

 

http://3.bp.blogspot.com/-Zvl_H8WoTx8/UyDfuTajDxI/AAAAAAAAaEw/Trb0eU-aqtM/s1600/Degree-Radian_Conversion.png

 

Sometimes the "ruler" will need to be flat.  Sometimes the ruler will need to be on a circlePlane (like the above picture), sometimes it will need to be wrapped around the inside or outside of an uncapped cylinder, or around a circumference of a sphere (on any of three axis), etc etc.

 

But we now have the LINES mesh!

 

So, I have now modified the LINES mesh... to accept multiple 2-element arrays in its array-of-vectors.  Each sub-array inside the main array, has two vectors, a start and stop point of the line.  This is for making grad marks on rulers/scales (used in compasses).

 

No, I'm just joking.  I did not make any mods to LINES mesh. 

 

But, it seems to me, that making the 'scale' (ruler) for any compass or other measuring device... would best be done dynamically... generated with code.

 

CreateRuler(name, #ofGrads, elongatedGradOffset, circularOrNot, [more params], scene); 

 

This command would make an array of hashmarks/grads, all made of LINES mesh.  Yes, you would still need to label the ruler with text and maybe create yet another array of lines (to overlay the first one) that would make SOME lines fatter or a different color... but...  dynamic ruler/scale maker... just a possibility.

 

Taller (elongated) hash marks, or bold hash marks, are sometimes called 'major grads', and the shorter hash marks between them, are sometimes called 'minor grads'.  Use those terms if you wish, of course.

 

With a dynamic 'scale' maker... it can be easily adjusted via variables/params, and therefore it keeps us from having to spend many hours doing texture adjustments in paint programs.  *shrug*  Just thinkings.    Now, HOW MUCH scene load will a LINES-mesh-based ruler full of tight grads... cause?  Dunno.

 

Update:  Some early tests... http://www.babylonjs.com/playground/#DDIWJ  - with 48 linemesh (not too bad) and http://www.babylonjs.com/playground/#1NJLPC - with 288 linemesh (getting a little bog).

[Dad72]

Okay I got a do what I wanted by directly with the Jquery and move the position of the picture to the alpha rotation of the camera Rotary that I put in the render loop.

$("#BoussoleMov").css({"background-position": (cameraArcRotative.alpha - 26.05) * 20});