Difference between revisions of "X3D and HTML5 examples"

From Web3D.org
Jump to: navigation, search
(keep examples separate from description)
 
m (Removed TODO item related to XHTML, XHTML being yet another has-been technology)
 
(104 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
Here are several examples that show different ways of combining HTML web pages and X3D scenes.
  
 +
== HelloWorld.x3d standalone scene ==
  
−
* Joe - draft Example #1, nnchor link to new document
+
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]
 +
shows a simple standalone example
 +
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and
 +
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])
  
 +
  <?xml version="1.0" encoding="UTF-8"?>
 +
  <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">
 +
  <X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance'
 +
    xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'>
 +
    <head>
 +
      <meta name='title' content='HelloWorld.x3d'/>
 +
      <meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/>
 +
    </head>
 +
    <Scene>
 +
      <Group>
 +
        <Viewpoint centerOfRotation='0 -1 0'
 +
          description='Hello world!' position='0 -1 7'/>
 +
        <Transform rotation='0 1 0 3'>
 +
          <Shape>
 +
            <Sphere/>
 +
            <Appearance>
 +
              <Material diffuseColor='0 0.5 1'/>
 +
              <ImageTexture url='"earth-topo.png"' />
 +
            </Appearance>
 +
          </Shape>
 +
        </Transform>
 +
        <Transform translation='0 -2 0'>
 +
          <Shape>
 +
            <Text solid='false' string='"Hello" "world!"'>
 +
              <FontStyle justify='"MIDDLE" "MIDDLE"'/>
 +
            </Text>
 +
            <Appearance>
 +
              <Material diffuseColor='0.1 0.5 1'/>
 +
            </Appearance>
 +
          </Shape>
 +
        </Transform>
 +
      </Group>
 +
    </Scene>
 +
  </X3D>
  
−
      &lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a>
+
== HTML Anchor link to X3D document ==
  
−
      html anchor link.
+
HTML anchor links allow an HTML page to load the contents of an X3D scene.
−
      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.  
+
  
−
* Joe - draft Example #2, embedd using object element. 
+
HTML source:
  
−
    <object name='x3d' type='model/x3d+xml' allow-same-origin allow-scripts>
+
      Here is my
−
          <param name='src' value='aScene.x3d'>
+
      &lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.
−
        <ztable>...</table>
+
−
      </object>
+
−
      Opens nested browsing context in parent block element.
+
−
      Fallback to html table. (s z is artifact).
+
−
      Connections with DOM via event listeners (DOM<=>SAI).
+
−
      Set of negotiated <param> pairs: initialization and runtime.
+
  
−
* Joe - draft Example #3, served as application/xhtml+xml
+
HTML result:
 +
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.
  
−
       <?xml version="1.0" encoding="utf-8" ?>
+
Typically Web browser responses to a user selecting the link:
−
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided
−
       <html xmlns="http://www.w3.org/1999/xhtml">
+
* If X3D file format is unrecognized, browser might save file or else provide the user a choice to launch an external application (such as an X3D viewer or editor)
−
         <head>
+
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)
−
           <style type=text/css'>
+
 
 +
== X3D embedded using HTML5 object element ==
 +
September 2022 status: There are no publicly distributed plug-ins for current web browsers that display X3D content
 +
