10 ms·

Three.js editor

362 points by danboarder 10y ago

hossbeast 10y ago
Is there an example to play around with?
- voltagex_ 10y ago
  Yep, hit the Examples menu.
santaclaus 10y ago
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 10y ago
  01 Alchemist is working on it ^^ https://dump.01alchemist.com/2016/12/31/future-webhpc-parallel-programming-with-javascript-the-new-era-about-to-begin/ https://dump.01alchemist.com/2016/12/31/future-webhpc-parall...
  - supernumerary 10y ago
    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 ...
djabatt 10y ago
unbelievably cool this all works so nicely in my browser.
- pasta 10y ago
  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/
- tehbeard 10y ago
  I'm amazed how well it works on my tablet.
hccampos 10y ago
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.
- daredevildave 10y ago
  And a handy link for anyone who wants to check out PlayCanvas: https://playcanvas.com https://playcanvas.com
- rawnlq 10y ago
  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 10y ago
    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.
zabast 10y ago
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 10y ago
  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 10y ago
    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-easy/ https://blog.playcanvas.com/webgl-texture-compression-made-e...
    - jeremiep 10y ago
      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.
joeberon 10y ago
Trying to edit scripts doesn't work for me
rl3 10y ago
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 10y ago
  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 10y ago
    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 10y ago
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 10y ago
  thanks for that link, clara.io looks great after looking at it quickly, will be using it from now on!
satori99 10y ago
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 10y ago
  amazing. I am flabbergasted these resources exist. Great demo, BTW
kyledrake 10y ago
Some nice examples you can use with this editor: http://mrdoob.neocities.org http://mrdoob.neocities.org
EJTH 10y ago
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)
adam12 10y ago
I prefer BabylonJS for their excellent support. http://editor.babylonjs.com/ http://editor.babylonjs.com/ https://medium.com/babylon-js/programming-with-the-babylon-js-editor-ddab887c243a#.cv5ddrocj https://medium.com/babylon-js/programming-with-the-babylon-j... http://www.html5gamedevs.com/topic/26619-new-official-babylonjs-ruins-demo-live/ http://www.html5gamedevs.com/topic/26619-new-official-babylo... http://www.babylonjs.com/demos/ruins/ http://www.babylonjs.com/demos/ruins/
- jeremiep 10y ago
  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.
  - adam12 10y ago
    It does take a little time to learn how to get the best performance out of BJS or any WebGL app. The community is very helpful with that.
    - jeremiep 10y ago
      I looked through the source code and saw string concatenation to set the active texture unit among many other inefficiencies. Everything does isReady() checks multiple times per frame (rather than creating it only once its ready). The material parameters are indexed in the worst possible way. The stats gathering code is still active in release. The list goes on and on :) Some caches are even implemented with bugs. Half the code use a cache in a certain way and the other half in a different way. That was fun to dig into. I tried to optimize Babylon for a few days at work before giving up - my general rule of thumb is that if I'm about to refactor more than 20% of a codebase its much, much faster to rewrite it if I'm already familiar with the problem space. Took about two weeks to write a proprietary renderer running circles around Babylon - but only supported static meshes. Babylon was useful to prototype but the mobile performances aren't there, even after days of profiling and optimizing every slow path it was still an order of magnitude slower than an in-house renderer designed for performance from the ground up.
dandare 10y ago
One thing I am not able to find anywhere on the whole threejs.org website - what is three.js?
- kevinsimper 10y ago
  It is a JavaScript library to work with WebGL in the browser :)
- satori99 10y ago
  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/
frik 10y ago
Too many tutorials and examples rely on Three.js and similar frameworks, instead of using vanilla-JS together with WebGL.
augustt 10y ago
Very cool. Here's a similar idea but instead it uses a node graph editor: http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json http://idflood.github.io/ThreeNodes.js/index_optimized.html#...
dispose13432 10y ago
What's the license of this? GitHub doesn't seem to say?
- dispose13432 10y ago
  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 10y ago
    Yup! MIT ^^
