GLTF Loader is not found on react native

Questions
1

Hi @sebavan @bghgary
I am making an app with react native and babylonjs on Android 10 (Samsung smartphone).
My setting is :

"dependencies": {
    "@babylonjs/core": "5.0.0-alpha.30",
    "@babylonjs/loaders": "^4.2.0",
    "@babylonjs/react-native": "^0.4.0-alpha.24",
    "expo": "41.0.1",
     "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "~0.64.1",

My code is:

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StatusBar } from 'react-native';

import { EngineView, useEngine } from '@babylonjs/react-native';
import { Scene, Vector3, Mesh, ArcRotateCamera, Camera, PBRMetallicRoughnessMaterial, Color3, SceneLoader, TransformNode } from '@babylonjs/core';
import "@babylonjs/loaders/glTF";

const Gallery3DScreen = () => {
  const engine = useEngine();
  const [camera, setCamera] = useState<Camera>();
  const [rootNode, setRootNode] = useState<TransformNode>();

  useEffect(() => {
    if (engine) {
      const scene = new Scene(engine);
      scene.createDefaultCamera(true);
      (scene.activeCamera as ArcRotateCamera).beta -= Math.PI / 8;
      setCamera(scene.activeCamera!);
      scene.createDefaultLight(true);

      const rootNode = new TransformNode('Root Container', scene);
      setRootNode(rootNode);

    //   const box = Mesh.CreateBox("box", 0.2, scene);
    //   const mat = new PBRMetallicRoughnessMaterial("mat", scene);
    //   mat.metallic = 1;
    //   mat.roughness = 0.5;
    //   mat.baseColor = Color3.Blue();
    //   box.material = mat;

    //   scene.beforeRender = function () {
    //     box.rotate(Vector3.Up(), 0.005 * scene.getAnimationRatio());
    //   };

    const transformContainer = new TransformNode('Transform Container', scene);
    transformContainer.parent = rootNode;
    transformContainer.scaling.scaleInPlace(0.2);
    transformContainer.position.y -= .2;

    scene.beforeRender = function () {
        transformContainer.rotate(Vector3.Up(), 0.005 * scene.getAnimationRatio());
    };

    var baseUrl = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";

    SceneLoader.ImportMeshAsync(null, baseUrl + "BoomBox/glTF/", "BoomBox.gltf", scene).then(result => {
        console.log("bla ..");
        result.meshes[0].position.x = 0.01;
        const mesh = result.meshes[0];
        mesh.parent = transformContainer;
    });

    }
  }, [engine]);

The error message is:

BJS - [19:17:31]: Babylon Native (v5.0.0-alpha.30) launched
 WARN  BJS - [19:17:31]: Unable to find a plugin to load .gltf files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf) see: https://doc.babylonjs.com/how_to/load_from_any_file_type 
Gallery3DScreen@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.artspacesvr&modulesOnly=false&runModule=true:

...
2

Welcome to the forums!

My immediate guess is that you are using mismatched versions.

1 Like
3

Thanks,
i have installed this:

"@babylonjs/core": "^4.2.0",
    "@babylonjs/loaders": "^4.2.0",
    "@babylonjs/react-native": "^0.4.0-alpha.24",

My logs is:

@babylonjs/react-native@0.4.0-alpha.24 requires @babylonjs/core@^5.0.0-alpha.30 but version 4.2.0 is currently installed. Run 'npm install @babylonjs/core@5.0.0-alpha.30' in your app's root directory to upgrade.
 LOG  Running "main" with {"rootTag":1}
 LOG  BJS - [20:01:55]: Babylon Native (v4.2.0) launched

But I don’t get any errors for gltf loader.
But screen shows only black.

4

You need to use 5.0.0-alpha.30 for both packages.

5

I have updated so

   "@babylonjs/core": "5.0.0-alpha.34",
    "@babylonjs/loaders": "5.0.0-alpha.34",
    "@babylonjs/react-native": "0.4.0-alpha.29",

it seems to be working. fantastic. Thank you very much.

1 Like
6

but i have this warning:

warning " > @babylonjs/react-native@0.4.0-alpha.29" has incorrect peer dependency "react@^16.13.1".
warning " > @babylonjs/react-native@0.4.0-alpha.29" has incorrect peer dependency "react-native@^0.63.1".
warning " > @babylonjs/react-native@0.4.0-alpha.29" has incorrect peer dependency "react-native-permissions@^2.1.4".
7

@ryantrem hopefully can help with this one.

1 Like
8

That warning is correct because @babylonjs/react-native 0.4.0-alpha.29 does not work with React Native 0.64 (at least on Android). However, I just added support for React Native 0.64 yesterday, so the next @babylonjs/react-native build (there should be one tomorrow) will work with React Native 0.64.

2 Likes
9

thanks, I am excited about RN 0.64