
Three.js editor - danboarder
https://threejs.org/editor/
======
satori99
Three.js is a lot of fun to play around with, though I tend only to use its
web editor to test my content for errors.

It's really simple to use Three.js using only vanilla JavaScript.

This is one of my recent experiments[1]; An animated human created using
MakeHuman[2], animated in Blender, and rendered by three.js in less than 200
lines.

[1]
[http://codepen.io/satori99/pen/Xjbvbr/?editors=0010#0](http://codepen.io/satori99/pen/Xjbvbr/?editors=0010#0)

[2] [http://www.makehuman.org/](http://www.makehuman.org/)

~~~
tomcam
amazing. I am flabbergasted these resources exist. Great demo, BTW

------
rl3
While I love Three.js, its editor has been around for almost as long as the
project itself and is sort of neglected by comparison. WebGL Studio[0] has a
far more impressive editor, but its underlying engine is custom, so in most
cases it isn't anywhere near as useful as Three.js due to the latter's
ecosystem.

One thing I don't like about either editor is that they're web-based. While it
makes a ton of sense on paper, I _hate_ doing any serious 3D work in a browser
window. Something like Microsoft's Language Server Protocol[1] but for
graphical editors would be amazing. Run the project in a browser window while
having bidirectional flow of data between a native desktop editor and the
browser window.

Unfortunately if you want to run something like Three.js inside of a native
desktop editor, you'd have to embed a web runtime. That really balloons
project complexity, so I can see why so many people prefer web-based editors
when making web-based projects.

One alternative, at least for 3D applications, is multi-platform frameworks
that also work on the web. Oryol[2] in particular comes to mind.
Hypothetically you could build a native editor around it, with no need to
embed a runtime. The native editor's viewport would just use native graphics
APIs for rendering. Then when you like what you see, just compile the same
thing for the web. While some edge cases may not make it that easy, overall it
seems to be a far superior workflow than having to deal with web-based editors
or embedded web within native applications.

Unity 5 and Unreal Engine 4 both have incredible, native desktop editors that
support exporting to the web. Unfortunately, they both have massive runtimes
that make their web footprints a joke, among other problems.

[0] [https://webglstudio.org/](https://webglstudio.org/)

[1] [https://github.com/Microsoft/language-server-
protocol](https://github.com/Microsoft/language-server-protocol)

[2] [https://github.com/floooh/oryol](https://github.com/floooh/oryol)

~~~
zurn
What makes you say it's been neglected? I scrolled back until i got tired (~3
years) of github's history page for the editor/ directory and it looks like a
steady and active stream of development:
[https://github.com/mrdoob/three.js/commits/dev/editor/js](https://github.com/mrdoob/three.js/commits/dev/editor/js)

~~~
rl3
Its commit history represents a small fraction of overall commits on the
project. While the editor can surely be considered under active development by
normal standards, a Mr. Doob project raises the bar on that. It's not uncommon
to see him average over a dozen commits a day on a regular basis for the
entire three.js repo, in addition to managing and merging a ton of pull
requests at the same time.

That said, I agree saying it's neglected is a bit unfair, so I've reworded my
original statement qualifying it as _sort of_ neglected (far more diplomatic).
Moreover, it isn't really fair for me to hold it to the same standards as
production-grade editors, since I'm pretty sure its primary purpose is to
simply give people a sandbox environment to play around in.

You'll be happy to know GitHub rate limited me around January 2015 of the
commit history you linked, since there was so much of it. :)

------
bhouston
If you want scene setup and polygon editing and animation creation try
[https://Clara.io](https://Clara.io) and it exports to the threejs and fbx
formats as well. Clara.io is similar to blender and Maya in terms of its
features.

~~~
foozed
thanks for that link, clara.io looks great after looking at it quickly, will
be using it from now on!

------
zabast
Try clicking one of the examples in the menu on the top, and then hit 'Play'.
Love it! It is certainly great for playing around with WebGL, but still lots
of work necessary if it wants to catch up to Unity or CopperCube and create
complex WebGL games or scenes.

~~~
jeremiep
That's mostly because of the architecture of Unity3D being both efficient and
productive and UE4 being much more so. They're _radically_ different
architectures than what three/babylon have. And the fact that they both
compile through Emscripten is proof AAA engines can be built for the web.

We're not too far away from SIMD, Atomics and SharedArrayBuffer as well as
OffscreenCanvas in the browser (they're all available behind experimental
flags today). I can definitely see a newcomer building a web engine from the
ground up and beating Unity/UE4 in performance AND productivity for not having
their overhead. Its a huge undertaking but nothing impossible.

What I missed the most doing WebGL work however were asset pipelines. Open-
source engines barely support DXT compression, normalized integers and
whatnot. We ended up writing our own (very crude) CLI tool to compress DXT1/5,
ETC1 and PVRTC as well as a KTX parser to load them at runtime. I'll see if I
can make them open-source - they're still a bit tied to our custom in-house
webgl renderer.

~~~
daredevildave
It's worth checking out PlayCanvas for the asset pipeline. Texture compression
is supported directly in the editor. [https://blog.playcanvas.com/webgl-
texture-compression-made-e...](https://blog.playcanvas.com/webgl-texture-
compression-made-easy/)

~~~
jeremiep
That's good to know!

We went with ImageMagick and PVRTexToolCLI driven from a node.js script. I'd
go with GraphicsMagick now that I know about it; IM doesn't yield good DXT
compression quality.

------
adam12
I prefer BabylonJS for their excellent support.

[http://editor.babylonjs.com/](http://editor.babylonjs.com/)

[https://medium.com/babylon-js/programming-with-the-
babylon-j...](https://medium.com/babylon-js/programming-with-the-babylon-js-
editor-ddab887c243a#.cv5ddrocj)

[http://www.html5gamedevs.com/topic/26619-new-official-
babylo...](http://www.html5gamedevs.com/topic/26619-new-official-babylonjs-
ruins-demo-live/)

[http://www.babylonjs.com/demos/ruins/](http://www.babylonjs.com/demos/ruins/)

~~~
jeremiep
We tried babylon for a mobile VR experience, needless to say the performances
are mediocre at best. It runs well on PC because it can afford to waste 95% of
the computer's power and still run smoothly for small scenes.

~~~
MayorOfMonkeys
PlayCanvas has a renderer that has an optimized path for stereo rendering -
achieves great perf on mobile. [https://blog.playcanvas.com/webvr-support-in-
playcanvas/](https://blog.playcanvas.com/webvr-support-in-playcanvas/)

~~~
jeremiep
We had one as well. We're rendering VR with barrel distortion applied in the
main vertex shader rather than as a post-process. Saves an expensive
framebuffer (some mobile GPUs take as long as half a millisecond to switch
render targets) at the cost of a slightly heavier vertex shader. It also
requires geometry to be tesselated for the distortion effect to work.

We had to write our own polyfill for our implementation but it beats the post-
process technique of webvr-polyfill quite easily.

That's how UE4 and Unity3D do barrel distortion as well.

------
augustt
Very cool. Here's a similar idea but instead it uses a node graph editor:
[http://idflood.github.io/ThreeNodes.js/index_optimized.html#...](http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json)

------
kyledrake
Some nice examples you can use with this editor:
[http://mrdoob.neocities.org](http://mrdoob.neocities.org)

------
santaclaus
I like that it supports the standard Maya keybindings by default.

Would be cool to render the scenes out! Has anyone (sucessfully) run Cycles
through Emscripten? :)

~~~
mrdoob2
01 Alchemist is working on it ^^
[https://dump.01alchemist.com/2016/12/31/future-webhpc-
parall...](https://dump.01alchemist.com/2016/12/31/future-webhpc-parallel-
programming-with-javascript-the-new-era-about-to-begin/)

~~~
supernumerary
Wow TurboScript looks interesting. I am supposing the bigger story here is in-
browser 3d editors as the test-bed for the browser's taking over CPU future
...

------
dandare
One thing I am not able to find anywhere on the whole threejs.org website -
what is three.js?

~~~
satori99
The github project page has a bit more info than the threejs.org website.

It is a relatively small JavaScript library for creating and rendering 3D
scene graphs in a browser. It enables you to code while thinking of scenes and
the objects within them, rather than GPU buffers and what to put in them.

[https://github.com/mrdoob/three.js/](https://github.com/mrdoob/three.js/)

------
ngokevin
A-Frame ([https://aframe.io](https://aframe.io)), a WebVR framework for
three.js, also has an editor that works like a DOM Inspector. You just hit a
shortcut on any A-Frame scene on the Web, and it'll inject an Inspector. Also
integrated with A-Frame's version of the Unity Asset Store for components.

------
djabatt
unbelievably cool this all works so nicely in my browser.

~~~
pasta
If you like this: there are even 3D CAD tools that work in the browser. For
example: [https://www.onshape.com/](https://www.onshape.com/)

------
hossbeast
Is there an example to play around with?

~~~
voltagex_
Yep, hit the Examples menu.

------
hccampos
While this is fun to play around with, and definitely helpful when using
threejs directly, for a fullblown editor on the web there is nothing that
beats PlayCanvas at the moment.

~~~
rawnlq
How does that compare with [https://clara.io](https://clara.io)? I thought
that was made by one of the core contributors of three.js (bhouston).

I don't use web editors for 3d so I have no idea, just curious.

~~~
daredevildave
Clara.io is a modelling, animation and rendering tool (in the style of
Maya/Max/Blender)

PlayCanvas is a game engine (in the style of Unity/Unreal)

To put it another way. You build your 3D assets in Clara and import them into
PlayCanvas to add interactivity.

------
dispose13432
What's the license of this?

GitHub doesn't seem to say?

~~~
dispose13432
Ok. Found it,
[https://github.com/mrdoob/three.js/tree/master/editor](https://github.com/mrdoob/three.js/tree/master/editor)
doesn't say, but
[https://github.com/mrdoob/three.js/](https://github.com/mrdoob/three.js/)
says MIT

~~~
mrdoob2
Yup! MIT ^^

------
EGreg
The menus appear behind the page on mobile.

------
joeberon
Trying to edit scripts doesn't work for me

------
frik
Too many tutorials and examples rely on Three.js and similar frameworks,
instead of using vanilla-JS together with WebGL.

------
EJTH
I remember taking a quick look at this when I experimented with THREE.js
first, I didn't get the hang of it though and I ended up just using blender as
the main editor for my game (levels, models and similar assets)

