Driving the Evolution of the 3D Web: Links & Code

Submitted by Leonard Daly on Fri, 11/07/2014 - 20:56
Tags: 
x3d
x3dom

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

 

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)