Issue on converting Mouse click pick result and textinput field code from Babylon to React

Hi,
I written the function to pickup the x,y,z points from gameoject in Babylon, its working fine and i could could get the world coordiantes from that.

Similarly i have created the Input text field in babylon and through the event function i am reading the text what user typing in.

Here is the code for getting an points from model:

scene.onPointerUp = function (event, pickResult){

        if(event.button == 2)
        {
            console.log('(' + pickResult.pickedPoint.x + ',' + pickResult.pickedPoint.y +',' + pickResult.pickedPoint.z +')');
            
        }
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(box);       
input.onTextChangedObservable.add(e => {
        input.text = e.text;
        meshobj.label = e.text;
        console.log("Typed Text  "+input.text);
    });

I try convert this code to React but didnt find much help on documentation or other forum as well ,
is there any way i can fix this issue?

hi @Siva_s,

we don’t officially support react, so we can’t really say what’s working or not working, but I am sure the community (and the team) would be able to help if you would explain what the actual issue is. You should probably set a react’s component state on click / change. But this is of course an uneducated answer.

I have added the code above, thats what exactly i need to change it to react.
Apart from that i have closed all.

Here is the code:

scene.onPointerUp = function (event, pickResult){

        if(event.button == 2)
        {
            console.log('(' + pickResult.pickedPoint.x + ',' + pickResult.pickedPoint.y +',' + pickResult.pickedPoint.z +')');
            
        }

Code 2:

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(box);       
input.onTextChangedObservable.add(e => {
        input.text = e.text;
        meshobj.label = e.text;
        console.log("Typed Text  "+input.text);
    });

What do you mean by converting the code to React ?

What would react do here ?

Maybe @brianzinn would have an idea ?

have you already integrated your project with React? If so, it looks like the main thing will be to get the references in React (or babylon) to communicate, since the input text changes the mesh label.

If you want to render the the pick result and text in babylon GUI input field to html (react), I think the cleanest way is to use a central state management library like redux or mobx. In the event listener code, you update the state that holds the pick result and text. React will react to the value changes in the central state.

Integration is already done, when i convert this part of code to react i got challenges , didnt find any functions regarding that

Sure i wil check this, is there any reference or examples available?

I am not aware of any example with babylon.js. For mobx integration with react, you can have a look React integration · MobX.

Have a look at this code:
source (github.com)

I would rewrite above equivalent source with hooks and an FC as that source code is circa 2018, but anyway here is the working demo of that source:
live demo

I would import useRef and use that to track object references to the meshes or from the meshPicked callback. That will work in any project even without react-babylonjs. If you are using babylonjs-hook NPM then there is a useScene hook.

edit: Here is maybe a better example - it uses FCs and hooks and persistent application state:
source (github.com)

1 Like

These same questions were cross posted as issues, so adding those solutions here in case some future person finds them useful. Both issues have screenshots and code sandboxes.

Capturing input text from GUI:
Input Text field for the UI - React Babylon JS · Issue #154 · brianzinn/react-babylonjs (github.com)

Capture clicked Vector3:
Get clicked point on the model - React Babylon JS · Issue #153 · brianzinn/react-babylonjs (github.com)

1 Like