ThreeJS manual sometimes uses codePen style editor like below to demonstrate examples:
I wanted to use this code editor and customize it for my blog own style. But I could not find the source code in the Github that produces this neat embedded preview/code editor of ThreeJS.
Or maybe this is another project somewhere else?
Never mind I finally found it!
I extracted the minimal set of source files:
editor.zip (17.5 KB)
editor.html
editor.js
editor-settings.js
editor-fullscreen-icon.svg
editor-unfullscreen-icon.svg
files/icon.svg
You can embed the code editor as an iframe like so:
<iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-perspective.html"></iframe>
For full screen we just feed the code editor https://threejs.org/manual/examples/resources/editor.html with the corresponding threejs example and it works: https://threejs.org/manual/examples/resources/editor.html?url=https://threejs.org/manual/examples/fundamentals-3-cubes.html