X3D – how to rotate an object

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:

Leave a Reply