React-native 3D object rendering

Question

I'm new to react native development and I'm facing quite an issue.

I'm writing an app that with BLE connects and receives data. With these, I have to animate a 3D element.

I've done correctly all the part of BLE connection and now I'm having trouble with the 3D part.

I'm using react native without expo because I read that expo is not compatible with BLE PLX package. Now I see that all the packages are with expo-cli and three.js. I've downloaded a free 3D model.obj but when i try to require it the app can't find the file.

This is my \src\model\three.js

import { GLView } from "expo-gl";
import { View } from "react-native";
import { loadObjAsync, Renderer } from "expo-three";
import { Scene } from "three";

export const Three = (props) => {
  async function onContextCreate(gl) {
    const renderer = new Renderer({gl});
    renderer.setSize(200, 200);

    const scene = new Scene();

    const obj = await loadObjAsync({
      asset: require('./model.obj')
    });

    scene.add(obj);

    // Setup an animation loop
    const render = () => {
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };

    render();
  }

  return (
    <View>
      <GLView onContextCreate={onContextCreate} />
    </View>
  );
};

In the same folder, I have model.obj (\src\model\model.obj)

This are the dependencies I've add in package.json

"base64-arraybuffer": "^1.0.1",
"expo-gl": "^10.4.2",
"expo-gl-cpp": "^10.4.1",
"expo-three": "^5.7.0",
"react-native-unimodules": "^0.14.6",
"three": "^0.127.0"

This is what I'm getting

 Error: Unable to resolve module ./model.obj from D:\projects\AppName\src\model\three.js:

None of these files exist:
  * src\model\model.obj(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)
  * src\model\model.obj\index(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.json|.native.json|.json)

I was following this comment but without success

Please help!

Answer 1

I finally came out how to solve it.

I've started using React-three-fiber which has compatibility for React Native (https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide).

I'm converting the 3D model in jsx with gltfjsx and then modelling it via javascript.

Thanks