Difference between revisions of "X3D and HTML5 examples"

From Web3D.org
Jump to: navigation, search
(reformat subheaders)
Line 1: Line 1:
* <b>Draft Example #1, Anchor link to new document</b>
+
Here are examples that show different ways of combining HTML web pages and X3D scenes.
 +
 
 +
== HelloWorld.x3d standalone scene ==
 +
 
 +
== X3D embedded in HTML4 page ==
 +
 
 +
== Anchor example ==
 +
 
 +
== Object example ==
 +
 
 +
==  Anchor link to new document ==
  
  
Line 7: Line 17:
 
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource.  
 
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource.  
  
* <b>Draft Example #2, embedded using object element. </b>
+
== X3D embedded using object element ==
  
 
     &lt;object name='x3dBlock' type='model/x3d+xml'  
 
     &lt;object name='x3dBlock' type='model/x3d+xml'  
Line 20: Line 30:
 
* Set of negotiated <param> pairs: initialization and runtime.
 
* Set of negotiated <param> pairs: initialization and runtime.
  
* <b>Draft Example #3, served as application/xhtml+xml</b>
+
== X3D served as application/xhtml+xml ==
  
 
       &lt;?xml version="1.0" encoding="utf-8" ?>
 
       &lt;?xml version="1.0" encoding="utf-8" ?>
Line 48: Line 58:
  
  
* <b>Draft Example #4, served as text/html</b>
+
== X3D served as text/html ==
  
 
       &lt;!DOCTYPE html>
 
       &lt;!DOCTYPE html>

Revision as of 08:27, 27 October 2009

Here are examples that show different ways of combining HTML web pages and X3D scenes.

HelloWorld.x3d standalone scene

X3D embedded in HTML4 page

Anchor example

Object example

Anchor link to new document

      <a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a>
  • html anchor link.
  • In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource.

X3D embedded using object element

    <object name='x3dBlock' type='model/x3d+xml' 
      allow-same-origin allow-scripts>
      <param name='src' value='aScene.x3d'>
        <table>...</table>
    </object>
  • Opens nested browsing context in parent block element.
  • Fallback to html. (table in this case.)
  • Connections with DOM via event listeners (DOM<=>SAI).
  • Set of negotiated <param> pairs: initialization and runtime.

X3D served as application/xhtml+xml

      <?xml version="1.0" encoding="utf-8" ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <style type=text/css'>
            x3d:X3D { height:200px;width:200px; }
          </style>
        </head>
        <body>
          <x3d:X3D name='x3dBlock'
            xmlns:x3d=
            "http://www.web3d.org/specifications/x3d-3.2.xsd">
            <Scene>
              <Shape>
                <Box size="4 4 4" />
              </Shape>
              <Shape>
                <Text string='"This is X3D Text"' />
              </Shape>
          </Scene>
        </x3d:X3D>
      </body>
      </html>


X3D served as text/html

      <!DOCTYPE html>
      <html>
        <head>
          <style type=text/css'>
            X3D { height:100%;width:100%; }
            svg { height:100%;width:100%; }
          </style>
        </head>
        <body>
          <X3D name='x3dBlock' type='model/x3d+xml' 
            version='3.3' profile='Interchange'
            allow-same-origin allow-scripts>
            <Scene>
              <Viewpoint description='Start' />
              <Shape>
                <Box size="4 4 4" />
              </Shape>
              <Shape>
                <Text string='"This is X3D Text"' />
              </Shape>
            </Scene>
          </X3D>
          <svg type='image/svg+xml' version="1.1">
            <ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
          </svg>
          <mathml>
            <mrow><mi> x </mi><mo> + </mo>
            <mrow><mi> a </mi><mo> / </mo><mi> b </mi>
            </mrow></mrow>
          </mathml>
          <ruby> WWW <rt>World Wide Web</rt>
          </ruby>
        </body>
      </html>