Gizmo can not attach to mesh correctly when I use setCustomMesh func

Questions
1

Hi guys, I just ran into a problem that I could not understand.
Im using an AxisDragGizmo, but I want to use my custom mesh.
So I build a 2-D mesh using some vertices and indexes, it just looks like an arrow but its 2-D in space, then I build a 3-D sphere for it to attach.
The positions of vertices are checked to be no problem, and it appears where it should be when I do not set it to be the CustomMesh of my axisdragGizmo (e.g when it is rendered in my main scene).
The problem appears when I try to use setCustomMesh(2DArrow), the position of my 2D arrow suddenly changed to some scaled position (like 2*x,y,z), but the position of vertices do not change, and 2DMesh.position is still (0,0,0).
So I wonder why setCustomMesh could change the position of my 2DMesh? is it just because the difference between main Scene and utilitylayerScene? How can I fix this?

problem
problem1160Ɨ640 8.39 KB

2

some quick discovery
when I change gizmo.scaleRatio, the position of my custom mesh changes
I found it that when gizmo.scaleRatio goes toward 0 , the position difference between attached sphere and my 2D arrow shrinks, when it goes positive increase or negative decrease from 0 , the position difference grows.
However the smaller scaleRatio is, the smaller my mesh is, which means i have to build a super big arrow that does not make sence, thought it looks right.
So any suggestions?

3

@Cedric is the Gizmo king

4

Hi @Richardo and welcome to the forum!

Can you share a playground? Itā€™s way easier to understand with some code.

5

thanks for adviceļ¼I would try to pick up that part of the code from my big big project to playground. though It may take some time and I could not promise that the same problem would show up again

1 Like
6

Hi @Cedric , I did a very quick example below as well as my playground.html.
Iā€™ve noticed that the problem may be caused by the change of definition of origin.
When I build my customMesh and set its position, I set the position in global world coordinates.
However the real situation is that customMesh of gizmo always use the coordinates system
which is the same with the attachedMeshā€™s.
Am I understanding it right this time? In the example I set the cylinder(myCustomMesh) to
(0,0,0), I hope it could appear in the center of the world. However it appears in the center of the attached ball.

var createScene = function() {

// Create scene

var scene = new BABYLON.Scene(engine);

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 100}, scene);("sphere", {radius:0.2, flat:true, subdivisions: 1}, this.scene);

sphere.material = new BABYLON.StandardMaterial("sphere material",scene)

sphere.position = new BABYLON.Vector3(0,50,50);

var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -0.5, 1.0), scene);

light.position = new BABYLON.Vector3(0, 5, -2);

var camera = new BABYLON.ArcRotateCamera("camera1",

0,1.57,300, new BABYLON.Vector3(0, 0, 0), scene,true);

// Position

var layer = new BABYLON.UtilityLayerRenderer(scene)

var gizmo = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0,1,0), BABYLON.Color3.FromHexString("#00b894"),layer)

gizmo.attachedMesh = sphere

// Create custom mesh

  var thickness = 1;

  var color = BABYLON.Color3.Green();

  var material = new BABYLON.StandardMaterial("", scene);

  material.diffuseColor = color;

  material.specularColor = color.subtract(new BABYLON.Color3(0.1, 0.1, 0.1));

  var cylinder = BABYLON.CylinderBuilder.CreateCylinder("cylinder", 

  { diameterTop: 0, height: 0.075, diameterBottom: 0.0375 * (1 + (thickness - 1) / 4), tessellation: 96 }, gizmo.gizmoLayer.utilityLayerScene);

  // Position arrow pointing in its drag axis

  cylinder.material = material;

  cylinder.position = new BABYLON.Vector3(0,0,0);

  //cylinder.scaling = .1

gizmo.setCustomMesh(cylinder)

return scene;

};

7

In your example, the cylinder origin is in the middle of the mesh.
When set with setCustomMesh, the mesh is moved so its local becomes the world origin of the gizmo. and the origin of the gizmo is the world origin of the mesh.
If you want to move the cylinder locally, I would suggest to translate the cylinder (using .position) and then baking vertices

Itā€™s all about relative position one to the other. Hope it helps :slight_smile:

1 Like
8

Thanks, I would see what I can do with it these days.

1 Like
9

Problem solved.
Previously I calculated the position of my custom mesh to fit the position of my gizmo and its attached mesh, which turned out to be a redundant move. The coordinate system changed to the attached mesh ALREADY, so I just donā€™t need to do extra work to put my customMesh to the right position.

1 Like