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

[Sven-Erik Tiberg]

Hi Nathaniel
Interesting.
Have you looked into using your animation JQuery lib x3djq.js for h-anim animation?

Note: Presently looking into JQuery to combine it with strophe.js to run XMPP for MultiUser x3d spaces.

/Sven-Erik Tiberg


From: x3d-public-bounces at web3d.org [mailto:x3d-public-bounces at web3d.org] On Behalf Of Nathaniel Gibson
Sent: den 22 januari 2012 05:34
To: X3D-Public at web3d.org
Subject: [X3D-Public] jQuery plugin for working with x3dom scenes

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/20120123/fdc65485/attachment.html>