Difference between revisions of "X3D and HTML5 examples"

From Web3D.org
Jump to: navigation, search
(→‎HelloWorld.x3d standalone scene)
m (Removed TODO item related to XHTML, XHTML being yet another has-been technology)
 
(59 intermediate revisions by 5 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 8: Line 8:
 
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])
 
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])
  
−
== X3D embedded in HTML page ==
+
  <?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">
−
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]
+
  <X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance'
−
shows how to place X3D objects within an HTML page
+
    xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'>
−
 
+
    <head>
−
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]
+
      <meta name='title' content='HelloWorld.x3d'/>
−
is an example HTML scene with X3D object tag to copy, edit and reuse.
+
      <meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/>
−
 
+
    </head>
−
<html>
+
    <Scene>
−
  <body>
+
      <Group>
−
  <object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"
+
        <Viewpoint centerOfRotation='0 -1 0'
−
    type="model/x3d+xml" height="360" width="
+
          description='Hello world!' position='0 -1 7'/>
−
    <param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/>
+
        <Transform rotation='0 1 0 3'>
−
    <param name="DASHBOARD" value="FALSE"/>
+
          <Shape>
−
    <param name="SPLASHSCREEN" value="
+
            <Sphere/>
−
    <!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed -->
+
            <Appearance>
−
    <div class="noX3dPluginInstalled">
+
              <Material diffuseColor='0 0.5 1'/>
−
      <a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage">  
+
              <ImageTexture url='"earth-topo.png"' />
−
      Select an X3D plugin to see this example...</a>
+
            &lt;/Appearance>
−
    &lt;/div>
+
          &lt;/Shape>
−
  &lt;/object>
+
        &lt;/Transform>
−
  &lt;/body>
+
        &lt;Transform translation='0 -2 0'>
−
&lt;/html>
+
          &lt;Shape>
−
 
+
            &lt;Text solid='false' string='"Hello" "world!"'>
 +
              &lt;FontStyle justify='"MIDDLE" "MIDDLE"'/>
 +
            &lt;/Text>
 +
            &lt;Appearance>
 +
              &lt;Material diffuseColor='0.1 0.5 1'/>
 +
            &lt;/Appearance>
 +
          &lt;/Shape>
 +
        &lt;/Transform>
 +
      &lt;/Group>
 +
    &lt;/Scene>
 +
  &lt;/X3D>
  
 
==  HTML Anchor link to X3D document ==  
 
==  HTML Anchor link to X3D document ==  
Line 50: 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 application/xhtml+xml ==
+
      &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;?xml version="1.0" encoding="utf-8" ?>
Line 92: Line 138:
 
       &lt;/html>
 
       &lt;/html>
  
 +
== Possible future X3D extension - Box has added html onclick event ==
  
−
== X3D 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>
  
−
       &lt;!DOCTYPE html>
+
* Note that addition of onclick attribute is not standard X3D
−
       &lt;html>
+
* 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;!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;head>
 
           &lt;style type=text/css'>
 
           &lt;style type=text/css'>
−
             X3D { height:100%;width:100%; }
+
             x3d:X3D { height:200px;width:200px; }
−
            svg { height:100%;width:100%; }
+
 
           &lt;/style>
 
           &lt;/style>
 
         &lt;/head>
 
         &lt;/head>
 
         &lt;body>
 
         &lt;body>
−
           &lt;X3D name='x3dBlock' type='model/x3d+xml'
+
           &lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd">
−
            version='3.3' profile='Interchange'
+
−
            allow-same-origin allow-scripts>
+
 
             &lt;Scene>
 
             &lt;Scene>
−
              &lt;Viewpoint description='Start' />
 
 
               &lt;Shape>
 
               &lt;Shape>
 +
                &lt;Appearance>
 +
                  &lt;Material diffuseColor="1 0 0"  />
 +
                &lt;/Appearance>
 
                 &lt;Box size="4 4 4" />
 
                 &lt;Box size="4 4 4" />
 
               &lt;/Shape>
 
               &lt;/Shape>
Line 115: Line 187:
 
                 &lt;Text string='"This is X3D Text"' />
 
                 &lt;Text string='"This is X3D Text"' />
 
               &lt;/Shape>
 
               &lt;/Shape>
−
            &lt;/Scene>
+
          &lt;/Scene>
−
          &lt;/X3D>
+
        &lt;/x3d:X3D>
−
          &lt;svg type='image/svg+xml' version="1.1">
+
        &lt;script type="text/javascript">&lt;! CDATA
−
            &lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
+
        var colSel = true;
−
          &lt;/svg>
+
        function toggleRendering()
−
          &lt;mathml>
+
        {
−
            &lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo>
+
            var button = document.getElementById("color");
−
            &lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi>
+
            colSel = !colSel;
−
            &lt;/mrow>&lt;/mrow>
+
              if (colSel)
−
          &lt;/mathml>
+
                  button.value = "Blue";
−
          &lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt>
+
              else
−
          &lt;/ruby>
+
                  button.value = "Red";
−
        &lt;/body>
+
            var mat = document.getElementsByTagName("Material");
−
      &lt;/html>
+
            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 "https://web3dconsortium.org/wiki/index.php?title=X3D_and_HTML5_examples&oldid=9809"