The importance of examples in learning a new language cannot be overstated. This section contains illustrative examples of using XSeen. As has been discussed there are a number of similarities between XSeen and A-Frame and X3D. These will be obvious in the examples. It is possible to intermix tags from each language in a manner that makes sense.

The examples progress from the less complex to more complex. As with all other parts of XSeen, everything here is Creative Commons Share-Alike (CC BY SA) or one of the two open source licenses GPL and MIT. See the License page for details. In the discussion below a bolded word is a XSeen tag - italized word is an XSeen attrubute. As all of this resides in an HTML document, all tags and attribute names are case insensitve.

This page is being updated to reflect V0.5 of the library. The text below the line in the V0.4 section is obsolete for the current version but still applies to V0.4. It will be removed when the V0.5 documentation is complete.

V0.5 Examples

1. Simple structure [source]
   This file defines the basic structure needed for most all XSeen scenes. It defines the working canvas (scene), lights (light), and a (moving) camera (camera). This camera circles around the origin of the scene by using movingtype as 'turntable'.
2. Simple solid shapes [source]
   This example builds on (1) by adding seven pieces of geometry. These are the pre-defined shapes in XSeen. Each shape has a different color so it possible to see the combined effect of geometry and light color along with shadowing.
3. Environment
   There are three examples that illustrate environmental effects
   1. Uniform sky color [source]. The background tag with skycolor specifies a uniform color for the background.
   2. Background panorama [source]. The background tag along with src (or srcfront, srcright, srcback, srcbottom, srcleft, srctop) allows a background panorama to be specified.
   3. Fog [not yet]
4. Navigation
   Using the navigation tag XSeen supports a several navigation models
   1. orbit [source]
   2. trackball/examine [source]
   3. fly [not available]
   4. mobile [source]
5. Cameras
   XSeen has three types of cameras - monoscopic perspecive, stereoscopic perspecive, and monoscopic orthographic.
   1. monoscopic perspecive [source]
   2. stereoscopic perspecive [source]
   3. monoscopic orthographic [source]
   4. stereoscopic with mobile navigation [source]
6. Lights
   Lights are used in all examples. There is no special expample at this time illustrating the various lights.
   1. Directional [source]
   2. Point [source]
   3. Spot [source]
7. Textures
8. External Models [source]
9. Controls
   These connect HTML with XSeen or XSeen to XSeen elements. They allow information to be passed back and forth between traditional HTML portions of the page and XSeen portions. Also allowed are XSeen to XSeen events.
10. 3D Styles
    1. Static [source]
    2. Reactive [source]
11. Animation
    1. Models [source]
    2. Attributes [source]
    3. Multiple keyframes [source]
12. Labels
    Labels are used to identify objects in the scene. A label contains an hyper-text note and a leader line. The leader line connects the note (from the center of the region) to the origin of an object in the scene. The leader line tracks both objects if either should move.  Multiple leader lines from a single label are allowed. The label is expressed entirely in HTML.
    1. Fixed [source]
    2. Draggable [source]
    3. Tracking [source]
    4. Multiple [source]
13. Audio (not yet available)
14. Video (not yet available)
15. WebVR (in progress)

V0.4 Examples

This section has been replaced. Do not rely on any information here. It is here solely for historical purposes.

1. A-Frame Shape [source]
   This example shows how to to create a display of an A-Frame shape (box). Because this is the first example several items are illustrated in this example
   1. Define tag block for the 3D screen environment (scene). It specified the desired size of the 3D canvas with the attributes width and height.
   2. Viewpoint definition, including initial position and automatic animation of the viewpoint
   3. Lighting (light). All used lights are directional lights. Other lights will be shown later
   4. A-Frame tag (a-box). This is a 2x2x2 box that is colored orange
2. X3D Shape [source]
   This is the same as (1), except it uses the X3D mechanism for creating the box geometry and color. The X3D-based tags are
   1. shape for containing the geometry and appearance
   2. box for defining the geometry
   3. appearance for containg all aspects of the shape's appearance
   4. material for defining shape-wide apperance characteristics. Textures will be illustrated later.
3. A-Frame & X3D Shape [source]
   This is a merge of (1) and (2). It shows how the two types of nodes can be combined. The new tag (transform) introduced in this example moves the shape in the 3D space. It allows any shape-type tags as children. All A-Frame pre-defined geometry tags are shape-type tags.
4. Textures on shapes [source]
   This example introduces a new shape and the texturing of the object
   1. X3D's cone and A-Frame's a-cone tags are illustrated. The cones both have a height of 2 and a bottom radius of 1.
   2. The X3D-style definition uses the tag imageTexture to texture an image on geometry. A-Frame style uses the map attribute.
5. Scene-wide Resource Definitions [source]
   A-Frame introduced the concept of assets as scene-wide resource definitions. XSeen is preliminary support for that concept. Assets are defined and referenced by id value. XSeen supplies string substitution for the attribute values when a valid asset id is referenced. This is illustrated with the diffuseColor attribute of material, url attribute of imageTexture, color and map attributes of a-cone.
6. All Pre-defined Shapes [source]
   This example displays all pre-defined shapes and introduces a new style of user interaction with the scene. There are 13 (total) pre-defined shapes. The torus is at the back of the scene. The X3D style nodes are on the left. Next to them are the equivalent A-Frame style nodes. The third shape was selected to be similar. The geometry list below lists the nodes from front to back, left to right (with the torus in the back).
   1. Shapes
      1. box
      2. sphere
      3. cylinder
      4. cone
      5. a-box
      6. a-sphere
      7. a-cylinder
      8. a-cone
      9. a-octahedron (8-sided regular polyhedron)
      10. a-dodecahedron (20-sided regular polyhedron)
      11. a-icosahedron (12-sided regular polyhedron)
      12. a-tetrahedron (4-sided regular polyhedron)
      13. torus
   2. User Interaction
      1. Viewpoint does not have automatic motion in this example.
      2. NavigationMode defines how the user can move the camera around the scene. This particular style is called 'orbit' and allows the user to zoon-in and out; and rotate the scene left-right, and up-down. It maintains the 'up' throughout all motion.
7. glTF Animated Model [source]
   This is a simple animated model of morphing spheres. The model is loaded with the model tag. This uses the same navigation as the previous (All Shapes) example.
8. Animated Model with Controls [source]
   The same animated model (morphing spheres) is used with regular HTML form buttons overlaying the 3D drawing canvas. The buttons control the Navigation from either Turntable or Orbit using regular HTML/DOM events. XSeen can internally route events from HTML elements to XSeen nodes and fields.
9. Full-Screen Stereographic display [source]
   Again the same model with controls as the previous example. One of the services provided by XSeen is to toggle full screen display. There is also a stereographic Viewpoint that is set using the type field of Viewpoint.
10. Mobile Device Navigation [source]
    Another navigation mode supports mobile device navigation for 3 rotational axis viewing. This mode is used for viewing an environment. It uses the device's OrientationSensor to determine a look direction. This uses the type field of NavigationMode.
11. Stereograph Mobile Device (VR) [source]
    Using the morphing sphere model and animation, mobile device navigation, and stereographic viewpoint provides a VR experience for simple head units such as Cardboard, Daydream, GearVR. This is a combination of examples 9 and 10.