Difference between revisions of "X3D and HTML5 examples"

From Web3D.org
Jump to: navigation, search
(Deleted HTML section as obsolete)
m (Removed TODO item related to XHTML, XHTML being yet another has-been technology)
 
Line 73: Line 73:
 
* Opens nested browsing context in parent block element
 
* Opens nested browsing context in parent block element
 
* Set of negotiated <param> pairs for initialization and runtime
 
* Set of negotiated <param> pairs for initialization and runtime
−
* TODO:  check XHTML syntax for this example
 
  
 
== X3D served as text/html (no namespace prefix) ==
 
== X3D served as text/html (no namespace prefix) ==

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://web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&oldid=9809"