Developing 3D interfaces in JavaScript
So here's the latest challenge: create an interactive 3D user experience without the help of 3rd-party development tools
An old friend recently came to us with a new challenge: develop an interactive 3D user interface that works across all desktop and mobile devices. The traditional route might be to use a plug-in environment, such as Flash. But, having reported before on the development of HTML5, we seized the opportunity to develop the whole thing in JavaScript.
Determining the best development route was actually the most time-consuming part of the entire process. Having committed ourselves to native WebGL, we decided the three.js library would speed things up considerably.
Initially we attempted to render 3D environments onto equirectangular images, and map these onto the internal surfaces of spheres. Just pop a camera inside and Bob's your uncle! However, we encountered a couple of serious usability/quality issues and eventually ditched this approach.
Our preferred method now is to render and map 6 x distorted images onto the internal surfaces of a cube. Much faster & better quality than the sphere. We then added both mouse and touch controls so the cube can be rotated, and reversed them so you appear to spin in the direction of drag.
After that, add some inertia, XZY limits and Z-ordered clickable buttons and we're pretty much there! A fully-interactive 3D website user inteface in HTML5 & JavaScript that runs on all modern browsers / mobile devices.
Our friends are pleased with the results and anticipate demand for real-world applications very soon.