Can't render button in reactjs

Questions
, , ,
1

Merry christmas team,

I have this code below to render .glb file and interactive button:

useEffect(() => {
    let engine: any = null
    let scene: any = null
    let sceneToRender: any = null

    const initFunction = async () => {
      engine = new Engine(canvasRef.current, true, {
        preserveDrawingBuffer: true,
        stencil: true,
        disableWebGL2Support: false,
      })

      engine.runRenderLoop(() => {
        if (sceneToRender && sceneToRender.activeCamera) {
          sceneToRender.render()
        }
      })
      scene = new Scene(engine)
      scene.createDefaultCameraOrLight(true, true, true)

      SceneLoader.ShowLoadingScreen = false

      SceneLoader.Append(
        import.meta.env.VITE_STORAGE_BASE_URL + modelFile?.fileUrl.replace(modelFile.fileName, ''),
        modelFile?.fileName,
        scene,
        () => {
          scene.clearColor = new Color3(1, 1, 1);
          scene.activeCamera.alpha += Math.PI

          /**
           * Load metallic color
           */
          if (isMetallicColor) {
            const assetMaterial = scene.materials.find((item: any) => item.id === 'ASSET_MAT_MR')
            const standardMaterial = new StandardMaterial('pbr')
            standardMaterial.disableLighting = true
            standardMaterial.emissiveTexture = assetMaterial.albedoTexture
            scene.meshes[1].material = standardMaterial
          }
        }
      )

      const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");

      const button = Button.CreateSimpleButton('button', 'Goto another scene');
      button.width = "150px"
      button.height = "40px";
      button.color = "white";
      button.cornerRadius = 20;
      button.background = "green";
      button.onPointerUpObservable.add(function() {
        alert("you did it!");
      });
      advancedTexture.addControl(button);

      scene.debugLayer.show()
    }

    modelFile && initFunction().then(() => {
      sceneToRender = scene
    })

    const resize = () => engine.resize()

    window.addEventListener('resize', resize)

    return () => {
      scene?.getEngine().dispose()
      window.removeEventListener('resize', resize)
    }
  }, [modelFile, isMetallicColor])

Line advancedTexture.addControl(button); throw error like “Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘_getComponent’)”

How can I render the interactive button successfully in Reactjs? I can’t find out any demo in Reactjs, I tried follow demos in Html but can’t done.

Thanks in advanced.

2

I don’t know enough about React to help you, but maybe this page will:

3

@mabak71270 welcome in the BabylonJS community :slight_smile:
Happy Christmas to you too! :christmas_tree:

I don’t think that it’s ReactJS related :thinking: (but may be)
Looking at the others Button examples it should work.

Could you try moving the button code before SceneLoader.Append?
It would be best if you could provide PG (playground link) or repro repo.

1 Like