[BUG, ERROR] iFrames don't load on Firefox

[winstonrc]

Describe the bug
I have to use Chrome to see the external content loaded in an iFrame throughout the book.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page with an iFrame. Example: https://discoverthreejs.com/book/first-steps/textures-intro/
2. Observe the demo for the head by Lee Perry-Smith doesn't load in Firefox but does in Chrome.

Desktop (please complete the following information):

• OS: Fedora Linux
• Browser Firefox
• Version 103.0.2 (64-bit)

[looeee]

Confirmed, thanks for the heads up.

I think this is caused by three.js examples switching to import maps which are not supported in Firefox.
There's a polyfill but maybe it doesn't work in an iframe? If that's the case this could be tricky to fix.

[winstonrc]

It looks like import maps are on Mozilla's and mrdoob's radars.

Perhaps for now a simple banner at the start of the book recommending Chrome would be helpful for pointing readers in the right direction.

[winstonrc]

This comment points towards the fix: https://discourse.threejs.org/t/bug-importmap-isnt-suppored-by-firefox-and-safari/41716/4

Essentially, in Firefox the user has to navigate to about:config and set dom.importMaps.enabled to true. This solves the issue upon refreshing the page.

It's a bit of effort for the average user, but maybe a quick note at the beginning of the course would be useful.

I believe the issue still remains in Safari, but I don't have any Apple devices at the moment to test.

[looeee]

maybe a quick note at the beginning of the course would be useful.

Yeah that's a good idea. I will do this when I'm next doing updates (later this week hopefully).

In the longer term I want to stop referencing three.js examples as iframes, they break too easily. See #5

[winstonrc]

They appear to be working for me now on version 109.0 (64-bit).