Editor's gizmos inside an application


is there a way to use the editor’s gizmos (rotate, translate, scale) in an application (at run-time)?

I am building an authoring tool with PlayCanvas and it would be great to use the editor’s gizmos instead of replicating the same features in my application.


1 Like


The editor gizmos are pretty much implemented in the Editor using a mix of various utility methods from the Editor’s codebase and the PlayCanvas engine. So you can’t just enable them at runtime, you have to create them yourself or maybe a simpler version of them.

General way they work is you have a bunch of models for each axis / arrow and you also have some invisible models around these for picking. So when the user clicks or moves the mouse you pick Entities and if the Entity picked was a gizmo entity you select that axis etc…

Here’s a tutorial on picking https://developer.playcanvas.com/en/tutorials/entity-picking/

Maybe yo are right, but what about this post:


It totally looks like it is possible.

Something like
editor.call(‘gizmo:translate:toggle’, true);

Although it does not work in my application…

You won’t be able to access the editor API from the application. The editor code is separate from the PlayCanvas engine and therefore none accessible if you are just running the application.

That post you linked is about using the editor API when the user is using the editor.

Well, that’s not exactly true.

If I write in my code

list = editor.call(‘assets:list’);

that code works in my application.

Correct me if I am wrong but that it is part of the editor API, isn’t it?
So, I am sure that I might be able to access the editor gizmos.
In fact, if you read the post

the list of editor hooks include:

gizmo:collision:visible (state)
gizmo:coordSystem (system)
gizmo:point:create (axis, position, dir)
gizmo:point:recycle (point)
gizmo:rotate:position (x, y, z)
gizmo:rotate:rotation (pitch, yaw, roll)
gizmo:rotate:toggle (state)
gizmo:rotate:visible (state)
gizmo:scale:position (x, y, z)
gizmo:scale:rotation (pitch, yaw, roll)
gizmo:scale:toggle (state)
gizmo:scale:visible (state)
gizmo:snap (state)
gizmo:translate:position (x, y, z)
gizmo:translate:rotation (pitch, yaw, roll)
gizmo:translate:toggle (state)
gizmo:translate:visible (state)
gizmo:type (type)
gizmo:zone:visible (state)

The problem is that, for some reason these hooks are not available in my application.

However, I have several others that I can use, but not the 333 methods that are claimed in the post. In fact I can only count 43!!!

Is there anyone with inner knowledge about the editor who can answer this with certainty?
Thanks in advance.
It would be of great help for me…

When you launch the application from the editor, there are editor hooks in place to do live tweaking in the editor (such as moving thing as about, changing attribute values etc).

When the application is published, those hooks aren’t there as the editor is not part of the engine.

The launch page has a similar API as the Editor. It doesn’t contain all the methods from the Editor. Gizmos are not included in the launch page.

1 Like