Provide more details on usage

[jayzyaj]

Please provide more details on the usage part especially on iOS. Where do we put it in Xcode?

Can we place it somewhere else in the src folder and import it like a static image using the require function?

Can we import it dynamically?

[kartiknegandhi]

In Xcode ,click the icon in the top left corner, (which says Show the project navigator),you have your project name out there, add the files in that(select copy files if needed option) and run it.

[jwrubel]

Also you can use the expo-asset and expo-file-system libraries to load model and texture data through require. I quickly extracted this from a project - hopefully you can modify it for your scenario so you don't need to involve XCode:

import React, { useEffect, useState } from 'react';
import ModelView from 'react-native-gl-model-view';
import { Asset } from 'expo-asset';
import { EncodingType, readAsStringAsync } from 'expo-file-system';

const model = Asset.fromModule(require('./assets/3d/model.obj'));
const skin = Asset.fromModule(require('./assets/3d/skin.png'));

const App = () => {
  const [asset, setAsset] = useState({model: '', texture: ''});
  useEffect(() => {
    const loadModels = async () => {
      await model.downloadAsync();
      await skin.downloadAsync();
      const rawModelStr = await readAsStringAsync(model.localUri, {encoding: EncodingType.Base64});
      const modelWithHeader = `data:geometry/model;base64,${rawModelStr}`;
      const rawTextureStr = await readAsStringAsync(skin.localUri, {encoding: EncodingType.Base64});
      const textureWithHeader = `data:image/png;base64,${rawTextureStr}`;
      setAsset({model: modelWithHeader, texture: textureWithHeader})
    }
    loadModels();
  }, []);  
  return (
        <ModelView
          model={{
            uri: asset.model,
          }}
          texture={{
            uri: asset.texture,
          }}

          scale={0.001}
          translateZ={-1}
          rotateZ={0}
          style={{flex: 1, backgroundColor: 'transparent'}}
        />
  )
}

Note that if you use this option you'll need to add the file extensions for your models to the assetExts array in metro.config.js as well.

[ghost]

hi @jwrubel , I download obj model file store in "DocumentDir" and use "path to file" as uri to display model. In iOS, it's OK but Android is empty. After that I try parse it to base64 as const modelWithHeader = 'data:geometry/model;base64,${rawModelStr}'; And display this obj model file. I get the same Android issue. Did you occur this issue?