Jump to content

Sample code for features in babylonEditor

Varsha Kamble

Recommended Posts


Can anyone provide some sample examples for features provided in Babylon Editor?


I am trying to implement rotation, transition and scaling feature as given in editor. But I am not able to find any sample examples or APIs for doing so.


I a link while searching for the same. 


If I am not wrong, this class helps to do the required features. Please help me in understanding how to include it in the application and use it.

I searched for if any npm package is available for this. But I didn't find anything.

Please suggest for the same.





Link to comment
Share on other sites

  • 1 month later...
On 5/24/2018 at 8:04 PM, Deltakosh said:

Hello Varsha!

We are currently working on officially supporting gizmos (manipulators) in 3.3: https://github.com/BabylonJS/Babylon.js/issues/4141

We should be good in a week or two :)

Hi @Deltakosh,


Any updates on the same?

I checked for adding this dependency , but didn't find any.
Can you please provide some link or so for doing the same.






Link to comment
Share on other sites

@Varsha Kamble I see, you would like the default look to be more inline with the editor? I can try to adjust the look to be more inline with the editor (is this design http://playground.babylonjs.com/#7KX2R8#136 ok? It still doesn't have lighting like in the editor but I've been told by other lighting is not an ideal default). If you want to tweak all of this manually you can add your own logic for hover as specified here http://playground.babylonjs.com/#7KX2R8#134, when used with setCustomMesh you can make the appearance of the mesh look however you would like.

@brianzinn This can also be done using the custom mesh depending on how you position the custom gizmo relative to the origin http://playground.babylonjs.com/#7KX2R8#135

Link to comment
Share on other sites

@Dad72 Can you expand on more common design and its less complicated to set up or use?

For common design are you talking about the appearance?

For complications setting it up. the gizmo manager (https://www.babylonjs-playground.com/#4TBMBR) aims to help make it less complicated to use, is there something it does/doesn't do that can be improved? 


Link to comment
Share on other sites

@Trevordev. Yes, I was talking about appearance.  I thought that gizmo would look more like something that brings you closer to what you can see in software.

1303682201_2018-07-1712_19_36-Greenshot.jpg.96dcbe1e64995964c47d312eb9387bd6.jpg 2007976497_2018-07-1712_20_01-Greenshot.jpg.e356464d3a8cde22a38beaa1619c2f8b.jpg 1262336660_2018-07-1712_20_04-Greenshot.jpg.af05aba1ea669fe66a8ff51622eca804.jpg


For simplicity, I create them this way :

// Init manipulator (mesh attached, camera, canvas, options)
this.manipulator = new Manipulator(mesh, scene.activeCamera, canvas, {scale: 0.75});
// Local or work manipulator

//Tranforme position
//Or Tranforme rotation
//Or Tranforme scalign

// For close manipulator

I have recreated a class of the version of Satguru that you can find here:

Class Manipulator (Appearance as from the line 1251)

The API here :


Link to comment
Share on other sites

@Dad72 Thanks for the feedback.

I updated the default gizmo look to have thin lines like the visuals you provided. (See gizmo playground once this PR is merged, @Varsha Kamble let me know if this still doesn't suit your liking.)

As for code, the gizmo manager is aimed to be very similar to that library, but provide additional support for things like bounding box gizmo, customization and webVR support. Is there anything in the following that should be changed?

// Init manipulator, by default any mesh you click on will get attached
var gizmoManager = new BABYLON.GizmoManager(scene);

// To avoid automatic pointer attaching and manually attach/detach
gizmoManager.usePointerToAttachGizmos = false;
gizmoManager.attachToMesh(mesh); // attach
gizmoManager.attachToMesh(null); // detach

// Enable/disable gizmos, all gizmos are on their own layer and will not modify the existing scene (eg. scene.meshes)
gizmoManager.positionGizmoEnabled = true;

// By default gizmo's will be rotated to the world but to have gizmos rotate in local space set the following
gizmoManager.gizmos.positionGizmo.updateGizmoRotationToMatchAttachedMesh = true;

// Comes with bounding box gizmo if needed and supports webVR
gizmoManager.boundingBoxGizmoEnabled = true;

// Dispose


Link to comment
Share on other sites

Yes the appearance is much better like that.

For the code to use, can be a question of current usage habit.

[edit] Snap mode does not seem to work with the 3 axes (why could not this work also with the 3 axes?)  :  https://www.babylonjs-playground.com/#31M2AP#21

I find it regrettable that the rotation is with rotationQuaternion not not the possibilities to define euler. it was for me a preference to use euler, because I block quaternions on my meshes with mesh.rotationQuaternions = null; because I have to do it like that on my characters to control them more easily. And I recover in an editor the data euler and not quaternion.

We can add layerMask to the gizmo ? because I have scene that uses it and suddenly it could be useful. In the case of using multi window to make a minimap, I would not want the gizmos to be displayed in the minimap, so LayerMask is useful for that. 

It would also be interesting if you could add to gizmos the ability to move multiple axes at the same time for position and scale. For example by adding a small cube in the center of the gizmo as can be seen on the images of examples. This can be very useful for resize the 3 axes at the same time or move 3 positions by selecting this center

Thank you


Link to comment
Share on other sites

Hi @trevordev,


Thanks, this is what i wanted ?. Its looking better now.

I tried your playground and updated it to check attachToMesh. Its working perfectly. But, when i tried same with my code its throwing me following error.


Currently i am using following npm version of babylon.


"babylonjs": "3.3.0-alpha.11"


Following is my code block for the same :



this.gizmoManager = new BABYLON.GizmoManager(this._scene);
  this.gizmoManager.usePointerToAttachGizmos = false;

createAxisOp(currentMesh) {
        this.gizmoManager.positionGizmoEnabled = false;
        this.gizmoManager.rotationGizmoEnabled = false;
        this.gizmoManager.scaleGizmoEnabled = false;
        this.gizmoManager.positionGizmoEnabled = true;



Function createAxisOp is getting called on click of mesh, and currentMesh is the clicked mesh. I want to restrict some of the meshes to have gizmo on click. So i am passing only required meshes here.

Please help with this.




Varsha Kamble

Link to comment
Share on other sites

alpha.11 is a version behind already and alpha.12 was published 6 days ago.  The changes from @trevordev were likely made well after that - based on this thread. You can see NPM versions and publish dates here:

If you want nighly or newer builds you can get them from github:
https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release

Then just copy those into your node_modules folder manually, or otherwise you can always build the whole repo yourself with gulp :)

Link to comment
Share on other sites

Hi @trevordev Amazing work! Thanks.

3D model scaling, rotation and translation is looking cool. Looks like currently model can scale in any one direction that is either X or Y or Z.

Can you do little enhancement in the scaling feature where model can scale in all the 3 axis at a time so that aspect ratio of model will be preserved while scaling up and down. I am attaching video regarding the same for your reference. When I drag on the inner triangle while in scaling mode, it scales complete model in all the 3 directions.

Link to comment
Share on other sites

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