Can official threejs examples have a live code editing?

[Neosoulink]

Like all of us (I hope), I was browsing officials’ ThreeJs examples and at some point, I wanted to test the part I was interested in.
But going on Github and trying to copy codes and past them locally just to test a small piece of code is a bit long… having a live code edition will be an awesome feature to implement

PS: I’m volunteering to contribute to this one 〜(￣▽￣〜)

I don’t know if there are other resources, But I heard about https://threejs.live, unfortunately, it has not been updated for a while

---

cc: @mrdoob @Mugen87

[drcmda]

It would be easier if each example has it’s own project/folder and a package.json. perhaps also an opportunity to add documentation and a more readable file structure.

you could import it, embed it, but also use external services like codesandbox. as an example

a project: github.com/pmndrs/leva/tree/main/demo/src/sandboxes/leva-ui
link: codesandbox.io/s/github/pmndrs/leva/tree/main/demo/src/sandboxes/leva-ui
try it: codesandbox.io/s/github/pmndrs/leva/tree/main/demo/src/sandboxes/leva-ui

but imo this was discussed before. the current examples can’t be copied and ran without changing code, have hardcoded imports fetching from /build. imo it holds it back. a beginner especially has practically no chance to run it.

the complete examples/js folder was like this once, you couldn’t use anything (think orbitcontrols etc) without copying it into your own project and then go through a bunch of files to correct the code. it was modernized with examples/jsm importing from “three”. i hope the html examples are modernized as well some day.

[Neosoulink]

@drcmda, I believe keeping examples simple as it is, is great. It makes it accessible to everyone

And yes, we can use CodeSandbox to edit code or directly integrate code edition into the website.
In both cases, having a direct interaction with code will help a lot, in understanding and gaining time.

Regarding the structure of the examples, I am a bit mitigate, what makes an example easy to understand and to use, is the capability of how simple it is to read and understand.
And personally, the structure should stay as simple as possible

But yeah, a small refactoring will not be bad.

[seanwasere]

I created something that lets you copy/paste straight from the official examples on GitHub into an online editor, and then edit it from there.

It works for all the examples that I tested so far. I didn’t test all of them.

How it works

Visit the classic ocean shader example, for example.

Ocean Shader : three.js examples

Click the <> at the bottom right of the view

Then press Ctrl+A, Ctrl+C to copy the code from the GitHub page.

Visit https://editor.sbcode.net

Press Ctrl+A, Ctrl+V to paste over the default example in the editor view,

and then press the green Update Preview button

And Wallah! you have an editable Threejs example in your browser that you can edit locally.

And you can even make changes,

For example

Make the water yellow,

load an external asset async,

and a few more things like change the camera position and get rid of controls.minDistance,

and when I’m finished making changes,

I can share a link to the edited version.

See the edited Version @ SBCODE Editor

TL;DR It’s a monkey head, bobbing up and down in yellow water

[jrlazz]

Hi @seanwasere …

I loved it, very useful!
Thank You very much!

[Attila_Schroeder]

I would need this for the webgpu ocean I’m working on. I still haven’t figured out why the github live server doesn’t want to work.

[seanwasere]

Cool, I didn’t check if WebGPU worked.
But this one did. So good.
WebGPU backdrop example : SBCODE Editor

[jrlazz]

Hi @seanwasere,

I tried to edit one image, placing one local image (http://127.0.0.1/img/music.png)

and from my website (https://jrlazz.eu5.org/anim/img/music.png), and it did not accepted

But accepted some from the Yahoo site, for example (https://s.yimg.com/kr/assets/spritify-sprite-dark-fd484ded-615432bc.png).

Please write me if I am doing anything wrong!

[seanwasere]

http://127.0.0.1/img/music.png will only work if you have a webserver running locally on your own PC where you are using your browser, it is serving content from 127.0.0.1 port 80, and has unrestricted CORS policies.

Use CDN links or that yahoo link if it gives you what you need.

Also, the image you tried to use from your own webserver is restricted because your own webserver is blocking the request.

Access to image at 'https://jrlazz.eu5.org/anim/img/music.png' from origin 'https://editor.sbcode.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

You control your own CORS policies on your own webserver.

Instead, you can create your own CDN links to assets and use those.
This is the same as if you were using JSFiddle, CodeSandbox, CodePen, et.al

For example, you could use the smiley face on one of your repositories.
Smiley face : lazzanim/emoji.gif at ed6b8393ae9e6de0b7526cdcf4c62b8d065c92e8 · jrlazz/lazzanim · GitHub

Then convert it to a CDN link
JSDelivr : https://cdn.jsdelivr.net/gh/jrlazz/lazzanim@master/emoji.gif

And then you can use that as an asset in a quick demo
Quick Demo : SBCODE Editor

[jrlazz]

Thank You very much for the fast answer!!!

PS_15/dec/2023:With Servez web server I could access my local images to create and edit pages with SBCODE Editor.
Example:
const textureLoader = new THREE.TextureLoader()
const map = textureLoader.load(“https://localhost:8080/web/anim/img/2firetex.png”)

[jrlazz]

Hi @seanwasere

I could not view rendering side in Samsung Galaxy A01. Is this normal?

[Neosoulink]

Hey @seanwasere, This is exactly the kind of thing I was talking about!

Simple to use and (not sure if it) can handle all the examples on the official ThreeJS website!

[Neosoulink]

Do you think we can populate the list of examples automatically from the Threejs GitHub repo?

[seanwasere]

It’s possible, but I have no plans to do it.

editor.sbcode.net comes with a caveat,

There are no guarantees or warranties that this website, or any shared links will work, or continue to work as expected. Do not rely on it for critical services.

If you want to edit the Threejs examples, then I think you will have a better experience using a real IDE locally.

git clone https://github.com/mrdoob/three.js.git
cd three.js
npm install
npm run dev

Now open a browser, and visit http://localhost:8080/ and you will see many links, one to the /examples/ folder and much more.

You can open the source files in your favourite IDE, find any example script, edit it, refresh the browser, and wallah!

E.g.,
I edited my local path [drive]:\three.js\examples\webgl_loader_ttf.html and changed the text to be drawn on the screen.

And just for fun, I copied the modified script into editor.sbcode.net

SBCODE Editor

If you want a link to just the preview, add embed to the path before the id

https://editor.sbcode.net/embed/02b3db8c3db416423b3cdf8ba662f554964dd422

[Neosoulink]

TBH, it’s exactly what I don’t want to do, to clone or pull changes from the main repo.
But, By using your code sandbox, the possibility of testing/tweaking examples will be facilitated at 95%

Again, thanks for the share @seanwasere