Jump to content

Create a compass


Recommended Posts



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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.




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




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

Link to comment
Share on other sites

  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...