But I’ve searched the internet and I can’t find an initial boilerplate that shows me this in React, preferably with TypeScript.
Could anyone provide an initial example?
The gizmo needs a deferred creation to make sure the UtilityLayerRenderer is ready (like ShadowGenerators that need a light source), but otherwise looks like not too much to add. For the sphere you maybe want another declarative way, such as assignTo='attachedMesh' (that is already available on all host elements).
If you aren’t using react-babylonjs then just an imperative way. If you are using babylonjs-hook there is also a useScene hook where you can at least bring in the Scene and imperatively add the playground code. It’s only with a reconciler that you can get a ref (useRef) for attachedMesh, though.
edit: I would maybe prefer the declaration to have the <positionGizmo ..> as a child of the mesh. Anyway, will wait to see what libraries you are using, if any.
Yes @msDestiny14 the way React handles things is different. The documentation is pretty complete when it comes to pure JavaScript, but when working with React it doesn’t have documentation support, hence the question.
I understand, but how would this behave in my scenario. I believe I have to make a reference to the scene, but I still can’t develop it. Do I have to have the meshes inside the positionGizmo that is inside the utilityLayerRenderer and that would all have to be inside the scene?
I would like a way that would allow me to add and remove meshes in the scene and these meshes when clicking would bring up the Gizmo. So would each mesh have its own Gizmo or would one have a global Gizmo in the scene that meshes would be added inside? I’m still not sure how things work.
So, the new custom property is shadowCastChildren, which you can use instead of passing in mesh names:
shadowCasters={["box1", "caixa"]}
Since the position Gizmo should only apply to one mesh and also that you would want multiple Gizmos was why I then suggested that the Gizmo be a child component of the mesh. That would lead to a cleaner solution I think.
If you want to just have the position gizmo then on specific meshes then you would need a way to store that state (like onClick or something). Then you would have something like this:
Thanks for letting me know about the shadows feature, it will be very welcome when you can update.
But back to Gizmo, it could give a more concrete example. If it’s not asking too much for a basic functional playground to help me get started.
I should have something tomorrow. It looks like the utilityLayer is an optional constructor property and it can be set afterwards. I’m going to add a property/ies to instruct the gizmo if it should attach to a mesh (default) or node. Then that example above should work. I have a couple of other things to work out, since there are a lot of different gizmos.
I just published 3.0.20, which also has the declarative shadow casting from above. Appreciate any feedback. If you want to attach to a node instead of a mesh then I will need to add additional custom properties to Gizmo. Maybe attachToMesh or attachToNode to make that option declarative.
thinEngine.js:1609 Uncaught TypeError: Cannot set property 'active' of undefined
at Engine.push.../node_modules/@babylonjs/core/Engines/thinEngine.js.ThinEngine.disableAttributeByIndex (thinEngine.js:1609)
at Engine.push.../node_modules/@babylonjs/core/Engines/thinEngine.js.ThinEngine.unbindAllAttributes (thinEngine.js:3238)
at Engine.push.../node_modules/@babylonjs/core/Engines/thinEngine.js.ThinEngine.wipeCaches (thinEngine.js:2293)
at Scene.push.../node_modules/@babylonjs/core/scene.js.Scene.dispose (scene.js:3718)
at UtilityLayerRenderer.push.../node_modules/@babylonjs/core/Rendering/utilityLayerRenderer.js.UtilityLayerRenderer.dispose (utilityLayerRenderer.js:286)
I’ll try to take a look tomorrow, but it looks like the order I am disposing perhaps is causing that error.
Great solution. I updated the version and it is working. I haven’t tested the shadow features yet, but I trust your dedication.
I’ll keep an eye on the bug fix update mentioned above, for me it hasn’t appeared yet.
Thanks again.
One thing I noticed is that it behaves strangely when I change the mesh’s pivot. My mesh has the pivot shifted to the lower left corner. I know that working with transformations can be complicated, but in my case it’s necessary. In a door opening, for example, it would be difficult to turn with the pivot in the center.
Is it possible to get around this problem?
See how I’m shifting the pivot:
hi, sorry I didn’t catch that you had a follow up question. can you post a new question? if it has a playground instead of React that is best. I suspect it is something in the Gizmo itself.