Alternative to iframe for loading three.js projects

Questions
1

Our website uses iframe to load up three.js experiments under a nav bar. Each experiment has it’s own html page (with scripts), and is loaded underneath using iframe. (pretty much exactly like three.js example page)

We’re having issues with iframe restrictions (I wont name them all but trust me), so I’m looking for a way to load the three.js experiments inline without iframe.

Have briefly looked into react-three-fibre for this, but would be complex to convert each page + there are memory implications to disposing big three.js scenes with lots of objects.

Does anyone have any tips? Thank you!! :slight_smile:

2

this would actually be quite simple in react because you’d be using a router. most web apps do this nowadays and react+three wouldn’t be an exception. the canvas could even stay mounted, you merely exchange scene contents through routes which lazy-load for a smaller bundle, this is inbuilt in react. everything is auto-disposed on unmount, it would rather alleviate memory concerns because nothing can leak.

you find a more involved demo here that has animated route transitions.

the official repo has a simple lazy-loading route setup that switches between a handful of demos:

app.js sets up the routes
demos/index.js exports all demos as dynamic imports

3

hi drcmda, thanks so much!

I was trying to find a quicker solution that wouldnt require re-programming every experiment on my site because:

  • im using old-school js not jsm
  • some experiments use older versions of three.js
  • some experiments use other libraries like xg

You can check the website to see what i mean :slight_smile:

With this in mind can u think of a quicker/dirtier alternative to iframes?

Thanks!

4

If you need the isolation from global scope but can’t use sandboxed iframes, I wonder if running each demo in a Web Worker and rendering to an OffscreenCanvas would work? Certainly a bit more experimental…

An IFrame or Worker won’t be as efficient as doing this with R3F or vanilla three.js, but such is life.