EGreg 10y ago
The menus appear behind the page on mobile.
ngokevin 10y ago
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.

Three.js editor

362 points by danboarder 10y ago

hossbeast 10y ago

Is there an example to play around with?

voltagex_ 10y ago
Yep, hit the Examples menu.

santaclaus 10y ago

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 10y ago
01 Alchemist is working on it ^^ https://dump.01alchemist.com/2016/12/31/future-webhpc-parallel-programming-with-javascript-the-new-era-about-to-begin/ https://dump.01alchemist.com/2016/12/31/future-webhpc-parall...
- supernumerary 10y ago
  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 ...

djabatt 10y ago

unbelievably cool this all works so nicely in my browser.

pasta 10y ago
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/
tehbeard 10y ago
I'm amazed how well it works on my tablet.

hccampos 10y ago

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.

daredevildave 10y ago
And a handy link for anyone who wants to check out PlayCanvas: https://playcanvas.com https://playcanvas.com
rawnlq 10y ago
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 10y ago
  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.

zabast 10y ago

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 10y ago
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 10y ago
  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-easy/ https://blog.playcanvas.com/webgl-texture-compression-made-e...
  - jeremiep 10y ago
    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.

joeberon 10y ago

Trying to edit scripts doesn't work for me

rl3 10y ago

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 10y ago
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 10y ago
  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 10y ago

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 10y ago
thanks for that link, clara.io looks great after looking at it quickly, will be using it from now on!

satori99 10y ago

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 10y ago
amazing. I am flabbergasted these resources exist. Great demo, BTW

kyledrake 10y ago

Some nice examples you can use with this editor: http://mrdoob.neocities.org http://mrdoob.neocities.org

EJTH 10y ago

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)

adam12 10y ago

I prefer BabylonJS for their excellent support. http://editor.babylonjs.com/ http://editor.babylonjs.com/ https://medium.com/babylon-js/programming-with-the-babylon-js-editor-ddab887c243a#.cv5ddrocj https://medium.com/babylon-js/programming-with-the-babylon-j... http://www.html5gamedevs.com/topic/26619-new-official-babylonjs-ruins-demo-live/ http://www.html5gamedevs.com/topic/26619-new-official-babylo... http://www.babylonjs.com/demos/ruins/ http://www.babylonjs.com/demos/ruins/

jeremiep 10y ago
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.
- adam12 10y ago
  It does take a little time to learn how to get the best performance out of BJS or any WebGL app. The community is very helpful with that.
  - jeremiep 10y ago
    I looked through the source code and saw string concatenation to set the active texture unit among many other inefficiencies. Everything does isReady() checks multiple times per frame (rather than creating it only once its ready). The material parameters are indexed in the worst possible way. The stats gathering code is still active in release. The list goes on and on :) Some caches are even implemented with bugs. Half the code use a cache in a certain way and the other half in a different way. That was fun to dig into. I tried to optimize Babylon for a few days at work before giving up - my general rule of thumb is that if I'm about to refactor more than 20% of a codebase its much, much faster to rewrite it if I'm already familiar with the problem space. Took about two weeks to write a proprietary renderer running circles around Babylon - but only supported static meshes. Babylon was useful to prototype but the mobile performances aren't there, even after days of profiling and optimizing every slow path it was still an order of magnitude slower than an in-house renderer designed for performance from the ground up.

dandare 10y ago

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

kevinsimper 10y ago
It is a JavaScript library to work with WebGL in the browser :)
satori99 10y ago
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/

frik 10y ago

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

augustt 10y ago

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

dispose13432 10y ago

What's the license of this? GitHub doesn't seem to say?

dispose13432 10y ago
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 10y ago
  Yup! MIT ^^

EGreg 10y ago

The menus appear behind the page on mobile.

ngokevin 10y ago

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.