North arrow web dialog implementation


Hi! I am developing an extension for which I require to show a North pointing arrow/compass arrow in a web dialog . The arrow should always be pointing in line with the green axis, and spins as we orbit around the model… I looked around for a sample implementation but could find much.
Does anyone have any idea, how I could implement this?

Thanks a lot for any response.


If it really needs to be in a webdialog (instead of drawing to the SketchUp view port), an image of an arrow with CSS transform: rotate(10deg); (and -ms-transform for IE9 could be enough. You will need the angle of the axis how it appears projected on the screen:
view.screen_coords(ORIGIN).vector_to( view.screen_coords(ORIGIN+Y_AXIS) )
Or you use an SVG image and modify the SVG elements by script. Notice that simple 3d graphics can be completely replicated with 2d vector graphics (if they don’t have occlusion, like lines but no faces).


@Aerilius You are awesome man! Thanks