Can't dynamically add the material to a OBJ retrieved from the API

[mikeslinkman]

• Review the documentation: https://docs.viromedia.com/
• Search for existing issues: https://github.com/viromedia/viro
• Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

Development OS: Mac
Device OS & Version: Android 10 iOS version 14.2
Version: Community Version RN 0.63.3
Device(s): Oneplus 6 iPhone 11 and more

Description

From my own API I've downloaded a OBJ file including mtl file and the resources referenced in the material file. The next step was to dynamically load the model from the internal storage and set the materials for it. Loading the model works fine and the model is displayed as expected. The materials however are never set for the object.

Since we might need to use several diffuse_textures for different parts of the model I can't create the material myself. No errors are actually thrown as far as I can tell but the material is never loaded.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.

const ARNavigator = ({navigation, route}) => {

    const HelloWorldSceneAR = () => {
        const onInitialized = (state, reason) => {
            console.log('state: ', state, 'reason: ', reason);
        }

        const _onError = (event) => {
            console.log("OBJ loading failed with error: " + event.nativeEvent.error);
        }

        const _onModelLoad = (event) => {
            console.log("Model loaded: " + event.nativeEvent);
        }

        return (
            <ViroARScene onTrackingUpdate={onInitialized}>
                <ViroAmbientLight color="#FFF" />
                <Viro3DObject
                    type="OBJ"
                    onError={_onError}
                    scale={[.9,.9,.9]}
                    rotation={[0, 0, 0]}
                    position={[-0.1, -1.5, -2]}
                    onLoadEnd={_onModelLoad}
                    resources={[
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_mtl.mtl`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_1.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_2.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_3.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_4.png`}
                    ]}
                    source={{uri: `${RNFS.DocumentDirectoryPath}/AR/oobject.obj`}}
                />
            </ViroARScene>
        )
    }

    return (
        <ViroARSceneNavigator
            autofocus={true}
            initialScene={{
                scene: HelloWorldSceneAR
            }}
            style={{flex: 1}} />
    )
}

If other details are required, please let me know and I'll try and update the issue with the missing information

[mariansam]

Hi @mikeslinkman, we already had a similar issue on the ViroCommunity Discord server. Your problem might be a missing protocol in the uri. Try adding file:// before every file path you want to load. Eg.

{uri: `file://${RNFS.DocumentDirectoryPath}/AR/object_mtl.mtl\`},

But I'm not 100% sure with about this, try it out and let us know.

[mikeslinkman]

Hi,

Just reaching back to update my current situation. As I've already commented in the other (now closed) issue in the repo, using this method I was able to load OBJ files dynamically. And for it to properly display the images I didn't even need to provide the resources array with my mtl file and images. This might be due to the models that I'm currently using.

So this seems to work as expected, thanks for mentioning this and thanks for the great work in reviving ViroReact