[ENHANCEMENT] All three.js examples displayed in iframes should be hosted locally

[looeee]

Currently, many of the official three.js examples are included as iframes throughout the book. These slow down the page load and upstream changes on the three.js repo may unexpectedly break something (if an example gets deleted from the three.js repo, for example).

{{< iframe src="https://threejs.org/examples/webgl_materials_envmaps.html" height="500" title="Image Based Lighting (IBL) in action" caption="Image Based Lighting (IBL): the scene background is reflected on the sphere" >}}

It would be better to extract the code from these and include them in this repo.

[xiejay97]

Currently, many of the official three.js examples are included as iframes throughout the book. These slow down the page load and upstream changes on the three.js repo may unexpectedly break something (if an example gets deleted from the three.js repo, for example).

{{< iframe src="https://threejs.org/examples/webgl_materials_envmaps.html" height="500" title="Image Based Lighting (IBL) in action" caption="Image Based Lighting (IBL): the scene background is reflected on the sphere" >}}

It would be better to extract the code from these and include them in this repo.

@looeee I think just download threejs, and put files into web server,
such as nginx, than we can get html from our own website.

[looeee]

Yeah, it's a nice and simple solution. Unfortunately, the examples and docs are not in the NPM package so this would require yet another copy of three to be included.

There are a couple of additional reasons that I want to include the examples locally that I forgot to mention above:

1. Some of the examples have a controls menu that doesn't look good on small screens, like here:

There's no need for this menu when showing the example in the book so I would like to remove it.

2. Currently on some pages up to three versions of three.module.js and OrbitControls.js are included in the page (one for IDE, one for inline scenes, then another for iframes loaded from threejs.org). That's a lot of unnecessary JS to force on users, especially for mobile. If we include the three.js scenes in the same way as the inline scenes we can at least make everything except the IDE use the same script. We could even bundle and minify it, possibly reducing JS load by 1mb or so.

For these reasons I'd prefer to include these examples under /static/examples/worlds/threejs-examples and only include the files we need rather than the whole repo.

[looeee]

put files into web server,such as nginx,

FYI the actual site is running on a DigitalOcean droplet using nginx as the server. So serving any kind of static files is trivial to set up, but to keep things simple we should make sure all files are served from within the public/ folder.

[xiejay97]

Yeah, it's a nice and simple solution. Unfortunately, the examples and docs are not in the NPM package so this would require yet another copy of three to be included.

There are a couple of additional reasons that I want to include the examples locally that I forgot to mention above:

1. Some of the examples have a controls menu that doesn't look good on small screens, like here:

There's no need for this menu when showing the example in the book so I would like to remove it.

1. Currently on some pages up to three versions of three.module.js and OrbitControls.js are included in the page (one for IDE, one for inline scenes, then another for iframes loaded from threejs.org). That's a lot of unnecessary JS to force on users, especially for mobile. If we include the three.js scenes in the same way as the inline scenes we can at least make everything except the IDE use the same script. We could even bundle and minify it, possibly reducing JS load by 1mb or so.

For these reasons I'd prefer to include these examples under /static/examples/worlds/threejs-examples and only include the files we need rather than the whole repo.

Make a script to resolve these point isnt tricky, but it seems that the work to modify content directly is not very large.
Of course, I'm glad to provide the script if needed.

[looeee]

I think doing this by hand is ok, there's no need for a script.