Three.js: threejs.live

[ekatzenstein]

This probably isn't the best place to post, but I'm an idiot when it comes to social media. Building off of the set of example files and other projects like the html editor, I made a site so that users can interact with example files in-session: threejs.live

Just wanted to share with the devs. Let me know if you have any feedback or questions. Thanks.

[Mugen87]

One little thing: If i change the examples over the side menu, i'm gradually getting extremely high frame-rates with my Chromium. So the first example runs at 60 fps, second examples at 120 fps, third example at 180 fps and so on. The browser crashed when the example webgl_camera was rendered with over 600 fps. :stuck_out_tongue_winking_eye: :boom:

Tested with Ubuntu 16.04 LTS and Chromium 55.0.2883.87

[ekatzenstein]

Yikes! Thanks for the heads up. Was able to replicate, issue's open here: https://github.com/ekatzenstein/three.js-live/issues/1

[ekatzenstein]

[resolved now]

[Mugen87]

Much better :wink: !

[looeee]

This is a really great upgrade to the current example page - both the design and the functionality. Well done! 😁

Perhaps with a little more work (in particular making it work on mobile), could this replace the current page at some point? The live coding feature would be a huge benefit.

[ekatzenstein]

Just updated to r84. @mrdoob the build is pretty straightforward, so I'd be happy to port into the site. Let me know if you're interested.

[mrdoob]

I really like the idea of being able to see the code and also edit it.

However, I think requiring react-redux, react-router, create-react-app, create-react-app-sass, material-ui, ... just for that is a bit of over-engineering.

https://threejs.org/examples/ produces 5 requests and transfers 50KB (loads in ~600ms).
http://threejs.live/ produces 14 requests and transfers 260KB (loads in ~6s).

We definitely need codemirror, but apart from that, I think we can achieve the same result with ~50 more lines of code inside index.html.

[mrdoob]

This is also an issue... https://github.com/ekatzenstein/three.js-live/issues/2

[ekatzenstein]

@mrdoob Makes sense. The hash issue is because I'm deploying with github pages and can't use browser history from what I understand. I agree on the over engineering - these are new technologies I've learned so I wanted to use them in a smaller project. I think react still has value here, but the additional libraries aren't essential.

[Mugen87]

For further discussions: https://discourse.threejs.org/t/threejs-live-official-examples-with-live-code-editing/129

[Mugen87]

@ekatzenstein Any chances you update threejs.live to R90?

Recently, a user thought that threejs.live is the latest list of examples. I know you've added a note on your page that refers to the official website. But unfortunately, one can easily overlook this link.