Difference between revisions of "X3D and HTML5 examples"

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.

1 HelloWorld.x3d standalone scene
2 HTML Anchor link to X3D document
3 X3D embedded using HTML5 object element
4 X3D served as text/html (no namespace prefix)
5 X3D served as application/xhtml+xml (with namespace prefix)
6 Possible future X3D extension - Box has added html onclick event
7 X3D - Making direct updates on the tree

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>

Difference between revisions of "X3D and HTML5 examples"

Latest revision as of 11:34, 6 September 2022

Contents

HelloWorld.x3d standalone scene

HTML Anchor link to X3D document

X3D embedded using HTML5 object element

X3D served as text/html (no namespace prefix)

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

Possible future X3D extension - Box has added html onclick event

X3D - Making direct updates on the tree

Navigation menu

Views

Personal tools

Navigation

Search

Tools

@@ 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 ==
-&lt;?xml version="1.0" encoding="UTF-8"?>
-&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">
-&lt;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'>
-  &lt;head>
-    &lt;meta content='HelloWorld.x3d' name='title'/>
-  &lt;/head>
-  &lt;Scene>
-    &lt;Group>
-      &lt;Viewpoint centerOfRotation='0 -1 0'
-        description='Hello world!' position='0 -1 7'/>
-      &lt;Transform rotation='0 1 0 3'>
-        &lt;Shape>
-          &lt;Sphere/>
-          &lt;Appearance>
-            &lt;Material diffuseColor='0 0.5 1'/>
-            &lt;ImageTexture url='"earth-topo.png"' />
-          &lt;/Appearance>
-        &lt;/Shape>
-      &lt;/Transform>
-      &lt;Transform translation='0 -2 0'>
-        &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>
 [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]
@@ Line 46: / Line 8: @@
 [http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])
-== X3D embedded in HTML page ==
+  &lt;?xml version="1.0" encoding="UTF-8"?>
+  &lt;!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]
+  &lt;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'>
+    &lt;head>
-[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]
+      &lt;meta name='title' content='HelloWorld.x3d'/>
-is an example HTML scene with X3D object tag to copy, edit and reuse.
+      &lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/>
+    &lt;/head>
- &lt;html>
+    &lt;Scene>
-  &lt;body>
+      &lt;Group>
-   &lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"
+        &lt;Viewpoint centerOfRotation='0 -1 0'
-     type="model/x3d+xml" height="360" width="
+          description='Hello world!' position='0 -1 7'/>
-     &lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/>
+        &lt;Transform rotation='0 1 0 3'>
-     &lt;param name="DASHBOARD" value="FALSE"/>
+          &lt;Shape>
-     &lt;param name="SPLASHSCREEN" value="
+            &lt;Sphere/>
-     &lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed -->
+            &lt;Appearance>
-     &lt;div class="noX3dPluginInstalled">
+              &lt;Material diffuseColor='0 0.5 1'/>
-       &lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage">
+              &lt;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 ==
@@ Line 88: / Line 60: @@
 * 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;table>...</table>
+          &lt;-- fallback HTML here -->
       &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" ?>
@@ Line 130: / Line 138: @@
         &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;style type=text/css'>
-              X3D { height:100%;width:100%; }
+              x3d:X3D { height:200px;width:200px; }
-             svg { height:100%;width:100%; }
             &lt;/style>
           &lt;/head>
           &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;Viewpoint description='Start' />
                 &lt;Shape>
+                 &lt;Appearance>
+                   &lt;Material diffuseColor="1 0 0"  />
+                 &lt;/Appearance>
                   &lt;Box size="4 4 4" />
                 &lt;/Shape>
@@ Line 153: / Line 187: @@
                   &lt;Text string='"This is X3D Text"' />
                 &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>