Using state with React and Babylon!

Questions
1

Hello !
I’ve been trying for 2 days to retrieve values from my database in an array, which I succeeded in doing, however I’m trying to display this on a sphere that I create in a loop, however my function returns the correct data, but does not create a new scene with the following parameters

    scene.onPointerObservable.add( async (eventData) => {
      
      let mesh = eventData.pickInfo.pickedMesh;
      if (mesh) {
        
          if (animationsActive) { moveToMesh(mesh, scene); }
          clearMeshes();
          testingdebug(`${mesh.name}`);
          var skybox2 = BABYLON.Mesh.CreateBox("skyBox", 7000.0, scene);
          var skybox2Material = new BABYLON.StandardMaterial("skyBox", scene);
          skybox2Material.backFaceCulling = false;
          skybox2Material.reflectionTexture = new BABYLON.Texture("https://i.imgur.com/qno5FRE.png", scene, true);
          skybox2Material.reflectionTexture.coordinatesMode = BABYLON.Texture.FIXED_EQUIRECTANGULAR_MODE;
          skybox2Material.disableLighting = true;
          skybox2.material = skybox2Material;
          var createMeshes2 = function (scene) {
            let sphere2Node = new BABYLON.Mesh("sphere2s", scene);
                  setId(ID);
                    for (let k = 0; k < 3; k++) {
                        Setwallet(wlt);
                        console.log("ceci est le wallet   "+ `${mesh.name}`);
                        let sphere2 = MeshBuilder.CreateSphere("ball", {diameter: 200, segments: 32}, scene);
                        let variance = Math.floor(Math.random()*70)
                        let j = Math.floor(Math.random()*40)
                        let l = Math.floor(Math.random()*40)
                        sphere2.position = new BABYLON.Vector3(k*15 + variance,j*12 + variance,l*12 + variance);
                        sphere2.outlineWidth = 0.1;
                        sphere2Node.addChild(sphere2);
                        var myMaterial2 = new BABYLON.StandardMaterial("myMaterial", scene);
                        myMaterial2.ambientTexture = new BABYLON.Texture(img2[k], scene, true,false);
                        myMaterial2.vAng = Math.PI/3; 
                        myMaterial2.diffuseColor = new BABYLON.Color3(1, 1, 1);
                        sphere2.material = myMaterial2;
                    }
                
           };
          createMeshes2(scene);

And here’s my function “testingdebug” which is returning the good value, but not displaying on the scene since nothing is happening :


const [img2, setimg2] = useState([]);
const testingdebug = (walletid) => {
  axios.get(`http://localhost:3002/debugtest/${walletid}`).then((response) => {
    // console.log(response.data[0].walletImage);
    // Setwallet(response.data.map(({walletImage}) => walletImage));
    setimg2(response.data.map(({imagegroup}) => imagegroup));
    console.log(response.data.map(({imagegroup}) => imagegroup));
    console.log("bbbbbbbbbbbbbb" + response.data.map(({imagegroup}) => imagegroup));

  })
};

if i remove the testingdebug(${mesh.name}); on my function it works, but nothing appears…

Thank you for your help!

2

cc @brianzinn who is amazing with React and Babylon

1 Like
3

calling setImg2 is going to set a state variable img2. That will cause a re-render, but I don’t see where you are using that variable. maybe you want a useEffect with that as a dependency - otherwise just call the code you want directly in the axios `then?

1 Like
4

I’m using the img2[k] to set the image of the new Babylontexture of my sphere, i’m going to try with an UseEffect to see what it does thanks for the help i keep you in touch !!

5

Love React w/ Babylon. Really great marriage.
Doesn’t look like a React issue (I think your props are correct, hard to say for sure without more).
Maybe it’s the texture type given your lighting? diffuseTexture rather than ambientTexture ?
Add a console to make sure the texture is actually getting the URL string from your img2[k] prop?
Perhaps a playground to show us a bit more?

6

My textures display well if I force them by default, unfortunately I can’t make a playground since I use Axios, however it’s very similar to this playground : https://playground.babylonjs.com/#3B5W22#29

7

You can always stub out the dependency like this:
fake http request | Babylon.js Playground (babylonjs.com)

You can also add scripts inline.

8

Axios and BJS definitely play nicely together, as I use them in my app, along with React, which I also don’t think has anything to do with your issue.

I would troubleshoot the issue by creating the mesh and adding the texture in the axios then per brianzinns suggestion and then use the onRender callback to inspect the mesh and see whether your texture is there, etc

Like this:

const onRender = (scene: BABYLON.Scene) => {
const ball = scene.meshes.find(m => m.name = ‘ball’)
if(ball)
// eslint-disable-next-line no-debugger
debugger

You might also do a simpler test, like getting your box data from axios just to make sure all the pieces are working properly.