Driving the Evolution of the 3D Web: Links & Code
Submitted by Leonard Daly on Fri, 11/07/2014 - 20:56
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