I think this is so cool that we can have interactive 3D animations on a webpage with no plugins…
Click,hold,move mouse=rotate; Alt+click=zoom in/out; Ctrl+click=move object
Here’s how to rotate an object using X3D
<html> <head> <meta http-equiv="Content-Type"/> <title>Rotate Object</title> <link rel="stylesheet" type="text/css" href="http://www.x3dom.org/x3dom/src/x3dom.css"/> <script type="text/javascript" src="http://www.x3dom.org/x3dom/src/x3dom.js"></script> </head> <body> <X3D width="500px" height="500px"> <scene> <transform DEF='cube'> <shape> <appearance> <material diffuseColor='red'/> </appearance> <box></box> </shape> </transform> <timeSensor DEF='clock' cycleInterval='8' loop='true'></timeSensor> <orientationInterpolator DEF='spinThings' key='0 0.25 0.5 0.75 1' keyValue='0 1 0 0 0 1 0 1.57079 0 1 0 3.14159 0 1 0 4.71239 0 1 0 6.28317'></orientationInterpolator> <ROUTE fromNode='clock' fromField='fraction_changed' toNode='spinThings' toField='set_fraction'></ROUTE> <ROUTE fromNode='spinThings' fromField='value_changed' toNode='cube' toField='set_rotation'></ROUTE> </scene> </X3D> </body> </html> |
This example is from the video made by this fine fellow below. I added the rest of the line that the video cut off.
So check it out and follow along with his great explanation here: