This post expands on the presentation titled "Driving the Evolution of the 3D Web". The code is include plus active links to the demos and examples.

Demos

• Drilling Rig Demo
• Car Configurator Demo
• Budha Demo
• 3D Stereo - Simple Model - Designed for smart phone with Google Cardboard
• JSON Encoding and Loader

Code

• Static Cone

• X3D Code
  <X3D>
    <Scene>
      <Shape>
        <Cone></Cone>
        <Appearance>
          <Material diffuseColor=”.6 0 1”></Material>
        </Appearance>
      </Shape>
    </Scene>
  </X3D>

• Static Box, Sphere, or Cynlinder uses
  • <Box/> for a box
  • <Sphere/> for a sphere
  • <Cylinder/> for a cylinder
• Stereoscopic Examples
  • Simple example
  • Scanned museum figurine
  • Classroom (full rotation)
  • Viewpoint code for all first two examples:
    

    <Viewpoint position='-.5 0 0’ orientation='0 1 0 -0.05' />
    <Viewpoint position='+.5 0 0’ orientation='0 1 0 +0.05' />

  • Create transform to change phone rotation to model rotation and (if necessary) transform model to scene origin

    <Transform id='x3d_viewpointR_alpha' translation='0 0 0' rotation='0 0 1 0'>
      <Transform translation='-170 -100 -200'>
        <Inline url='VAM_246-6-1870/kelpie.x3d' />
      </Transform>
    </Transform>

  • Javascript code to capture phone rotation and rotate model
    

    // Define degrees-to-radians constant, and get left & right Viewpoint elements
    var deg2rad = Math.PI / 180;
    var viewR = document.getElementById("x3d_viewpointR_alpha");
    var viewL = document.getElementById("x3d_viewpointL_alpha");
    
    // Add event listener for change in device orientation to update viewpoints
    window.addEventListener('deviceorientation', function(eventData) {
            alpha = (360-eventData.alpha) * deg2rad;
            rotation = "0 1 0 " + alpha;
            viewR.setAttribute('set_rotation', rotation);
            viewL.setAttribute('set_rotation', rotation);
        }, false);

  • Note that the actual code is different for future enchancements

Resources (not otherwise listed)

• Daly Realism's X3D Blog
• X3D-Edit
• More X3D Resources
• Web3D Consortium
• X3DOM