X3DOM CAD

Resources and Issues related to using the CADGeometry component in models incorporated into HTML5 web pages and rendered in a browser pages using X3DOM implemented with Javascript+WebGL or Flash Player

X3DOM is one way to integrate an X3D model into into an HTML5 web document. ( see X3D_and_HTML5 ). The X3DOM implementation is a library of Javascript classes and functions which, after an HTML5 document is loaded, search the Document Object Model tree of the document for X3D elements and renders the content in an HTML5 canvas element using WebGL calls or Flash Player, on browsers that do not suport WebGL. The Javascript code is open source and available in a Github project. The Javascript code can also be loaded from a singe minimized script at URL http://www.x3dom.org/x3dom/example/x3dom.js . X3DOM offers a partial but expanding coverage of X3D nodes; the nodes which can be rendered using X3DOM in an HTML5 page is documented in the Node Type Tree. The X3DOM classes do not implement any of the nodes in the CADGeometry component. (As of version 1.4; March 2013) The coverage of X3D nodes can be extended through additional Javascript code which extends the X3DOM classes (see X3DOM Components)

X3dToX3dom.xslt is an XSLT 2 stylesheet which will generate an HTML5 document embedding an X3D input model. This stylesheet can be run using a stand-alone XSLT2 engine or from within the X3D-Edit tool.

CADGeometry.js Javascript code implementing the CADLayer, CADAssembly, CADFace, and CADPart nodes of the X3D CADGeometry component. This Javascript should be loaded by a webpage after the core components of the X3DOM Javascript have been loaded. Example:

   <script type="text/javascript" src="http://www.x3dom.org/x3dom/example/x3dom.js"/>
   <script type="text/javascript" src="http://www.kshell.com/pages/x3dom/x3dom_cad/scripts/CADGeometry.js"/>

X3D Models

• laser_assembly Converted from a STEP file in the National Design Repository.

• CadTeapot Copied from the Web3D Basic Examples CadTeapot model but modified so that each of the Appearance nodes for the 4 parts of the teapot is independently defined.

X3DOM Pages

These pages were generated using a modification of the X3dToX3dom.xslt script (modified XSLT stylesheet here). These pages load the CADGeometry extension to X3DOM after loading the X3DOM core classes.

• laser_assembly page The laser_assembly model embedded in a web page rendered with X3DOM.
• CadTeapot page The CadTeapot model embedded in a web page rendered with X3DOM.

X3DOM -- Product structure pages

• laser_assembly product structure The laser_assembly model in a page, with additional linked HTML/Javascript elements to display the assembly tree.
• CadTeapot product structure The laser_assembly model in a page, with additional linked HTML/Javascript elements to display the assembly tree.