Can official threejs examples have a live code editing?

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,

image

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 @ SBEDIT : Online Code Editor

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

10 Likes