A bit of background...

Ok, so I want to reiterate that I am first and foremost a programmer of native languages such as C/C++, Java, etc that execute outside of the browser. But I have recently gotten more interested in web development and I have especially been excited about it after having gone through the basics of network programming with sockets (bsd and winsock). And with the new developments with HTML5 (application development) and cross-platform and mobile apps. However, I haven't touched any markup XML or HTML or any javascript in years, I am more than a little rusty with it. I am however familiar with the language concepts involved in javascript. Interpreted, dynamically typed, etc. It has taken me some time to adjust to writing markup and scripting then simply opening it up from a webserver in a browser rather than compiling my code and executing it natively on the machine. I cannot believe the amount of time that you can save not having to compile between small changes in code and testing. However, I have also found out the hard way, that with the lax structure of html and no compiler for javascript to tell you when you have simple mistakes in your code you can spend a lot of time running around in circles not knowing what is wrong.

Also another thing I am not used to is dealing with a rather small, mostly undocumented, open source code base. From using it so far I feel that Three.JS has the potential to be a great 3D tool for app developers. However, there is almost no docs and many many examples. You must learn by pouring through the more than one hundred complete open source example apps included at the three.js github page. Another problem is that I have not settled on a very good development environment for HTML5 developemnt (game, 3D, or otherwise). I am currently using Eclipse with as many web related plugins as I can get. I have looked at one called Aptana and I think I am going to download it. I believe it is a replacement for the HTML editor which provides some intellisense-like features. Currently using javascript IDE build of eclipse with all the indigo web plugins + the web toolkit plugins I seem to get decent autocomplete for the three.js library. It is slow when filling out the list of functions in the THREE namespace and it seems to eat up RAM and eclipse doesn't like the lack of semicolons that I recently found out is common in javascript (eclipse has me wishing the spec wasn't so lax). I am now running Ubuntu 12.04 Linux on my Dell Studio XPS 1647 i5 laptop. It runs pretty well. ATI's proprietary driver for linux is not as good as it is for Windows (which is to be expected) and my CPU fan seems to kick on at the slightest load. But my speeds and everything seem decent. After using Linux I am amazed as a developer at the level of control you can have with an open source OS. It is the same feeling I got when I rooted my phone (XD Android).

Anyway, I figured out a couple things that were holding me back from just popping out a demo better than my last. First I had some problems that it seemed my textures didn't want to load right some of the time. It was driving me crazy because it seemed that the same code would do different things at different times for no apparent reason. I then read somewhere that the texture loader used by three.js apparently can only load certain (perhaps all) textures from a webserver, not the hard disk. This was surprising to me but I suppose it leverages something server side (ajax or something) in order to load textures better. Anyway, after firing up apache2 on my linux box I had all the textures working in no time. My next step was to add lighting to my scene to give it more depth (things look kind of flat when still if there is no lighting effects). Seemed like it was giving me trouble as well. Only Lambert and Phong materials will work with lighting I come to discover.

Anyway, I am getting ready to post-up the demo as well as walkthrough of the source I have so far. I am using a three.js boilerplate and extension library aptly named THREEx (github). It seems to be pretty good. I however eventually had trouble with lighting and had to redownload and load the latest minified library from the original three.js library in order to get my ambient lights going. So I'm not sure if I could have accidentally modified it or if there is something broken with an update somewhere perhaps. Anyway, I will include a zip of the entire project.

The boilerplate starts you with an FPS output onscreen, and f to go fullscreen, and p for screenshot. I add in a flag for webgl detection and show you how to customize your scene to look best on multiple possible renderers. Also I add to the onscreen output HUD what renderer (webgl or canvas) the demo is currently running on. (You might not think you need this, but it has surprised me a couple times and actually been useful).