<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri","sans-serif";
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:1823112702;
mso-list-template-ids:-2065545344;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:36.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:72.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:108.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:144.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:180.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:216.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:252.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:288.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:324.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="SV" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Hi Nathaniel<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Interesting.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Have you looked into using your animation JQuery lib
</span><span lang="EN-US">x3djq.js for h-anim animation?<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">Note: Presently looking into JQuery to combine it with strophe.js to run XMPP for MultiUser x3d spaces.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D">/Sven-Erik Tiberg<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span lang="EN-US" style="font-size:10.0pt;font-family:"Tahoma","sans-serif"">From:</span></b><span lang="EN-US" style="font-size:10.0pt;font-family:"Tahoma","sans-serif""> x3d-public-bounces@web3d.org [mailto:x3d-public-bounces@web3d.org]
<b>On Behalf Of </b>Nathaniel Gibson<br>
<b>Sent:</b> den 22 januari 2012 05:34<br>
<b>To:</b> X3D-Public@web3d.org<br>
<b>Subject:</b> [X3D-Public] jQuery plugin for working with x3dom scenes<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">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)<br>
<br>
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.)<br>
<br>
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)...<o:p></o:p></p>
<ul type="disc">
<li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
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.<o:p></o:p></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
Quick and simple animations which add the "ROUTE" tags that are necessary for routing PositionInterpolator, RotationInterpolator and Scalar interpolations.<o:p></o:p></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
Ability to send movements and rotations, etc. as an array of data<o:p></o:p></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
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.<o:p></o:p></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
Full jQuery chainability for rapid development purposes.<o:p></o:p></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
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])<o:p></o:p></li><li class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;mso-list:l0 level1 lfo1">
Many other features: notes taken in the x3djq.js file for all the different functions<o:p></o:p></li></ul>
<p class="MsoNormal">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.<br>
<br>
<span style="font-size:7.5pt;font-family:"Courier New"">//solar system setup<br>
$('scene').empty().x3d('setcursor',[0,0,0]).x3d('container','system').x3d('view','systemview',[0,0,30],[0,0,0],.5);<br>
<br>
//Set up planets and sun's orbit containers and fill them with planets and info, then start rotation<br>
$('#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');<br>
$('#sun_orbit').x3d('sphere','sun',{radius: 5});<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
$('#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);<br>
<br>
//Set up planet group (planet, moons, views, text)<br>
$('#mercury').x3d('setmaterial',{ texture: 'solarsys/Mercury.jpg'});<br>
<br>
$('scene').x3d('changeview','systemview');</span><br>
<br>
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:
<a href="http://webdombot.com/mediaSpydr/solarsystem.html">http://webdombot.com/mediaSpydr/solarsystem.html</a> ... 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.<br>
<br>
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.<br>
<br>
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!<br clear="all">
<br>
The GitHub project is located at: <a href="https://github.com/newsbubbles/x3dom-jQuery-Plugin">
https://github.com/newsbubbles/x3dom-jQuery-Plugin</a><br>
<br>
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.<br>
<br>
I welcome anyone who's interested in joining the project.<br>
<br>
Nathaniel<o:p></o:p></p>
</div>
</body>
</html>