Thursday, September 8, 2011

Three.js and jsFiddle

So, the previous post touched on the fact that all of the free or open-source math and computer algebra environments that I've been looking at are a bit weak in the general 3D polygon mesh visualization department.  Since the purpose of the blog is to put up things people can immediately see and play with, I thought I'd see what was at hand these days for 3D visualization directly in the web browser.  Without too much effort, I found Three.js and jsFiddle.  Taken together, they can make toys like this:


Here, Three.js provides a nice browser-neutral 3D JavaScript library.  It can render via any of WebGL, HTML5 Canvas, or SVG back ends, to various levels of capability.  I've chosen SVG here, so this example should even work in Internet Eplorer :-)

JsFiddle provides a surrounding environment for web toys.  If you click on the "+" button above, you'll go off site to a full multi-pane view of the toy, where you can inspect and modify and play with the various parts of the HTML, CSS, and JavaScript.

I did hit one wrinkle to do with Internet Explorer 9, which I'll mention here in case anybody else runs up against it.  Originally, I was referencing Three.js from its canonical location on GitHub.  GitHub was exporting this with a MIME type of "text/plain", however, and it seems IE9 will no longer load <script> tags whose specified type does not match the MIME type of their source.  In the end, I needed to copy the script files I wanted to use to a different server that exports them as "application/javascript" to make things work correctly under IE9.

No comments:

Post a Comment