How to retrieve the corresponding ribbon vertices while dragging the ribbon vertices with scaleGizmoEnabled on gizmo ?
Welcome aboard!
The vertices of a mesh can be retrieved with mesh.getVerticesData("position"), but when using a gizmo (scale, rotation or position) you don’t actually change the vertex positions, you only update the transformation matrix of the mesh. If you want the transformed vertices you will have to apply the transformation matrix to each vertex from mesh.getVerticesData("position").
Thank you for the response. The mentioned property is in Babylon.js and I’m looking for the same in react with Babylon.js, in which the mentioned property is not there. It is actually working when we change the position of the ribbon . In the case of dragging any of the vertex alone, while keeping all other in same position, coordinates couldn’t be retrieved. So, is there any alternative method or property to achieve the same.
https://codesandbox.io/s/codesandbox-react-jsx-forked-l0qu7y?file=/src/App.jsx
vectors = [
new Vector3(-0.3, 2, 0.3),
new Vector3(0.3, 2, 0.3),
new Vector3(0.3, 2, -0.3),
]; <ribbon
key={this.changeIndex}
name="main"
diffuceColor={new Color3(0, 0, 0)}
pathArray={[this.vectors]}
closeArray={true}
closePath={true}
>
<gizmoManager
boundingBoxGizmoEnabled={true}
>
</gizmoManager>
You can’t drag a single vertex with the gizmo manager.
Would you have an example which is working in the Playground, so that we can see how to make it work with React?
In the above Link the ribbon can drag and it creates a new vector values.
So how can I fetch the new vector value of the corresponding draggable ribbon (resized ribbon) in react-babylonjs?
And also how can I show the boundingBoxGizmo as per the vertexes count?
In this image there is 3 vectors but, boundingBoxGizmo property has showing more than 3 points
I think there’s a misunderstanding of what the gizmo is doing.
It does not let you modify the vertices of a mesh, only the transformations of a mesh (position, rotation, scaling): in your PG, it’s the scaling property of the mesh which is modified when you move the handles of the gizmo.
We don’t have a visual tool in Babylon which lets you directly modify the vertices of a mesh, you will have to write your own. You can also do some searches in this forum in case someone already tackles this task.
1 Like
Thank you for responding. I agree with you if I modify the position of the ribbon when utilizing any of the gizmo’s properties. how to retrieve all the changed coordinates of a ribbon.
mesh.getVerticesData(“position”) This property is not available in ribbon (React BaybonJs). Can you recommend any alternative instead of this?
I don’t know React, maybe @brianzinn will be able to help.
1 Like
Since you have set property of boundingBoxGizmoEnabled on the GizmoManager then I don’t see any easy way to get the observable event (onScaleBoxDragObservable): BoundingBoxGizmo | Babylon.js Documentation
That looks to be best way to get notified of scaling changes.
What is the imperative way @Evgeni_Popov? You have a gizmo manager only and want to be notified when scaling changes?
Also, I don’t think here that you want “getVerticesData” as they would not change with scaling AFAIK. Although that is easy to update with a ref (useRef):
https://brianzinn.github.io/react-babylonjs/examples/basic/custom-mesh
1 Like
here is declarative way with individual BoundingBoxGizmos:
codesandbox-react-tsx (forked) - CodeSandbox
You will have to get the vertices by using mesh.getVerticesData("position") and then transform them by applying the world matrix of the mesh to get the final vertex positions.
Thank you for responding.@ brianzinn In this scenario, only the dragged coordinates value is returned. How to find other coordinate values.
It’s not a coordinate value being returned/logged, but the scaling. That will affect all the coordinates accordingly, if you want new position data.