Has anyone been able to load 3D meshes into DroidScript apps?

[Mike Stein]

Hi,

I'm new to DroidScript and was trying to create an app that used Aframe (which runs on top of three.js) to load 3D meshes into a scene. I was able to get Aframe to work via a native app type using DroidScript (e.g. myAframeApp.js in same DroidScript folder as index.html containing along with the aframe libraries [aframe.min.js, aframe-environment-component.min.js, aframe-extras.min.js]) but the aframe libraries were not able to import in the .glb meshes that I put into the DroidScript "Misc/" asset folder: I got an error saying it couldn't use the file:// protocol to load them). The project does, however, work outside of DroidScript IDE in a simple Javascript Web IDE.

Appreciate knowing if anyone has been able to import meshes into DroidScript apps, and if so, how they did so.

Thank you,

[Dave]

Years ago, I got A-frame working in DS for a museum project in Cambridge, so I know it can work :)

Many js libs expect to be run from a web server and use xhr and/or fetch calls which will not work for a page served from the file:/// protocol, so you have a few options:

1. try adding cfg.Serv to the top of your app.  This tells DS to copy all your app files to a temp dir and serv them via http://

2. create your own local webserver running on the loopback address (127.0.0.1) using app.CreateWebServer or app.CreateNode to serve up your files.

3. Hack the 3rd party libs by globally replacing the fetch and xhr calls with a dummy/fake object that uses local app.ReadFile calls (not so easy)

[Mike Stein]

Thank you very much, @Dave!

I will try those suggestions and update the post once I have results.

Sincerely,

Mike :-)

[Mike Stein]

Hi, Dave.
I figured it out with the help of your suggestions :-)

Setup:
Aframe project main.js script = testAFrame.js
Aframe html template = index.html (index.html in same directory as testAframe.js; used src="Misc/aframe.min.js" and src="Misc/3DMesh.glb" as appropriate references in html)

Aframe js library downloaded from Aframe website = aframe.min.js (used remote desktop DroidScript Ide and loaded that .js file into the Aframe projects' Misc folder)

Aframe 3D assets = (again used remote desktop DroidScript Ide and also loaded large 3D assets into Misc folder)

testAframe.js

```
function OnStart()

{

     lay = app.CreateLayout("Linear","VCenter,FillXY");

     web = app.CreateView(0.9,0.9);

     lay.AddChild(web)

     app.AddChild(web)

     app.AddLayout(lay)

     serv=app.CreateWebServer(8000)

     serv.SetFolder("/sdcard/DroidScript/testAframe");

     serv.Start();

     // comment out next line if prefer to serve Aframe scene over wifi instead of on device local WebView

     web.LoadUrl("http://127.0.0.1:8080");

}

```

Works great!

Fyi,

Thanks again,

Mike

On Tuesday, January 6, 2026 at 2:21:53 AM UTC-8 Dave wrote:

[Mike Stein]

Improved setup:
Although the above setup works when I run the setup in the DroidScript environment, it does not work when compiled to an .apk with the .apk plug in.

I figured out that is because I needed to get all the file paths correct and work with the restrictions:

a) when compiled as an .apk, Droidscript apps cannot serve internal files to the main .apk itself-- the developer must extract the assets to local storage (as noted in the .apk plugin help docs)
b) best for .html loading accessory .js files and assets to have all such files in the same folder in local storage (as noted in the line above)

Thus, the below modification extracts the assets out of the developing app inside of DroidScript and stores in local folder (e.g. "Misc") on local device which then can be accessed by the built .apk

and works as a built .apk app!

testAframe.js:

function OnStart()

{

  // Copy DroidScript asset folder you put your assets in to local storage (for this example all assets in Misc folder)

   app.ExtractAssets(“Misc”,”/sdcard/Misc”)

  // Create a layout

   lay = app.CreateLayout("Linear","VCenter,FillXY");

 

  // Create a WebView to display the web server content

   web = app.CreateView(0.9,0.9);

   lay.AddChild(web)

   app.AddChild(web)

   app.AddLayout(lay)

 

  // Create a WebServer to serve files (needed if .html file not single self-contained file)

   serv=app.CreateWebServer(8000)

   serv.SetFolder("/sdcard/DroidScript/testAframe");

   serv.Start();

   // comment out next line if prefer to serve Aframe scene over wifi instead of on device local WebView

   web.LoadUrl("http://127.0.0.1:8080");

}

P.S.,
I also found that it is best when the apk build plugin asks you for a name for signing your app, to use the following syntax:
com.YOURORGNAME.YOURAPPNAME

(the apk build plugin will ask you to create YOURORGNAME and your builder password when you first build .apks with the apk build plugin)

[Mike Stein]

*Clarification:
For the above improved version, I put all of the files (e.g. Aframe.js and its libraries, the index.html file and the .glb meshes-- except for the main testAFrame.js script) in the Misc folder (i.e. instead of having the index.html folder in the Html folder as works fine to have all of the files and assets in the Misc folder and then easy just to extract that whole folder as noted above).

[Mike Stein]

Sorry, Everyone. 
I forgot one additional modification to the above working script (changed the SetFolder path). Here is the final main script that works:

testAframe.js:

function OnStart()

{

  // Copy DroidScript asset folder you put your assets in to local storage (for this example all assets in Misc folder)

   app.ExtractAssets(“Misc”,”/sdcard/Misc”)

  // Create a layout

   lay = app.CreateLayout("Linear","VCenter,FillXY");

 

  // Create a WebView to display the web server content

   web = app.CreateView(0.9,0.9);

   lay.AddChild(web)

   app.AddChild(web)

   app.AddLayout(lay)

 

  // Create a WebServer to serve files (needed if .html file not single self-contained file)

   serv=app.CreateWebServer(8000)

   serv.SetFolder("/sdcard/Misc");