Three.js Android, javascript in WebView: how to get file from disk?

Questions
1

Hi,

I copied/pasted the html+javascript code of this example in the ‘assets’ folder of my Android app.

When the Android app is launched, I open webgl_loader_gltf.html in a webview ; everything works like a charm (the 3D view is displayed, possibility to zoom/rotate/scale/translate the model).

In this working version of my Android app, the code of webgl_loader_gltf.html is unchanged compared to the Github version of this sample, that is to say:

const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
loader.load( 'DamagedHelmet.gltf', function ( gltf ) {...

Now, instead of displaying the helmet of the example, I want to load a gltf file that is generated at runtime in my app. This file is located here on my smartphone disk:

file:///storage/emulated/0/Android/data/com.example.webgltest/files/www/examples/models/gltf/DamagedHelmet/glTF/runtimemodel.gltf

If I change the code of webgl_loader_gltf.html like this :

const loader = new GLTFLoader().setPath( 'file:///storage/emulated/0/Android/data/com.example.webgltest/files/www/examples/models/gltf/DamagedHelmet/glTF/' );
loader.load( 'runtimemodel.gltf', function ( gltf ) {...

I get the following error at runtime:

"Fetch API cannot load file:///storage/emulated/0/Android/data/com.example.webgltest/files/www/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf.
URL scheme "file" is not supported.",
source:https://appassets.androidplatform.net/assets/www/build/three.module.js

So, I am unable to get a file stored on my disk in the folder dedicated to my app. Seems that ‘file:///’ is not understood by javascript (quite understandable…).

Any idea how to solve this issue ? Would it work better if my html + javascript code were hosted on a distant server and not ran locally in the assets folder ?

Thanks for your help.

2

file wouldn’t work anywhere, browsers don’t load files from disk, they fetch-request a url. the file could then be located on the server that hosts your project, at the root. generally, and that’s always recommended, you should also bundle your project and import the stuff you need, or put it into the bundlers public folder. with that you can also get away with a local setup without involving a remote server.

btw you do not need a webview either. threejs can run natively on mobile. https://twitter.com/0xca0a/status/1460569744185217026 check out the expo-gl project that translates three into plain openGLES. here’s a ready made project you can check out, https://twitter.com/0xca0a/status/1462861615494307856

3

Thanks for your answer.

I have an Android app (standard java Android app) that allows the user creating its own 3D models. Now, I want to add a 3D viewer in this app so that the user can view his model and interact with it.

As recommended by Android, the models created by the user are stored locally on the user’s phone in the following folder: file:///storage/emulated/0/Android/data/com.my.project

(so, the 3D models created by the user are logically not stored in the assets folder of the apk as only the assets added by the developer before the compilation can be placed in this folder)

So, what strategy/tools/framework would you recommend in order to add a 3D Viewer (that can access files created by the user on disk) in my existing Android java app ? I don’t know all these tools at all (expo, react native…) and I am a little bit lost…

Thanks a lot for your help.