React native: dynamic update from model

Questions
1

Hi,
I am making android app with babylonjs react native.
I import gltf model and change texture: dynamically add new images.
I change the page and load new images, go back and try to update the texture again.
I don’t want to load gltf every time.

const Screen: FunctionComponent<ViewProps> = (props: ViewProps) => {
  const defaultScale = 1;
  const dataContext  = useContext(DataContext);
  const [imagesData, setImagesData] = useState([]);

  useEffect(() => {
    setImagesData(dataContext.imagesData);
    if (engine) {
      const scene = new Scene(engine);
      setScene(scene);
      SceneLoader.ImportMeshAsync(null, baseUrl, "Gallery.glb", scene).then(result => {
            let pic13 = scene.getMeshByName("pic13");
            let picTexture = new Texture(imagesData[1], scene);
            pic13.material.albedoTexture = picTexture;
       }
      });

    }
  }, [engine]);
2

I don’t see a question. I’m also not sure this relates to babylon native / react native. Maybe you want to cache the model you are loading so that you don’t have to load it again?

2 Likes
3

Hi @ryantrem
my problem is:

  1. in useEffect(() => { model is loaded. and the mesh are replaced. All good
  2. in useFocusEffect(() => { new images are loaded.
  3. useEffect(() is executed but once. How can the texture in the model update again without re-rendering model itself.
    How can I cache the model?

One possible solution would be:

      scene.beforeRender = function () {
          if(scene !== undefined) {
            let pic13 = scene.getMeshByName("pic13");
            if(pic13 !== undefined && pic13.material !== undefined) {
              var picTexture = new Texture(imagesData[1], scene);
              pic13.material.albedoTexture = picTexture;
            }
          }
     
      };

is this solution stable ?

4

Adding @ryantrem who knows more about React Native.