X3DOM Examples

For viewing the exmaples, you need a recent browser that supports WebGL. For more information on browser support, please have a look at this page.

HTML Integration

• XHTML Hello World Basic X3DOM in XHTML example
• HTML Hello World Basic X3DOM in HTML example
• Background Opacity Background and object opacity
• 3D object in front of text A 3D object in front of HTML text
• Multi-View Multiple X3D scenes in a single XHTML document
• id/USE Model with id/DEF names and USE/Route references
• Simple DOM updates Model with DEF/USE references
• JQuery Manip Using
• jQuery to manipulate an attribute
• AddRemove Nodes Simple example how to add/remove nodes
• HTML Events on 3D objects Simple onclick() event on 3D objects
• Inline Scene which references an external box model
• CSS Transform Utilizing 3D-CSS Transforms to transform a X3D-Node
• CSS Integration Shows how to style your X3D element using CSS (includes Fullscreen example)
• Generic Texture Node which utilizes an img, video or canvas tag for texturing

X3D Render Feature

• Primitives Box, Cone, Cylinder and Sphere Primitives
• Single Mesh Model with a flat hierarchy
• Texture Model with multiple external textures
• Text Model with 3D Text
• Animated Light Animated Light
• Shadow Experimental Shadows

The following are large models and may take some time to load:

• Single Mesh Model with a flat hierarchy
• Transform Hierarchy Model with a mixed Transform/Group hierarchy
• Vertex Color Model with color per vertex attributes
• Vertex ColorRGBA Node with color+alpha per vertex attribute
• MultiIndex geometry Multi-Index geometry
• Inline Scene which references an external bunny model
• ComposedShader Shader-based material with cube and bump map

X3D Media integration Feature

• Sound Sound emitter (not spatialized)
• Video Texture Model with video texture with sound

X3D Animation Feature

• TimeSensor Multiple animations with a single TimeSensor and fanOut
• Interpolator Multiple Position/Orientation-Interpolator animations
• Coordinate Interpolator used to animate a mesh
• Follower Smooth transition with Position-, Orientation- and Color-Chaser.

Application Example

• Paraview Export Visualization of turbulent flow and (pickable) temperature distribution
• Car configurator A simple application prototype
• Augmented Reality via Flash FLARToolkit marker tracking - online data version
• Augmented Reality via Flash FLARToolkit marker tracking - offline data version

System Feature Tests and debugging

• Runtime object Showing use of runtime object
• Param tag Showing use of param tag for passing config options
• Image Formats Test browser/OS for image formats
• Image Channels Test Test browser/OS for image/channel combination
• Debug Log Shows how to use the debug log and statistic HUD