Silly me. I spent the day building an app to show you how Three.js can make good use of DAT.GUI. But now I cannot get the app to run inside Blogger without taking over the top of the screen.
So you will only be able to view my 3D efforts for the day after the jump.
Let us say you are a developer working on a 3D project that will require a good amount of human interaction. The project is still at an early stage and you are not sure what sort of human interaction yet but certainly a good amount. Certainly there will be a lot of chopping and changing in the coming days.
Several considerations come to mind out of situations like these:
You don't want to spend time deciding what things should look like at this stage. But you want to be able to demo various interactions to the designers and your other people. You also do not want to spend much typed prototyping widgets that may never be used. Therefore you would like a set of controllers like checkboxes, sliders, text boxes and buttons that you can easily drop into mockups.
Enter DAT.DUI.
DAT.GUI is an FOSS set of controllers written in JavaScript that you can easily add to a Three.js app or any other JavaScript app. It was developed by the team that developed the splendid ro.me app. The source code and a minified version are available at Google Code. The tutorial is a lot of fun and is available via chromeexperiments.
There is also a version available in the Three.js library but it is a much earlier version and is missing a lot of cool features such as the ability to open and close folders. Mr.Doob has said that would be upgrading the version in Three.js. Until that happens I will stay with the version at Google Code.
Where can you see DAT. GUI in action? Here's a link to use of DAT.GUI in a very pretty 3D demo on jsFiddle using the xtk toolkit. Another great use is MD2 MorphTargets Three.js demo. Here the interface is completely generated by algorithm. And there is a tutorial at learningthreejs.com
Working with DAT.GUI is quite straightforward. There's a config object that holds all the defaults to be used The DAT.GUI object creates a default menu and allows you to add things to it - suchas as booeans and sliders. I had little issue connecting DAT.GUI to Three.js. One issue is with the color control. It outputs data in different formats depending. I have not totally figured out the 'depending' part and it's also an issue listed in the Google Code repository. Also I can't - as of this writing - made the callbacks work properly on Blogger. One callback works all the time, whereas in the standalone app. people get to select which callback runs. This has more to with issues regarding my tiny brain than anything else and will be fixed before too long.
In the whole I find DAT.GUI a great help in getting an app started. For example, look at the Three.js canvas orthographic camera demo. This demo looks like something from way back in the beginning of time, but it would certainly look better with a DAT.GUI interface.
There are a number of aspects of DAT.GUI that I have not played with yet. These include some style aspects such as setting width and color as well as data preserving aspects such as presets and saving. The issue with going to the next level involves whether you time is better spent on DAT.GUI or jumping into a real tool such as jQuery. Come back here in six months time or so and you will most likely seen which direction I have will have taken.
Link to code for demo in header
http://jaanga.github.com/blode/#jaanga.githb.com/Blode/DAT.GUI-User-Controls
No comments:
Post a Comment