Difference between revisions of "X3D and HTML5 examples"

From Web3D.org
Jump to: navigation, search
m (Removed TODO item related to XHTML, XHTML being yet another has-been technology)
 
(27 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
Here are examples that show different ways of combining HTML web pages and X3D scenes.
+
Here are several examples that show different ways of combining HTML web pages and X3D scenes.  
  
 
== HelloWorld.x3d standalone scene ==
 
== HelloWorld.x3d standalone scene ==
Line 42: Line 42:
 
     </Scene>
 
     </Scene>
 
   </X3D>
 
   </X3D>
−
 
−
 
−
== X3D embedded in HTML page ==
 
−
 
−
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]
 
−
shows how to place X3D objects within an HTML page
 
−
 
−
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]
 
−
is an example HTML scene with X3D object tag to copy, edit and reuse.
 
−
 
−
<html>
 
−
  <body>
 
−
  <object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"
 
−
    type="model/x3d+xml" height="360" width="
 
−
    <param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/>
 
−
    <param name="DASHBOARD" value="FALSE"/>
 
−
    <param name="SPLASHSCREEN" value="
 
−
    <!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed -->
 
−
    <div class="noX3dPluginInstalled">
 
−
      <a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage">
 
−
      Select an X3D plugin to see this example...</a>
 
−
    &lt;/div>
 
−
  &lt;/object>
 
−
  &lt;/body>
 
−
&lt;/html>
 
−
 
  
 
==  HTML Anchor link to X3D document ==  
 
==  HTML Anchor link to X3D document ==  
Line 86: Line 60:
 
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)
 
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes 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 [https://xwdom.org X3DOM] or [https://github.com/create3000/x_ite X_ITE]
  
−
== X3D embedded using object element ==
 
  
−
     &lt;object name='x3dBlock' type='model/x3d+xml'  
+
     &lt;object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts>
−
      allow-same-origin allow-scripts>
+
 
       &lt;param name='src' value='aScene.x3d'>
 
       &lt;param name='src' value='aScene.x3d'>
−
         &lt;table>...</table>
+
         &lt;-- fallback HTML here -->
 
     &lt;/object>
 
     &lt;/object>
  
−
* Opens nested browsing context in parent block element.
+
* Goal for this example is to show some HTML5-specific attributes
−
* Fallback to html. (table in this case.)
+
* Opens nested browsing context in parent block element
−
* Connections with DOM via event listeners (DOM<=>SAI).
+
* Set of negotiated <param> pairs for initialization and runtime
−
* Set of negotiated <param> pairs: initialization and runtime.
+
−
 
+
  
 
== X3D served as text/html (no namespace prefix) ==
 
== X3D served as text/html (no namespace prefix) ==
Line 165: Line 138:
 
       &lt;/html>
 
       &lt;/html>
  
−
== X3D served as application/xhtml+xml :
+
== Possible future X3D extension - Box has added html onclick event ==
−
[note:  Box has added html onclick event
+
  
 
       &lt;?xml version="1.0" encoding="utf-8" ?>
 
       &lt;?xml version="1.0" encoding="utf-8" ?>
−
       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
+
       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
−
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
 
       &lt;html xmlns="http://www.w3.org/1999/xhtml">
 
       &lt;html xmlns="http://www.w3.org/1999/xhtml">
 
         &lt;head>
 
         &lt;head>
Line 181: Line 152:
 
             &lt;Scene>
 
             &lt;Scene>
 
               &lt;Shape>
 
               &lt;Shape>
−
                 &lt;Box size="4 4 4" />
+
                 &lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" />
 
               &lt;/Shape>
 
               &lt;/Shape>
 
               &lt;Shape>
 
               &lt;Shape>
Line 191: Line 162:
 
       &lt;/html>
 
       &lt;/html>
  
−
== X3D served as application/xhtml+xml : updates on the tree ==
+
* 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 ==
  
 
       &lt;?xml version="1.0" encoding="utf-8" ?>
 
       &lt;?xml version="1.0" encoding="utf-8" ?>
−
       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
+
       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
−
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
 
       &lt;html xmlns="http://www.w3.org/1999/xhtml">
 
       &lt;html xmlns="http://www.w3.org/1999/xhtml">
 
         &lt;head>
 
         &lt;head>
Line 203: Line 176:
 
         &lt;/head>
 
         &lt;/head>
 
         &lt;body>
 
         &lt;body>
−
           &lt;x3d:X3D name='x3dBlock'
+
           &lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd">
−
            xmlns:x3d=
+
−
            "http://www.web3d.org/specifications/x3d-3.2.xsd">
+
 
             &lt;Scene>
 
             &lt;Scene>
 
               &lt;Shape>
 
               &lt;Shape>
Line 211: Line 182:
 
                   &lt;Material diffuseColor="1 0 0"  />
 
                   &lt;Material diffuseColor="1 0 0"  />
 
                 &lt;/Appearance>
 
                 &lt;/Appearance>
−
                 &lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);"  />
+
                 &lt;Box size="4 4 4" />
 
               &lt;/Shape>
 
               &lt;/Shape>
 
               &lt;Shape>
 
               &lt;Shape>
Line 218: Line 189:
 
           &lt;/Scene>
 
           &lt;/Scene>
 
         &lt;/x3d:X3D>
 
         &lt;/x3d:X3D>
−
        &lt;script type="text/javascript">&lt;! CDATA
+
        &lt;script type="text/javascript">&lt;! CDATA
−
        var colSel = true;
+
        var colSel = true;
−
        function toggleRendering()
+
        function toggleRendering()
−
        {
+
        {
 
             var button = document.getElementById("color");
 
             var button = document.getElementById("color");
 
             colSel = !colSel;
 
             colSel = !colSel;
Line 233: Line 204:
 
             aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0"));
 
             aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0"));
 
             return false;
 
             return false;
−
        }
+
        }
−
        >&lt;/script>
+
        >&lt;/script>
−
        &lt;p class="case"> &nbsp;  
+
          &lt;p class="case"> &nbsp;  
−
        Dynamic material update
+
            Dynamic material update
−
        &lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" />
+
            &lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" />
−
        &lt;/p>
+
          &lt;/p>
−
        &lt;/body>
+
          &lt;/body>
 
         &lt;/html>
 
         &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"