referenced in an object tag. Current  practice is to render X3D on a web page using a javascript library such as [https://xwdom.org X3DOM] or [https://github.com/create3000/x_ite X_ITE]
 +
 
 +
 
 +
    &lt;object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts>
 +
       &lt;param name='src' value='aScene.x3d'>
 +
        &lt;-- fallback HTML here -->
 +
    &lt;/object>
 +
 
 +
* Goal for this example is to show some HTML5-specific attributes
 +
* Opens nested browsing context in parent block element
 +
* Set of negotiated <param> pairs for initialization and runtime
 +
 
 +
== X3D served as text/html (no namespace prefix) ==
 +
 
 +
      &lt;!DOCTYPE html>
 +
      &lt;html>
 +
        &lt;head>
 +
          &lt;style type=text/css'>
 +
            X3D { height:100%;width:100%; }
 +
            svg { height:100%;width:100%; }
 +
          &lt;/style>
 +
        &lt;/head>
 +
        &lt;body>
 +
          &lt;X3D name='x3dBlock' type='model/x3d+xml'
 +
            version='3.3' profile='Interchange'
 +
            allow-same-origin allow-scripts>
 +
            &lt;Scene>
 +
              &lt;Viewpoint description='Start' />
 +
              &lt;Shape>
 +
                &lt;Box size="4 4 4" />
 +
              &lt;/Shape>
 +
              &lt;Shape>
 +
                &lt;Text string='"This is X3D Text"' />
 +
              &lt;/Shape>
 +
            &lt;/Scene>
 +
          &lt;/X3D>
 +
          &lt;svg type='image/svg+xml' version="1.1">
 +
            &lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
 +
          &lt;/svg>
 +
          &lt;mathml>
 +
            &lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo>
 +
            &lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi>
 +
            &lt;/mrow>&lt;/mrow>
 +
          &lt;/mathml>
 +
          &lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt>
 +
          &lt;/ruby>
 +
        &lt;/body>
 +
      &lt;/html>
 +
 
 +
== X3D served as application/xhtml+xml (with namespace prefix) ==
 +
 
 +
      &lt;?xml version="1.0" encoding="utf-8" ?>
 +
       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 +
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 +
       &lt;html xmlns="http://www.w3.org/1999/xhtml">
 +
         &lt;head>
 +
           &lt;style type=text/css'>
 
             x3d:X3D { height:200px;width:200px; }
 
             x3d:X3D { height:200px;width:200px; }
−
           </style>
+
           &lt;/style>
−
         </head>
+
         &lt;/head>
−
         <body>
+
         &lt;body>
−
           <x3d:x3d xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd">
+
           &lt;x3d:X3D name='x3dBlock'
−
             <x3d:Scene>
+
            xmlns:x3d=
−
               <x3d:Shape>
+
            "http://www.web3d.org/specifications/x3d-3.2.xsd">
−
                 <x3d:Box x3d:size="4 4 4" />
+
             &lt;Scene>
−
               </x3d:Shape>
+
               &lt;Shape>
−
               <x3d:Shape>
+
                 &lt;Box size="4 4 4" />
−
                 <x3d:Text x3d:string='"This is X3D Text"' />
+
               &lt;/Shape>
−
               <x3d:/Shape>
+
               &lt;Shape>
−
           </x3d:Scene>
+
                 &lt;Text string='"This is X3D Text"' />
−
         </x3d:x3d>
+
               &lt;/Shape>
−
       </body>
+
           &lt;/Scene>
−
       </html>
+
         &lt;/x3d:X3D>
 +
       &lt;/body>
 +
       &lt;/html>
  
 +
== Possible future X3D extension - Box has added html onclick event ==
  
−
* Joe - draft Example #4, served as text/html
+
      &lt;?xml version="1.0" encoding="utf-8" ?>
 +
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 +
      &lt;html xmlns="http://www.w3.org/1999/xhtml">
 +
        &lt;head>
 +
          &lt;style type=text/css'>
 +
            x3d:X3D { height:200px;width:200px; }
 +
          &lt;/style>
 +
        &lt;/head>
 +
        &lt;body>
 +
          &lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd">
 +
            &lt;Scene>
 +
              &lt;Shape>
 +
                &lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" />
 +
              &lt;/Shape>
 +
              &lt;Shape>
 +
                &lt;Text string='"This is X3D Text"' />
 +
              &lt;/Shape>
 +
          &lt;/Scene>
 +
        &lt;/x3d:X3D>
 +
      &lt;/body>
 +
      &lt;/html>
  
−
       <!DOCTYPE html>
+
* Note that addition of onclick attribute is not standard X3D
−
       <html>
+
* Preferred approach is probably to use X3D TouchSensor instead
−
         <head>
+
 
−
           <style type=text/css'>
+
== X3D -  Making direct updates on the tree ==
−
             X3D { height:200px;width:200px; }
+
 
−
           </style>
+
       &lt;?xml version="1.0" encoding="utf-8" ?>
−
         </head>
+
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
−
         <body>
+
       &lt;html xmlns="http://www.w3.org/1999/xhtml">
−
           <X3D>
+
         &lt;head>
−
             <Scene>
+
           &lt;style type=text/css'>
−
               <Shape>
+
             x3d:X3D { height:200px;width:200px; }
−
                 <Box size="4 4 4" />
+
           &lt;/style>
−
               </Shape>
+
         &lt;/head>
−
               <Shape>
+
         &lt;body>
−
                 <Text string='"This is X3D Text"' />
+
           &lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd">
−
               </Shape>
+
             &lt;Scene>
−
            </Scene>
+
               &lt;Shape>
−
          </X3D>
+
                 &lt;Appearance>
−
         </body>
+
                  &lt;Material diffuseColor="1 0 0"  />
−
      </html>
+
                &lt;/Appearance>
 +
                &lt;Box size="4 4 4" />
 +
               &lt;/Shape>
 +
               &lt;Shape>
 +
                 &lt;Text string='"This is X3D Text"' />
 +
               &lt;/Shape>
 +
          &lt;/Scene>
 +
        &lt;/x3d:X3D>
 +
         &lt;script type="text/javascript">&lt;! CDATA
 +
        var colSel = true;
 +
        function toggleRendering()
 +
        {
 +
            var button = document.getElementById("color");
 +
            colSel = !colSel;
 +
              if (colSel)
 +
                  button.value = "Blue";
 +
              else
 +
                  button.value = "Red";
 +
            var mat = document.getElementsByTagName("Material");
 +
            var n = mat.length;
 +
            var aMat = mat[0];
 +
            aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0"));
 +
            return false;
 +
        }
 +
        >&lt;/script>
 +
          &lt;p class="case"> &nbsp;
 +
            Dynamic material update
 +
            &lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" />
 +
          &lt;/p>
 +
          &lt;/body>
 +
        &lt;/html>

Latest revision as of 11:34, 6 September 2022

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

HelloWorld.x3d standalone scene

HelloWorld.x3d shows a simple standalone example (.html and .png) 

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">
 <X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' 
   xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'>
   <head>
     <meta name='title' content='HelloWorld.x3d'/>
     <meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> 
   </head>
   <Scene>
     <Group>
       <Viewpoint centerOfRotation='0 -1 0' 
         description='Hello world!' position='0 -1 7'/>
       <Transform rotation='0 1 0 3'>
         <Shape>
           <Sphere/>
           <Appearance>
             <Material diffuseColor='0 0.5 1'/>
             <ImageTexture url='"earth-topo.png"' />
           </Appearance>
         </Shape>
       </Transform>
       <Transform translation='0 -2 0'>
         <Shape>
           <Text solid='false' string='"Hello" "world!"'>
             <FontStyle justify='"MIDDLE" "MIDDLE"'/>
           </Text>
           <Appearance>
             <Material diffuseColor='0.1 0.5 1'/>
           </Appearance>
         </Shape>
       </Transform>
     </Group>
   </Scene>
 </X3D>

HTML Anchor link to X3D document

HTML anchor links allow an HTML page to load the contents of an X3D scene.

HTML source: 

      Here is my
      <a href='HelloWorld.x3d' title='Link to a new X3D document'>HelloWorld example</a> in X3D.

HTML result: 

       Here is my HelloWorld example in X3D.

Typically Web browser responses to a user selecting the link:

  • Show X3D scene, if an X3D plugin is installed or native support for X3D is provided
  • If X3D file format is unrecognized, browser might save file or else provide the user a choice to launch an external application (such as an X3D viewer or editor)
  • Show source (if http server X3D MIME type settings are incorrect)

X3D embedded using HTML5 object element

September 2022 status: There are no publicly distributed plug-ins for current web browsers that display X3D content referenced in an object tag. Current practice is to render X3D on a web page using a javascript library such as X3DOM or X_ITE 


    <object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts>
      <param name='src' value='aScene.x3d'>
        <-- fallback HTML here -->
    </object>
  • Goal for this example is to show some HTML5-specific attributes
  • Opens nested browsing context in parent block element
  • Set of negotiated <param> pairs for initialization and runtime

X3D served as text/html (no namespace prefix)

      <!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>

X3D served as application/xhtml+xml (with namespace prefix)

      <?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>

Possible future X3D extension - Box has added html onclick event

      <?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" onclick="alert('box picked at position ' + hitPnt);" />
              </Shape>
              <Shape>
                <Text string='"This is X3D Text"' />
              </Shape>
          </Scene>
        </x3d:X3D>
      </body>
      </html>
  • Note that addition of onclick attribute is not standard X3D
  • Preferred approach is probably to use X3D TouchSensor instead

X3D - Making direct updates on the tree

      <?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>
                <Appearance>
                  <Material diffuseColor="1 0 0"  />
                </Appearance>
                <Box size="4 4 4" />
              </Shape>
              <Shape>
                <Text string='"This is X3D Text"' />
              </Shape>
          </Scene>
        </x3d:X3D>
        <script type="text/javascript"><! CDATA
        var colSel = true;
        function toggleRendering()
        {
           var button = document.getElementById("color");	
           colSel = !colSel;		
              if (colSel)
                 button.value = "Blue";
              else
                 button.value = "Red";		
           var mat = document.getElementsByTagName("Material");
           var n = mat.length;		
           var aMat = mat[0];
           aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0"));		
           return false;
        }	
        ></script>	
         <p class="case">   
           Dynamic material update
           <input type="button" id="color" value="Change Color" onclick="toggleRendering();" />
         </p>	
         </body>
       </html>
Retrieved from "http://web3dconsortium.org/wiki/index.php?title=X3D_and_HTML5_examples&oldid=9809"