Render Viro3DObject from remote location

• 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:

1. Development OS: Mac Mojave 10.14.3
2. Device OS & Version: Android 9.0 and Android 8.0
3. Version: ViroReact 2.13.0 and React Native: 0.57.7
4. Device(s): Huawei Mate 20 Pro and Samsung Galaxy S8

Description

Im trying render a 3d Object with Viro3DObject using url for source and resources and it doesn’t work, before try with url tried with local files and it works fine so trying find a solution i found that can be problem of the http url but it doesn’t work neither.

Reproducible Demo

My dependences are:

"dependencies": {
    "axios": "0.18.0",
    "jwt-decode": "2.2.0",
    "native-base": "^2.11.0",
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-fast-image": "^5.2.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-swiper": "^1.5.14",
    "react-navigation": "3.5.1",
    "react-viro": "2.13.0"
  }

and the way that i try to render objects is like this:

<ViroARScene onTrackingUpdated={this._onInitialized}>
        <ViroAmbientLight color="#FFFFFF" />
        <Viro3DObject
         source={{ uri: "http://example.com/uploads/object.obj" }}
            resources={[
              { uri: "http://example.com/uploads/object.mtl" },
              { uri: "http://example.com/uploads/objectTex1.jpg" },
              { uri: "http://example.com/uploads/objectTex2.jpg" }
            ]}
          highAccuracyEvents={true}
          position={[1, 3, -5]}
          scale={[2, 2, 2]}
          rotation={[45, 0, 0]}
          type="OBJ"
          transformBehaviors={["billboard"]}
        />
      </ViroARScene>

the render works when i use require() like this:

<ViroARScene onTrackingUpdated={this._onInitialized}>
        <ViroAmbientLight color="#FFFFFF" />
        <Viro3DObject
          source={require("./../public/models/object.obj")}
          resources={[
            require("./../public/models/object.mtl"),
            require("./../public/models/objectTex1.jpg"),
            require("./../public/models/objectTex2.jpg")
          ]}
          highAccuracyEvents={true}
          position={[1, 3, -5]}
          scale={[2, 2, 2]}
          rotation={[45, 0, 0]}
          type="OBJ"
          transformBehaviors={["billboard"]}
        />
      </ViroARScene>

I’ve been searching some information almost a week and nothing, i hope someone can help me.

Thanks and sorry for my english.

[AliKHODR]

@osho1278 @masierraf Hey, i have the same problem, did anyone find a solution?

[Jaiswal-Siddhant]

I had same problem so I converted OBJ and MTL file to single GLB and placed it in models folder in server following is code to send an GLB model from server:

Server

const express = require('express');
const app = express();
const port = 3000;
const path = require('path');

app.get('/:model', (req, res) => {
    console.log(req.params.model);
    res.status(200).sendFile(path.join(__dirname, `./models/${req.params.model}.glb`));
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Client

<Viro3DObject
    source={{ uri:  'http://YOUR_IP_ADDR:PORT/model/Headphones' }}
    scale={[0.05, 0.05, 0.05]}
    position={[0.0, 0.0, -5]}
    type="GLB"/>