[X3D-Public] jQuery plugin for working with x3dom scenes

[Nathaniel Gibson]

Hey everyone, I've been working on a plugin for jQuery which allows easy
and chained building of an x3dom scene.  I know that this is the x3d main
newsgroup, so I apologize if this might be a little off topic since it's
based on x3dom (a browser based standard for viewing x3d scenes)

 I have it up as a project on GitHub right now...  My basic goal is to make
it so that anyone can build an x3d scene almost like they build new X3DOM
elements and animate in jQuery.  I was really impressed with what I've seen
so far on the x3dom front, so I'm trying to make it more accessible for the
common web programmer (without having to learn rotation matrices, do a lot
of trigonometry, etc.)

Besides that, I am a web developer who doesn't really like to write so many
< and > tags, so for me it just makes sense and is way more efficient.
Here's some of the features I already have implemented (some are buggy
yet)...

   - A 3D cursor (invisible) for each parent DOM object so that if you
   create children of that object, you can control where the offset is.
   - Quick and simple animations which add the "ROUTE" tags that are
   necessary for routing PositionInterpolator, RotationInterpolator and Scalar
   interpolations.
   - Ability to send movements and rotations, etc. as an array of data
   - Rotation can be either expressed in [x, y, z, w] with radians (normal
   way), and likewise can be expressed in simply [x, y, z] using degrees (i.e:
   [180, 0, 0]) where javascript handles the conversion matrices, etc.
   - Full jQuery chainability for rapid development purposes.
   - A "container" transform which is just an empty transform (a very clean
   way to load parts of the scene using jQuery's "load" method [ajax])
   - Many other features: notes taken in the x3djq.js file for all the
   different functions

Here's some example code for instance of building a solar system using the
x3dom jQuery plugin.  It sets up all 9 planets, (yes, I classify pluto as a
planet [old habit],) then sets up viewpoints for each planet as well as
orbits for those planets.

//solar system setup
$('scene').empty().x3d('setcursor',[0,0,0]).x3d('container','system').x3d('view','systemview',[0,0,30],[0,0,0],.5);

//Set up planets and sun's orbit containers and fill them with planets and
info, then start rotation
$('#system').x3d('container','sun_orbit').x3d('container','mercury_orbit').x3d('container','venus_orbit').x3d('container','earth_orbit').x3d('container','mars_orbit').x3d('container','jupiter_orbit').x3d('container','saturn_orbit').x3d('container','uranus_orbit').x3d('container','neptune_orbit').x3d('container','pluto_orbit');
$('#sun_orbit').x3d('sphere','sun',{radius: 5});
$('#mercury_orbit').x3d('setcursor',[5.5,0,0]).x3d('sphere','mercury',
{radius:
.05}).x3d('setcursor',[5.6,1,0]).x3d('text','mercurytitle','Mercury',{size:
20}).x3d('view','mercuryview',[7,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],2.4,true);
$('#venus_orbit').x3d('setcursor',[6,0,0]).x3d('sphere','venus', {radius:
.15}).x3d('setcursor',[6.2,1,0]).x3d('text','venustitle','Venus',{size:
20}).x3d('view','venusview',[8,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],6.13,true);
$('#earth_orbit').x3d('setcursor',[6.5,0,0]).x3d('sphere','earth', {radius:
.152}).x3d('setcursor',[6.8,0.8,0]).x3d('text','earthtitle','Earth',{size:
20}).x3d('view','earthview',[9,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],10,true);
$('#mars_orbit').x3d('setcursor',[7,0,0]).x3d('sphere','mars',{radius:
.075}).x3d('setcursor',[7.3,0.5,0]).x3d('text','marstitle','Mars',{size:
20}).x3d('view','marsview',[10,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],18.82,true);
$('#jupiter_orbit').x3d('setcursor',[9.5,0,0]).x3d('sphere','jupiter',{radius:
1.6}).x3d('setcursor',[12,1,0]).x3d('text','jupitertitle','Jupiter',{size:
20}).x3d('view','jupiterview',[15,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],118.618,true);
$('#saturn_orbit').x3d('setcursor',[13,0,0]).x3d('sphere','saturn',{radius:
1.5}).x3d('setcursor',[14.5,1,0]).x3d('text','saturntitle','Saturn',{size:
20}).x3d('view','saturnview',[16,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],294.571,true);
$('#uranus_orbit').x3d('setcursor',[15.5,0,0]).x3d('sphere','uranus',{radius:
.6375}).x3d('setcursor',[16.5,1,0]).x3d('text','uranustitle','Uranus',{size:
20}).x3d('view','uranusview',[18,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],843.233,true);
$('#neptune_orbit').x3d('setcursor',[18,0,0]).x3d('sphere','neptune',{radius:
.6}).x3d('setcursor',[18.8,1,0]).x3d('text','neptunetitle','Neptune',{size:
20}).x3d('view','neptuneview',[20,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],1647.9,true);
$('#pluto_orbit').x3d('setcursor',[19.5,0,0]).x3d('sphere','pluto',{radius:
.02}).x3d('setcursor',[20,0,0]).x3d('text','plutotitle','Pluto',{size:
20}).x3d('view','plutoview',[21,0,0],[0,90,0],.5).x3d('rotate',[[0,180,0],[0,360,0]],2481,true);

//Set up planet group (planet, moons, views, text)
$('#mercury').x3d('setmaterial',{ texture: 'solarsys/Mercury.jpg'});

$('scene').x3d('changeview','systemview');

If you were to link x3djq.js in your document and put this script in as
well, you can see the example.  I've also put up a temporary working
example on my site at: http://webdombot.com/mediaSpydr/solarsystem.html ...
taking a look at the DOM through firebug, etc. you will find that creating
the scene through this plugin has reduced the number of characters I had to
type in my x3dom scene to about 15% of what it would be if I had to write
all of those html tags (3,000 some characters compared to 19,000+
characters).  Besides that, as a developer I wouldn't have to teach myself
all about routing, etc. concepts just to build animations.

There is a list of things yet to be done on the GitHub project so that
others can take a look at what's working and not.

I could really use some community support on this.  Anyone who knows jQuery
and is willing to pitch in please do.  Let's make x3dom a web standard and
get people building 3d websites!

The GitHub project is located at:
https://github.com/newsbubbles/x3dom-jQuery-Plugin

I'm working on the animation system and texturing at the moment.  My
overall goal is to have an animation object which allows for simple or
advanced position/scale/rotation animation, and there's a lot more to come.

I welcome anyone who's interested in joining the project.

Nathaniel
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://web3d.org/pipermail/x3d-public_web3d.org/attachments/20120122/40e3009e/attachment.html>