Sample code for features in babylonEditor

[Varsha Kamble]

Hi,

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

http://editor.babylonjs.com/

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. 

https://github.com/BabylonJS/Extensions/tree/master/ManipulationHelpers

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.

Thanks.

 

Regards,

Varsha

[Guest]

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

[satguru]

@Varsha Kamble in the meantime you could use this  https://github.com/ssatguru/BabylonJS-EditControl  ?

[Varsha Kamble]

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.

Thanks.

 

Regards,

Varsha

 

[Dad72]

Doc here.

http://doc.babylonjs.com/how_to/gizmo

API :

http://doc.babylonjs.com/api/classes/babylon.gizmo

The gizmos are on version 3.3 of Babylon

[Varsha Kamble]

Thanks @Dad72,

 

It helped very well ?.

Is there any way to modify the  arrows or width of axis drawn using this Gizmo control? Its bit large in width. Also the arrows and boxes for transition and scaling are not that crisp as they are in babylonJs Editor.

Thanks.

 

Regards,

Varsha

[Dad72]

I have not tried gizmos yet, so I do not know. But I understand that the gizmo was customizable, but I see nothing in the doc of this side.
Maybe its author will be more able to help you. @Trevordev

[Varsha Kamble]

Hi @trevordev,

 

Can you please help me with this?

[trevordev]

@Varsha Kamble Hey sorry for the delay, this is not working at the moment but I'll get a pull request out to support this today.

[trevordev]

@Varsha Kamble I created a PR here: https://github.com/BabylonJS/Babylon.js/pull/4755 after this is merged and the next nightly build runs this playground should work http://playground.babylonjs.com#7KX2R8#132 which shows how to customize the gizmos.

[brianzinn]

Great PR.  The BABYLON.PositionGizmo() is really great.  I think it's the zGizmo (blue) in your demo - it gets blocked easily.  Can it have handles on both sides or be able to choose a camera/point to face?

[Varsha Kamble]

Hi @trevordev

Thanks for the updates ?.

Given playground has colored shapes(blocks) for gizmo actions.
Can we have the controls same as current Gizmo with options for color or size change(as they are in babylonjs editor)?
Thanks.

Regards,
Varsha

[Dad72]

For my part, I will continue to use the gizmo EditControl by Satguru, they have a more common desing and its less complicated to set up or use.

[NasimiAsl]

any link you have @Dad72

[Dad72]

GIT: https://github.com/ssatguru/BabylonJS-EditControl

Demo : https://ssatguru.github.io/BabylonJS-EditControl/demo?stable

[trevordev]

@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

[trevordev]

@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? 

Thanks

[Varsha Kamble]

Hi @trevordev,

Quote

 http://playground.babylonjs.com/#7KX2R8#136

 

If i get something like this , it would be great for me. This will for rotation and scaling as well, right?

Thanks.

 

Regards,

Varsha

[Dad72]

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

  

 

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
this.manipulator.setLocal(false);

//Tranforme position
this.manipulator.enableTranslation();
//Or Tranforme rotation
this.manipulator.enableRotation();
//Or Tranforme scalign
this.manipulator.enableScaling();

// For close manipulator
this.manipulator.detach();

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 :

API

[trevordev]

@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
gizmoManager.dispose();

 

[Dad72]

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

 

[brianzinn]

1 hour ago, Dad72 said:

How do you use Snap mode too?

Looks to be only for single axis gizmos.  Here is a PG:
https://www.babylonjs-playground.com/#31M2AP#20

[Varsha Kamble]

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.

Quote

"babylonjs": "3.3.0-alpha.11"

 

Following is my code block for the same :
 

Quote

 

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.attachToMesh(currentMesh);
        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.

Thanks.

 

Regards,

Varsha Kamble

[brianzinn]

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:
https://www.npmjs.com/package/babylonjs

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

[Ravi]

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.