<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
		<id>https://old.web3d.org/wiki/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Jbehr</id>
		<title>Web3D.org - User contributions [en]</title>
		<link rel="self" type="application/atom+xml" href="https://old.web3d.org/wiki/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Jbehr"/>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php/Special:Contributions/Jbehr"/>
		<updated>2026-04-22T13:05:13Z</updated>
		<subtitle>User contributions</subtitle>
		<generator>MediaWiki 1.25.1</generator>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2296</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2296"/>
				<updated>2009-10-30T15:55:36Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : HTML onClick() Event ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; onclick=&amp;quot;alert('box picked at position ' + hitPnt);&amp;quot;  /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;amp;lt;! CDATA&lt;br /&gt;
        var colSel = true;&lt;br /&gt;
        function toggleRendering()&lt;br /&gt;
        {&lt;br /&gt;
            var button = document.getElementById(&amp;quot;color&amp;quot;);	&lt;br /&gt;
            colSel = !colSel;		&lt;br /&gt;
               if (colSel)&lt;br /&gt;
                  button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
               else&lt;br /&gt;
                  button.value = &amp;quot;Red&amp;quot;;		&lt;br /&gt;
            var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
            var n = mat.length;		&lt;br /&gt;
            var aMat = mat[0];&lt;br /&gt;
            aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!colSel ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));		&lt;br /&gt;
            return false;&lt;br /&gt;
        }	&lt;br /&gt;
        &amp;gt;&amp;amp;lt;/script&amp;gt;	&lt;br /&gt;
        &amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
        Dynamic material update&lt;br /&gt;
        &amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;color&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/p&amp;gt;	&lt;br /&gt;
        &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2295</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2295"/>
				<updated>2009-10-30T15:53:42Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;amp;lt;! CDATA&lt;br /&gt;
        var colSel = true;&lt;br /&gt;
        function toggleRendering()&lt;br /&gt;
        {&lt;br /&gt;
            var button = document.getElementById(&amp;quot;color&amp;quot;);	&lt;br /&gt;
            colSel = !colSel;		&lt;br /&gt;
               if (colSel)&lt;br /&gt;
                  button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
               else&lt;br /&gt;
                  button.value = &amp;quot;Red&amp;quot;;		&lt;br /&gt;
            var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
            var n = mat.length;		&lt;br /&gt;
            var aMat = mat[0];&lt;br /&gt;
            aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!colSel ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));		&lt;br /&gt;
            return false;&lt;br /&gt;
        }	&lt;br /&gt;
        &amp;gt;&amp;amp;lt;/script&amp;gt;	&lt;br /&gt;
        &amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
        Dynamic material update&lt;br /&gt;
        &amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;color&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/p&amp;gt;	&lt;br /&gt;
        &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2294</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2294"/>
				<updated>2009-10-30T15:51:38Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;amp;lt;! CDATA&lt;br /&gt;
        var colSel = true;&lt;br /&gt;
        function toggleRendering()&lt;br /&gt;
        {&lt;br /&gt;
            var button = document.getElementById(&amp;quot;color&amp;quot;);	&lt;br /&gt;
            colSel = !colSel;		&lt;br /&gt;
		if (colSel)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var n = mat.length;		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!colSel ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));		&lt;br /&gt;
		return false;&lt;br /&gt;
	}	&lt;br /&gt;
	&amp;gt;&amp;amp;lt;/script&amp;gt;	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;color&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2293</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2293"/>
				<updated>2009-10-30T15:50:27Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;amp;lt;! CDATA&lt;br /&gt;
	var colSel = true;&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;color&amp;quot;);	&lt;br /&gt;
		colSel = !colSel;		&lt;br /&gt;
		if (colSel)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var n = mat.length;		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!colSel ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));		&lt;br /&gt;
		return false;&lt;br /&gt;
	}	&lt;br /&gt;
	&amp;gt;&amp;amp;lt;/script&amp;gt;	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;color&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2292</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2292"/>
				<updated>2009-10-30T15:49:20Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;amp;lt;![CDATA[&lt;br /&gt;
	var colSel = true;&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;points&amp;quot;);	&lt;br /&gt;
		colSel = !colSel;		&lt;br /&gt;
		if (colSel)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var n = mat.length;		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!colSel ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));		&lt;br /&gt;
		return false;&lt;br /&gt;
	}	&lt;br /&gt;
	]]&amp;gt;&amp;amp;lt;/script&amp;gt;	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;points&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2291</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2291"/>
				<updated>2009-10-30T15:47:55Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;amp;lt;![CDATA[&lt;br /&gt;
	&lt;br /&gt;
	var solid = true;&lt;br /&gt;
	&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;points&amp;quot;);&lt;br /&gt;
		&lt;br /&gt;
		solid = !solid;&lt;br /&gt;
		&lt;br /&gt;
		if (solid)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;&lt;br /&gt;
		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var i = 0, n = mat.length;&lt;br /&gt;
		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!solid ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));&lt;br /&gt;
		&lt;br /&gt;
		return false;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	]]&amp;gt;&amp;amp;lt;/script&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;points&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2290</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2290"/>
				<updated>2009-10-30T15:46:48Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
                   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;![CDATA[&lt;br /&gt;
	&lt;br /&gt;
	var solid = true;&lt;br /&gt;
	&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;points&amp;quot;);&lt;br /&gt;
		&lt;br /&gt;
		solid = !solid;&lt;br /&gt;
		&lt;br /&gt;
		if (solid)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;&lt;br /&gt;
		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var i = 0, n = mat.length;&lt;br /&gt;
		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!solid ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));&lt;br /&gt;
		&lt;br /&gt;
		return false;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	]]&amp;gt;&amp;amp;lt;/script&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;points&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2289</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2289"/>
				<updated>2009-10-30T15:40:05Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
		  &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot;  /&amp;gt;&lt;br /&gt;
		&amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;![CDATA[&lt;br /&gt;
	&lt;br /&gt;
	var solid = true;&lt;br /&gt;
	&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;points&amp;quot;);&lt;br /&gt;
		&lt;br /&gt;
		solid = !solid;&lt;br /&gt;
		&lt;br /&gt;
		if (solid)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;&lt;br /&gt;
		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var i = 0, n = mat.length;&lt;br /&gt;
		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!solid ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));&lt;br /&gt;
		&lt;br /&gt;
		return false;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	]]&amp;gt;&amp;amp;lt;/script&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;points&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2288</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2288"/>
				<updated>2009-10-30T15:38:41Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* X3D served as application/xhtml+xml : updates on the tree */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
		   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot; specularColor=&amp;quot;.5 .5 .5&amp;quot; transparency=&amp;quot;0&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;![CDATA[&lt;br /&gt;
	&lt;br /&gt;
	var solid = true;&lt;br /&gt;
	&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;points&amp;quot;);&lt;br /&gt;
		&lt;br /&gt;
		solid = !solid;&lt;br /&gt;
		&lt;br /&gt;
		if (solid)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;&lt;br /&gt;
		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var i = 0, n = mat.length;&lt;br /&gt;
		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!solid ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));&lt;br /&gt;
		&lt;br /&gt;
		return false;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	]]&amp;gt;&amp;amp;lt;/script&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
	&amp;amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;points&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2287</id>
		<title>X3D and HTML5 examples</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&amp;diff=2287"/>
				<updated>2009-10-30T15:36:43Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Here are examples that show different ways of combining HTML web pages and X3D scenes.&lt;br /&gt;
&lt;br /&gt;
== HelloWorld.x3d standalone scene ==&lt;br /&gt;
&lt;br /&gt;
  &amp;amp;lt;X3D profile='Immersive' version='3.2' &lt;br /&gt;
    xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' &lt;br /&gt;
    xsd:noNamespaceSchemaLocation=&lt;br /&gt;
   'http://www.web3d.org/specifications/x3d-3.2.xsd'&amp;gt;&lt;br /&gt;
    &amp;amp;lt;head&amp;gt;&lt;br /&gt;
      &amp;amp;lt;meta content='HelloWorld.x3d' name='title'/&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
    &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
      &amp;amp;lt;Group&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Viewpoint centerOfRotation='0 -1 0' &lt;br /&gt;
          description='Hello world!' position='0 -1 7'/&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform rotation='0 1 0 3'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Sphere/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0 0.5 1'/&amp;gt;&lt;br /&gt;
              &amp;amp;lt;ImageTexture url='&amp;quot;earth-topo.png&amp;quot;' /&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
        &amp;amp;lt;Transform translation='0 -2 0'&amp;gt;&lt;br /&gt;
          &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Text solid='false' string='&amp;quot;Hello&amp;quot; &amp;quot;world!&amp;quot;'&amp;gt;&lt;br /&gt;
              &amp;amp;lt;FontStyle justify='&amp;quot;MIDDLE&amp;quot; &amp;quot;MIDDLE&amp;quot;'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Text&amp;gt;&lt;br /&gt;
            &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
              &amp;amp;lt;Material diffuseColor='0.1 0.5 1'/&amp;gt;&lt;br /&gt;
            &amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
          &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
        &amp;amp;lt;/Transform&amp;gt;&lt;br /&gt;
      &amp;amp;lt;/Group&amp;gt;&lt;br /&gt;
    &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]&lt;br /&gt;
shows a simple standalone example&lt;br /&gt;
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])&lt;br /&gt;
&lt;br /&gt;
== X3D embedded in HTML page ==&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]&lt;br /&gt;
shows how to place X3D objects within an HTML page&lt;br /&gt;
&lt;br /&gt;
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]&lt;br /&gt;
is an example HTML scene with X3D object tag to copy, edit and reuse.&lt;br /&gt;
&lt;br /&gt;
 &amp;amp;lt;html&amp;gt;&lt;br /&gt;
  &amp;amp;lt;body&amp;gt;&lt;br /&gt;
   &amp;amp;lt;object data=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;&lt;br /&gt;
     type=&amp;quot;model/x3d+xml&amp;quot; height=&amp;quot;360&amp;quot; width=&amp;quot;	&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;src&amp;quot; value=&amp;quot;http://www.web3d.org/x3d/content/examples/HelloWorld.x3d&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;DASHBOARD&amp;quot; value=&amp;quot;FALSE&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;amp;lt;param name=&amp;quot;SPLASHSCREEN&amp;quot; value=&amp;quot;&lt;br /&gt;
     &amp;amp;lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --&amp;gt;&lt;br /&gt;
     &amp;amp;lt;div class=&amp;quot;noX3dPluginInstalled&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;a href=&amp;quot;http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications&amp;quot; target=&amp;quot;helpPage&amp;quot;&amp;gt; &lt;br /&gt;
       Select an X3D plugin to see this example...&amp;lt;/a&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/div&amp;gt;&lt;br /&gt;
   &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
  &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==  HTML Anchor link to X3D document == &lt;br /&gt;
&lt;br /&gt;
HTML anchor links allow an HTML page to load the contents of an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML source:&lt;br /&gt;
&lt;br /&gt;
       Here is my&lt;br /&gt;
       &amp;amp;lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'&amp;gt;HelloWorld example&amp;amp;lt;/a&amp;gt; in X3D.&lt;br /&gt;
&lt;br /&gt;
HTML result:&lt;br /&gt;
        Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.&lt;br /&gt;
&lt;br /&gt;
Typically Web browser responses to a user selecting the link:&lt;br /&gt;
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided&lt;br /&gt;
* 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)&lt;br /&gt;
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== X3D embedded using object element == &lt;br /&gt;
&lt;br /&gt;
     &amp;amp;lt;object name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
       allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
       &amp;amp;lt;param name='src' value='aScene.x3d'&amp;gt;&lt;br /&gt;
         &amp;amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;&lt;br /&gt;
     &amp;amp;lt;/object&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* Opens nested browsing context in parent block element.&lt;br /&gt;
* Fallback to html. (table in this case.) &lt;br /&gt;
* Connections with DOM via event listeners (DOM&amp;lt;=&amp;gt;SAI). &lt;br /&gt;
* Set of negotiated &amp;lt;param&amp;gt; pairs: initialization and runtime.&lt;br /&gt;
&lt;br /&gt;
== X3D served as text/html ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             X3D { height:100%;width:100%; }&lt;br /&gt;
             svg { height:100%;width:100%; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;X3D name='x3dBlock' type='model/x3d+xml' &lt;br /&gt;
             version='3.3' profile='Interchange'&lt;br /&gt;
             allow-same-origin allow-scripts&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Viewpoint description='Start' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/X3D&amp;gt;&lt;br /&gt;
           &amp;amp;lt;svg type='image/svg+xml' version=&amp;quot;1.1&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;ellipse cx=&amp;quot;2cm&amp;quot; cy=&amp;quot;4cm&amp;quot; rx=&amp;quot;2cm&amp;quot; ry=&amp;quot;1cm&amp;quot; /&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/svg&amp;gt;&lt;br /&gt;
           &amp;amp;lt;mathml&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; x &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; + &amp;amp;lt;/mo&amp;gt;&lt;br /&gt;
             &amp;amp;lt;mrow&amp;gt;&amp;amp;lt;mi&amp;gt; a &amp;amp;lt;/mi&amp;gt;&amp;amp;lt;mo&amp;gt; / &amp;amp;lt;/mo&amp;gt;&amp;amp;lt;mi&amp;gt; b &amp;amp;lt;/mi&amp;gt;&lt;br /&gt;
             &amp;amp;lt;/mrow&amp;gt;&amp;amp;lt;/mrow&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/mathml&amp;gt;&lt;br /&gt;
           &amp;amp;lt;ruby&amp;gt; WWW &amp;amp;lt;rt&amp;gt;World Wide Web&amp;amp;lt;/rt&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/ruby&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== X3D served as application/xhtml+xml : updates on the tree ==&lt;br /&gt;
&lt;br /&gt;
       &amp;amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
       &amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &lt;br /&gt;
         &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
       &amp;amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;amp;lt;head&amp;gt;&lt;br /&gt;
           &amp;amp;lt;style type=text/css'&amp;gt;&lt;br /&gt;
             x3d:X3D { height:200px;width:200px; }&lt;br /&gt;
           &amp;amp;lt;/style&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/head&amp;gt;&lt;br /&gt;
         &amp;amp;lt;body&amp;gt;&lt;br /&gt;
           &amp;amp;lt;x3d:X3D name='x3dBlock'&lt;br /&gt;
             xmlns:x3d=&lt;br /&gt;
             &amp;quot;http://www.web3d.org/specifications/x3d-3.2.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;amp;lt;Scene&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Appearance&amp;gt;&lt;br /&gt;
		   &amp;amp;lt;Material diffuseColor=&amp;quot;1 0 0&amp;quot; specularColor=&amp;quot;.5 .5 .5&amp;quot; transparency=&amp;quot;0&amp;quot; /&amp;gt;&lt;br /&gt;
		&amp;amp;lt;/Appearance&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
               &amp;amp;lt;Shape&amp;gt;&lt;br /&gt;
                 &amp;amp;lt;Text string='&amp;quot;This is X3D Text&amp;quot;' /&amp;gt;&lt;br /&gt;
               &amp;amp;lt;/Shape&amp;gt;&lt;br /&gt;
           &amp;amp;lt;/Scene&amp;gt;&lt;br /&gt;
         &amp;amp;lt;/x3d:X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
        &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;![CDATA[&lt;br /&gt;
	&lt;br /&gt;
	var solid = true;&lt;br /&gt;
	&lt;br /&gt;
	function toggleRendering()&lt;br /&gt;
	{&lt;br /&gt;
		var button = document.getElementById(&amp;quot;points&amp;quot;);&lt;br /&gt;
		&lt;br /&gt;
		solid = !solid;&lt;br /&gt;
		&lt;br /&gt;
		if (solid)&lt;br /&gt;
			button.value = &amp;quot;Blue&amp;quot;;&lt;br /&gt;
		else&lt;br /&gt;
			button.value = &amp;quot;Red&amp;quot;;&lt;br /&gt;
		&lt;br /&gt;
		var mat = document.getElementsByTagName(&amp;quot;Material&amp;quot;);&lt;br /&gt;
		var i = 0, n = mat.length;&lt;br /&gt;
		&lt;br /&gt;
		var aMat = mat[0];&lt;br /&gt;
		aMat.setAttribute(&amp;quot;diffuseColor&amp;quot;, (!solid ? &amp;quot;0 0 1&amp;quot; : &amp;quot;1 0 0&amp;quot;));&lt;br /&gt;
		&lt;br /&gt;
		return false;&lt;br /&gt;
	}&lt;br /&gt;
	&lt;br /&gt;
	]]&amp;gt;&amp;amp;lt;/script&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
	&amp;lt;p class=&amp;quot;case&amp;quot;&amp;gt; &amp;amp;nbsp; &lt;br /&gt;
	Dynamic material update&lt;br /&gt;
	&amp;amp;lt;input type=&amp;quot;button&amp;quot; id=&amp;quot;points&amp;quot; value=&amp;quot;Change Color&amp;quot; onclick=&amp;quot;toggleRendering();&amp;quot; /&amp;gt;&lt;br /&gt;
	&amp;amp;lt;/p&amp;gt;&lt;br /&gt;
	&lt;br /&gt;
       &amp;amp;lt;/body&amp;gt;&lt;br /&gt;
       &amp;amp;lt;/html&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5&amp;diff=2101</id>
		<title>X3D and HTML5</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5&amp;diff=2101"/>
				<updated>2009-07-24T17:24:38Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Goals: X3D and HTML5=&lt;br /&gt;
&lt;br /&gt;
The [http://www.web3D.org/x3d X3D Working Group] is participating in the [http://www.w3.org/html/wg HTML Working Group] for the purpose of best integrating X3D with HTML.&lt;br /&gt;
&lt;br /&gt;
This effort has strategic importance for Web3D and indeed for all 3D graphics, since X3D is an interchange format for a wide variety of models.  We intend to establish a solid foundation for X3D to properly support 3D graphics in HTML5.&lt;br /&gt;
&lt;br /&gt;
=HTML 5=&lt;br /&gt;
&lt;br /&gt;
The [http://www.w3.org/html/wg HTML working group] page states:&lt;br /&gt;
&lt;br /&gt;
        What is HTML?  HTML is the publishing language of the World Wide Web.&lt;br /&gt;
&lt;br /&gt;
The latest editor's draft Hypertext Markup Language (HTML) recommendation states:&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html HTML 5] W3C Working Draft&lt;br /&gt;
        A vocabulary and associated APIs for HTML and XHTML&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes 13.2 Declarative 3D scenes]&lt;br /&gt;
        Embedding 3D imagery into XHTML documents is the domain of X3D,&lt;br /&gt;
        or technologies based on X3D that are namespace-aware.&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#the-object-element 4.8.5 The object element]&lt;br /&gt;
        The object element can represent an external resource, which, depending on&lt;br /&gt;
        the type of the resource, will either be treated as an image, as a nested&lt;br /&gt;
        browsing context, or as an external resource to be processed by a plugin.&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#the-param-element 4.8.6 The param element]&lt;br /&gt;
        The param element defines parameters for plugins invoked by object elements.&lt;br /&gt;
&lt;br /&gt;
=Technical Tasks=&lt;br /&gt;
&lt;br /&gt;
We are working on the following tasks.&lt;br /&gt;
* Ensure that all HTML5 questions and issues relative to X3D are properly considered and answered.&lt;br /&gt;
* Document how native X3D in .xml encoding can be best be embedded inside an HTML5 document, typically in a namespace-aware fashion&lt;br /&gt;
* Demonstrate X3D+HTML5 examples on the [http://www.web3D.org Web3D Consortium] website&lt;br /&gt;
* Examine how X3D pertains to related HTML5 tags (such as object and canvas) that are used for plugin-type content&lt;br /&gt;
* Track MIME type issues&lt;br /&gt;
* Examine overall interoperability issues:  combined X3D and HTML content with one floating over the other&lt;br /&gt;
** X3D scene with transparent background floating over HTML document or desktop&lt;br /&gt;
** HTML text overlay laid out over an X3D scene as help&lt;br /&gt;
* Identify API issues of mutual interest (such as DOM, Ajax and XHR) for further developmental work&lt;br /&gt;
* Consider direct integration of Scalable Vector Graphics (SVG) images as a supported format for X3D ImageTexture node&lt;br /&gt;
&lt;br /&gt;
=Work Support=&lt;br /&gt;
&lt;br /&gt;
* Maintain this X3D and HTML5 wiki page to track issues and progress&lt;br /&gt;
* Identify people in HTML5 working group who want to collaborate with us on these issues&lt;br /&gt;
* Report regularly on efforts to [mailto:x3d@web3d.org x3d@web3d.org mailing list] and in our every-other-week X3D working group teleconferences&lt;br /&gt;
* Discussions to occur on the [mailto:x3d@web3d.org x3d@web3d.org mailing list] and [mailto:public-html@w3.org public-html@w3.org mailing list]&lt;br /&gt;
* Other tasks and efforts as needed&lt;br /&gt;
&lt;br /&gt;
=Participation=&lt;br /&gt;
&lt;br /&gt;
Relevant HTML5 and W3C information:&lt;br /&gt;
* [http://www.w3.org/html/wg HTML Working Group] especially [http://www.w3.org/html/wg/#who Membership and Participation]&lt;br /&gt;
* [http://www.w3.org World Wide Web Consortium (W3C)]&lt;br /&gt;
* [http://www.w3.org/Consortium/Process W3C Process Document]&lt;br /&gt;
&lt;br /&gt;
The following individuals have volunteered to serve as X3D Working Group representatives in the HTML5 Working Group.&lt;br /&gt;
* Johannes Behr, [http://instantreality.org Instant Reality], Fraunhofer Research, Darmstadt Germany&lt;br /&gt;
* [http://web.nps.navy.mil/~brutzman Don Brutzman], Naval Postgraduate School (Web3D-W3C liaison and W3C Advisory Committee representative), Monterey California USA&lt;br /&gt;
* John Stewart, [http://www.crc.ca/FreeWRL FreeWrl], Communications Research Center (CRC) Canada&lt;br /&gt;
* Joe Williams, [http://hypermultimedia.com HyperMultiMedia], Santa Rosa California USA&lt;br /&gt;
&lt;br /&gt;
Any other [http://www.web3D.org Web3D Consortium] members who are interested in serving as one of our X3D Working Group representatives is asked to review the HTML working group membership materials, notify the X3D working group that you are interested, and describe what your goals will be.&lt;br /&gt;
&lt;br /&gt;
=Meetings=&lt;br /&gt;
&lt;br /&gt;
Our weekly X3D and HTML5 teleconference is usually 0800-0900 (pacific time) each Tuesday.&lt;br /&gt;
&lt;br /&gt;
Designated members can participate Web3D HTML5 teleconference call.&lt;br /&gt;
&lt;br /&gt;
=Annotated References=&lt;br /&gt;
&amp;lt;!-- TODO descriptive sentences --&amp;gt;&lt;br /&gt;
X3D and HTML4&lt;br /&gt;
* [http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D] shows how to place X3D objects within an HTML page&lt;br /&gt;
* [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.&lt;br /&gt;
* [http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html X3D Abstract Specification]&lt;br /&gt;
* [http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html X3D Scene Access Interface (SAI)] Edition 2&lt;br /&gt;
** [http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument 6.3.13 importDocument] service is a utility request to import a W3C DOM document or document fragment and convert it to an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML4 and XHTML&lt;br /&gt;
* [http://www.w3.org/TR/html4 HTML 4.01] HyperText Markup Language (HTML)&lt;br /&gt;
* [http://www.w3.org/TR/xhtml1/ XHTML] Extensible HyperText Markup Language (XHTML)&lt;br /&gt;
&lt;br /&gt;
HTML5&lt;br /&gt;
* [http://dev.w3.org/html5/spec/Overview.html#embedded-content-0 4.8 Embedded content] &lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-figure-element 4.8.1 The figure element] represents some flow content, optionally with a caption, which can be moved away from the main flow of the document without affecting the document's meaning.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-img-element 4.8.2 The img element] represents an image.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-iframe-element 4.8.3 The iframe element] represents a nested browsing context.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-embed-element 4.8.4 The embed element] represents an integration point for an external (typically non-HTML) application or interactive content.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-object-element 4.8.5 The object element] can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-param-element 4.8.6 The param element] defines parameters for plugins invoked by object elements. It does not represent anything on its own.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#video 4.8.7 The video element] represents a video or movie.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#audio 4.8.8 The audio element] is a media element whose media data is ostensibly audio data.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#source 4.8.9 The source element] allows authors to specify multiple media resources for media elements. It does not represent anything on its own.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#media-elements 4.8.10 Media elements] are used to present audio data, or video and audio data, to the user. &lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-canvas-element 4.8.11 The canvas element] represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-map-element 4.8.12 The map element], in conjunction with any area element descendants, defines an image map. The element represents its children.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-area-element 4.8.13 The area element] represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-image-element 4.8.14 Image maps] allows geometric areas on an image to be associated with hyperlinks.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#mathml 4.8.15 MathML] from the [http://dev.w3.org/html5/spec/Overview.html#mathml-namespace MathML namespace] falls into the embedded content  category for the purposes of the content models in this specification.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#svg 4.8.16 SVG] from the [http://dev.w3.org/html5/spec/Overview.html#svg-namespace SVG namespace] falls into the embedded content category for the purposes of the content models in this specification.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#dimension-attributes 4.8.17 Dimension attributes]&lt;br /&gt;
&lt;br /&gt;
=API details under discussion=&lt;br /&gt;
&lt;br /&gt;
We have discussed Johannes' message of 25 March 2009 + responses (Subject:  Re: Khronos Press Releases etc.) that included an X3DOM-connector.pdf diagram regarding how X3D might work with DOM, HTML etc.  Also discussed the thread on Khronos' presumed upcoming work on Canvas3D element, and past work on Ajax3D.&lt;br /&gt;
&lt;br /&gt;
These and other API topics are all technically related, and of interest, but have varying degrees of maturity.&lt;br /&gt;
&lt;br /&gt;
The primary objective of the current effort is to support X3D and HTML5.  Further work on DOM and other APIs is likely to evolve and spin off from this central effort.&lt;br /&gt;
&lt;br /&gt;
==X3DOM proposal==&lt;br /&gt;
&lt;br /&gt;
===Basics===&lt;br /&gt;
&lt;br /&gt;
The object element represents external resources like pdf-documents, movies or x3d-worlds. This plugin model works nicely for isolated content and applications which are unrelated to the surrounding xhtml-document. If the web-application developer would like to access and manipulate the object content he or she has to deal with object or plugin specific interfaces. e.g. X3D browser should provide a Scene Access Interface (SAI). &lt;br /&gt;
&lt;br /&gt;
The X3DOM model tries to ease the development of applications by not providing a special interface but following and respecting some basic xhtml rules:&lt;br /&gt;
&lt;br /&gt;
1) Declarative XML content is part of the DOM tree; Embedded with a separate xml namespace&lt;br /&gt;
&lt;br /&gt;
        &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
        &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
        &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
        &amp;lt;body&amp;gt;&lt;br /&gt;
          &amp;lt;x3d:x3d xmlns:x3d=&amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;x3d:Scene&amp;gt;&lt;br /&gt;
                &amp;lt;x3d:Shape&amp;gt;&amp;lt;x3d:Box x3d:size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&amp;lt;/x3d:Shape&amp;gt;&lt;br /&gt;
            &amp;lt;/x3d:Scene&amp;gt;                &lt;br /&gt;
          &amp;lt;/x3d:x3d&amp;gt;&lt;br /&gt;
        &amp;lt;/body&amp;gt;&lt;br /&gt;
        &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
2) The DOM elements can be used to read and manipulate the content&lt;br /&gt;
&lt;br /&gt;
         &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
         &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;,&amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
           &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;lt;body&amp;gt;&lt;br /&gt;
          &amp;lt;x3d xmlns=&lt;br /&gt;
              &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;lt;Scene&amp;gt;&lt;br /&gt;
                 &amp;lt;Shape&amp;gt;&amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;lt;/Scene&amp;gt;                &lt;br /&gt;
           &amp;lt;/x3d&amp;gt;&lt;br /&gt;
           &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;       &lt;br /&gt;
          // The namespace URIs&lt;br /&gt;
           var xhtml_ns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;;&lt;br /&gt;
           var x3d_ns =&lt;br /&gt;
              &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;;&lt;br /&gt;
          // Get elements using namespaces&lt;br /&gt;
           var h1 = &lt;br /&gt;
               document.getElementsByTagNameNS(xhtml_ns, &amp;quot;h1&amp;quot;);            &lt;br /&gt;
           var box = &lt;br /&gt;
               document.getElementsByTagNameNS(x3d_ns, &amp;quot;Box&amp;quot;)[0];&lt;br /&gt;
          // Edit an attribute of the &amp;lt;Box /&amp;gt; element&lt;br /&gt;
           alert(box.getAttributeNS(null, &amp;quot;size&amp;quot;));&lt;br /&gt;
           box.setAttributeNS(null, &amp;quot;size&amp;quot;, &amp;quot;2 2 2&amp;quot;);    &lt;br /&gt;
           alert(box.getAttributeNS(null, &amp;quot;size&amp;quot;));&lt;br /&gt;
           &amp;lt;/script&amp;gt;&lt;br /&gt;
           &amp;lt;/body&amp;gt;&lt;br /&gt;
&lt;br /&gt;
3) Events can be used to interact with the content&lt;br /&gt;
&lt;br /&gt;
            &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
            &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;, &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
              &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;body&amp;gt;&lt;br /&gt;
               &amp;lt;x3d xmlns=&lt;br /&gt;
                   &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
                   &amp;lt;Scene&amp;gt;&lt;br /&gt;
                       &amp;lt;Transform&amp;gt;&lt;br /&gt;
                           &amp;lt;Shape&amp;gt;&amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
                           &amp;lt;/Shape&amp;gt;&lt;br /&gt;
                           &amp;lt;TouchSensor id=&amp;quot;ts&amp;quot; DEF=&amp;quot;ts&amp;quot; /&amp;gt;&lt;br /&gt;
                       &amp;lt;/Transform&amp;gt;&lt;br /&gt;
                   &amp;lt;/Scene&amp;gt;                &lt;br /&gt;
               &amp;lt;/x3d&amp;gt;&lt;br /&gt;
               &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;                    &lt;br /&gt;
               // The namespace URIs&lt;br /&gt;
               var xhtml_ns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;;&lt;br /&gt;
                var x3d_ns = &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;;&lt;br /&gt;
               // Get elements using namespaces&lt;br /&gt;
                var h1 =  document.getElementsByTagNameNS(xhtml_ns, &amp;quot;h1&amp;quot;);     &lt;br /&gt;
               var x3d = document.getElementsByTagNameNS(x3d_ns, &amp;quot;x3d&amp;quot;)[0];        &lt;br /&gt;
               var ts = x3d.getElementsByTagName(&amp;quot;TouchSensor&amp;quot;)[0];&lt;br /&gt;
               alert(&amp;quot;ts=&amp;quot; + ts);&lt;br /&gt;
               ts.addEventListener(&amp;quot;touchTime&amp;quot;, function() {&lt;br /&gt;
                   alert(&amp;quot;clicked&amp;quot;);&lt;br /&gt;
               }, false);&lt;br /&gt;
               &amp;lt;/script&amp;gt;&lt;br /&gt;
            &amp;lt;/body&amp;gt;&lt;br /&gt;
            &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
4) The position of the content in the document defines the position of the visible elements&lt;br /&gt;
&lt;br /&gt;
            The X3D element should also define the position where the content will be integrated into the html page. &lt;br /&gt;
            Simular how e.g. SVG or canvas works. A decoupled mechanisms will confuse application developer&lt;br /&gt;
&lt;br /&gt;
===Implementation===&lt;br /&gt;
&lt;br /&gt;
The X3DOM model should be implemented as native browser feature, simular to SVG, in the future. Current test-implementation utilize the object/SAI model internally. In addition test-versions based on the Canvas3D layer exist. Both need a browser-extension right now to synchronize and update the DOM changes&lt;br /&gt;
&lt;br /&gt;
===Further Information===&lt;br /&gt;
&lt;br /&gt;
More information can be found in the X3DOM paper at the web3D2009 symposium. The [[{{ns:-2}}:X3dom-web3d2009-slides.zip|slides]] and [[{{ns:-2}}:X3dom-web3d2009-paper.pdf|paper]] are available as preprint. &lt;br /&gt;
=Future work=&lt;br /&gt;
&lt;br /&gt;
Some topics might become relevant once HTML5 is established as a formal W3C Recommendation. These are not part of our current planned work.&lt;br /&gt;
&lt;br /&gt;
* Publishing [http://www.web3d.org/x3d/specifications X3D Specifications] in HTML5&lt;br /&gt;
* Other topics as needed&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=File:X3dom-web3d2009-slides.zip&amp;diff=2100</id>
		<title>File:X3dom-web3d2009-slides.zip</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=File:X3dom-web3d2009-slides.zip&amp;diff=2100"/>
				<updated>2009-07-24T17:15:59Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: x3dom slides from the web3d2009 conference&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;x3dom slides from the web3d2009 conference&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=File:X3dom-web3d2009-paper.pdf&amp;diff=2099</id>
		<title>File:X3dom-web3d2009-paper.pdf</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=File:X3dom-web3d2009-paper.pdf&amp;diff=2099"/>
				<updated>2009-07-24T17:14:30Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: x3dom paper from the web3d2009 conference.&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;x3dom paper from the web3d2009 conference.&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5&amp;diff=2058</id>
		<title>X3D and HTML5</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5&amp;diff=2058"/>
				<updated>2009-05-22T22:38:10Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Goal=&lt;br /&gt;
&lt;br /&gt;
The [http://www.web3D.org/x3d X3D Working Group] will participate in the [http://www.w3.org/html/wg HTML Working Group] for the purpose of best integrating X3D with HTML.&lt;br /&gt;
&lt;br /&gt;
This effort has strategic importance for Web3D.  We intend to establish a solid foundation for X3D to properly support 3D graphics in HTML5.&lt;br /&gt;
&lt;br /&gt;
=HTML5=&lt;br /&gt;
&lt;br /&gt;
The [http://www.w3.org/html/wg HTML working group] page states:&lt;br /&gt;
&lt;br /&gt;
        What is HTML?  HTML is the publishing language of the World Wide Web.&lt;br /&gt;
&lt;br /&gt;
The latest editor's draft Hypertext Markup Language (HTML) recommendation states:&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html HTML 5] W3C Working Draft&lt;br /&gt;
        A vocabulary and associated APIs for HTML and XHTML&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes 13.2 Declarative 3D scenes]&lt;br /&gt;
        Embedding 3D imagery into XHTML documents is the domain of X3D,&lt;br /&gt;
        or technologies based on X3D that are namespace-aware.&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#the-object-element 4.8.5 The object element]&lt;br /&gt;
        The object element can represent an external resource, which, depending on&lt;br /&gt;
        the type of the resource, will either be treated as an image, as a nested&lt;br /&gt;
        browsing context, or as an external resource to be processed by a plugin.&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#the-param-element 4.8.6 The param element]&lt;br /&gt;
        The param element defines parameters for plugins invoked by object elements.&lt;br /&gt;
&lt;br /&gt;
=Technical Tasks=&lt;br /&gt;
&lt;br /&gt;
We are working on the following tasks.&lt;br /&gt;
* Ensure that all HTML5 questions and issues relative to X3D are properly considered and answered.&lt;br /&gt;
* Document how native X3D in .xml encoding can be best be embedded inside an HTML5 document, typically in a namespace-aware fashion&lt;br /&gt;
* Demonstrate X3D+HTML5 examples on the [http://www.web3D.org Web3D Consortium] website&lt;br /&gt;
* Examine how X3D pertains to related HTML5 tags (such as object and canvas) that are used for plugin-type content&lt;br /&gt;
* Track MIME type issues&lt;br /&gt;
* Examine overall interoperability issues:  combined X3D and HTML content with one floating over the other&lt;br /&gt;
** X3D scene with transparent background floating over HTML document or desktop&lt;br /&gt;
** HTML text overlay laid out over an X3D scene as help&lt;br /&gt;
* Identify API issues of mutual interest (such as DOM, Ajax and XHR) for further developmental work&lt;br /&gt;
&lt;br /&gt;
=Work Support=&lt;br /&gt;
&lt;br /&gt;
* Maintain this X3D and HTML5 wiki page to track issues and progress&lt;br /&gt;
* Identify people in HTML5 working group who want to collaborate with us on these issues&lt;br /&gt;
* Report regularly on efforts to [mailto:x3d@web3d.org x3d@web3d.org mailing list] and in our every-other-week X3D working group teleconferences&lt;br /&gt;
* Discussions to occur on the [mailto:x3d@web3d.org x3d@web3d.org mailing list] and [mailto:public-html@w3.org public-html@w3.org mailing list]&lt;br /&gt;
* Other tasks and efforts as needed&lt;br /&gt;
&lt;br /&gt;
=Participation=&lt;br /&gt;
&lt;br /&gt;
Relevant HTML5 and W3C information:&lt;br /&gt;
* [http://www.w3.org/html/wg HTML Working Group] especially [http://www.w3.org/html/wg/#who Membership and Participation]&lt;br /&gt;
* [http://www.w3.org World Wide Web Consortium (W3C)]&lt;br /&gt;
* [http://www.w3.org/Consortium/Process W3C Process Document]&lt;br /&gt;
&lt;br /&gt;
The following individuals have volunteered to serve as X3D Working Group representatives in the HTML5 Working Group.&lt;br /&gt;
* Johannes Behr, [http://instantreality.org Instant Reality], Fraunhofer Research, Darmstadt Germany&lt;br /&gt;
* [http://web.nps.navy.mil/~brutzman Don Brutzman], Naval Postgraduate School (Web3D-W3C liaison and W3C Advisory Committee representative), Monterey California USA&lt;br /&gt;
* John Stewart, [http://www.crc.ca/FreeWRL FreeWrl], Communications Research Center (CRC) Canada&lt;br /&gt;
* Joe Williams, [http://hypermultimedia.com HyperMultiMedia], Santa Rosa California USA&lt;br /&gt;
&lt;br /&gt;
Any other [http://www.web3D.org Web3D Consortium] members who are interested in serving as one of our X3D Working Group representatives is asked to review the HTML working group membership materials, notify the X3D working group that you are interested, and describe what your goals will be.&lt;br /&gt;
&lt;br /&gt;
=Meetings=&lt;br /&gt;
&lt;br /&gt;
Our weekly X3D and HTML5 teleconference is 0800-0900 (pacific time) each Tuesday.&lt;br /&gt;
&lt;br /&gt;
We are requesting membership for Web3D participants in W3C HTML5.  Don will report to W3C our list of participants, passwords and access will then be provided.&lt;br /&gt;
&lt;br /&gt;
=Annotated References=&lt;br /&gt;
&amp;lt;!-- TODO descriptive sentences --&amp;gt;&lt;br /&gt;
X3D and HTML4&lt;br /&gt;
* [http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D] shows how to place X3D objects within an HTML page&lt;br /&gt;
* [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.&lt;br /&gt;
* [http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html X3D Abstract Specification]&lt;br /&gt;
* [http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html X3D Scene Access Interface (SAI)] Edition 2&lt;br /&gt;
** [http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument 6.3.13 importDocument] service is a utility request to import a W3C DOM document or document fragment and convert it to an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML4 and XHTML&lt;br /&gt;
* [http://www.w3.org/TR/html4 HTML 4.01] HyperText Markup Language (HTML)&lt;br /&gt;
* [http://www.w3.org/TR/xhtml1/ XHTML] Extensible HyperText Markup Language (XHTML)&lt;br /&gt;
&lt;br /&gt;
HTML5&lt;br /&gt;
* [http://dev.w3.org/html5/spec/Overview.html#embedded-content-0 4.8 Embedded content] &lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-figure-element 4.8.1 The figure element] represents some flow content, optionally with a caption, which can be moved away from the main flow of the document without affecting the document's meaning.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-img-element 4.8.2 The img element] represents an image.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-iframe-element 4.8.3 The iframe element] represents a nested browsing context.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-embed-element 4.8.4 The embed element] represents an integration point for an external (typically non-HTML) application or interactive content.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-object-element 4.8.5 The object element] can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-param-element 4.8.6 The param element] defines parameters for plugins invoked by object elements. It does not represent anything on its own.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#video 4.8.7 The video element] represents a video or movie.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#audio 4.8.8 The audio element] is a media element whose media data is ostensibly audio data.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#source 4.8.9 The source element] allows authors to specify multiple media resources for media elements. It does not represent anything on its own.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#media-elements 4.8.10 Media elements] are used to present audio data, or video and audio data, to the user. &lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-canvas-element 4.8.11 The canvas element] represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-map-element 4.8.12 The map element], in conjunction with any area element descendants, defines an image map. The element represents its children.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-area-element 4.8.13 The area element] represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-image-element 4.8.14 Image maps] allows geometric areas on an image to be associated with hyperlinks.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#mathml 4.8.15 MathML] from the [http://dev.w3.org/html5/spec/Overview.html#mathml-namespace MathML namespace] falls into the embedded content  category for the purposes of the content models in this specification.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#svg 4.8.16 SVG] from the [http://dev.w3.org/html5/spec/Overview.html#svg-namespace SVG namespace] falls into the embedded content category for the purposes of the content models in this specification.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#dimension-attributes 4.8.17 Dimension attributes]&lt;br /&gt;
&lt;br /&gt;
=API details under discussion=&lt;br /&gt;
&lt;br /&gt;
We have discussed Johannes' message of 25 March 2009 + responses (Subject:  Re: Khronos Press Releases etc.) that included an X3DOM-connector.pdf diagram regarding how X3D might work with DOM, HTML etc.  Also discussed the thread on Khronos' presumed upcoming work on Canvas3D element, and past work on Ajax3D.&lt;br /&gt;
&lt;br /&gt;
These and other API topics are all technically related, and of interest, but have varying degrees of maturity.&lt;br /&gt;
&lt;br /&gt;
The primary objective of the current effort is to support X3D and HTML5.  Further work on DOM and other APIs is likely to evolve and spin off from this central effort.&lt;br /&gt;
&lt;br /&gt;
==X3DOM proposal==&lt;br /&gt;
&lt;br /&gt;
===Basics===&lt;br /&gt;
&lt;br /&gt;
The object element represents external resources like pdf-documents, movies or x3d-worlds. This plugin model works nicely for isolated content and applications which are unrelated to the surrounding xhtml-document. If the web-application developer would like to access and manipulate the object content he or she has to deal with object or plugin specific interfaces. e.g. X3D browser should provide a Scene Access Interface (SAI). &lt;br /&gt;
&lt;br /&gt;
The X3DOM model tries to ease the development of applications by not providing a special interface but following and respecting some basic xhtml rules:&lt;br /&gt;
&lt;br /&gt;
1) Declarative XML content is part of the DOM tree; Embedded with a separate xml namespace&lt;br /&gt;
&lt;br /&gt;
        &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
        &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
        &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
        &amp;lt;body&amp;gt;&lt;br /&gt;
          &amp;lt;x3d:x3d xmlns:x3d=&amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;x3d:Scene&amp;gt;&lt;br /&gt;
                &amp;lt;x3d:Shape&amp;gt;&amp;lt;x3d:Box x3d:size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&amp;lt;/x3d:Shape&amp;gt;&lt;br /&gt;
            &amp;lt;/x3d:Scene&amp;gt;                &lt;br /&gt;
          &amp;lt;/x3d:x3d&amp;gt;&lt;br /&gt;
        &amp;lt;/body&amp;gt;&lt;br /&gt;
        &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
2) The DOM elements can be used to read and manipulate the content&lt;br /&gt;
&lt;br /&gt;
         &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
         &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;,&amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
           &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;lt;body&amp;gt;&lt;br /&gt;
          &amp;lt;x3d xmlns=&lt;br /&gt;
              &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;lt;Scene&amp;gt;&lt;br /&gt;
                 &amp;lt;Shape&amp;gt;&amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;lt;/Scene&amp;gt;                &lt;br /&gt;
           &amp;lt;/x3d&amp;gt;&lt;br /&gt;
           &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;       &lt;br /&gt;
          // The namespace URIs&lt;br /&gt;
           var xhtml_ns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;;&lt;br /&gt;
           var x3d_ns =&lt;br /&gt;
              &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;;&lt;br /&gt;
          // Get elements using namespaces&lt;br /&gt;
           var h1 = &lt;br /&gt;
               document.getElementsByTagNameNS(xhtml_ns, &amp;quot;h1&amp;quot;);            &lt;br /&gt;
           var box = &lt;br /&gt;
               document.getElementsByTagNameNS(x3d_ns, &amp;quot;Box&amp;quot;)[0];&lt;br /&gt;
          // Edit an attribute of the &amp;lt;Box /&amp;gt; element&lt;br /&gt;
           alert(box.getAttributeNS(null, &amp;quot;size&amp;quot;));&lt;br /&gt;
           box.setAttributeNS(null, &amp;quot;size&amp;quot;, &amp;quot;2 2 2&amp;quot;);    &lt;br /&gt;
           alert(box.getAttributeNS(null, &amp;quot;size&amp;quot;));&lt;br /&gt;
           &amp;lt;/script&amp;gt;&lt;br /&gt;
           &amp;lt;/body&amp;gt;&lt;br /&gt;
&lt;br /&gt;
3) Events can be used to interact with the content&lt;br /&gt;
&lt;br /&gt;
            &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
            &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;, &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
              &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;body&amp;gt;&lt;br /&gt;
               &amp;lt;x3d xmlns=&lt;br /&gt;
                   &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
                   &amp;lt;Scene&amp;gt;&lt;br /&gt;
                       &amp;lt;Transform&amp;gt;&lt;br /&gt;
                           &amp;lt;Shape&amp;gt;&amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
                           &amp;lt;/Shape&amp;gt;&lt;br /&gt;
                           &amp;lt;TouchSensor id=&amp;quot;ts&amp;quot; DEF=&amp;quot;ts&amp;quot; /&amp;gt;&lt;br /&gt;
                       &amp;lt;/Transform&amp;gt;&lt;br /&gt;
                   &amp;lt;/Scene&amp;gt;                &lt;br /&gt;
               &amp;lt;/x3d&amp;gt;&lt;br /&gt;
               &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;                    &lt;br /&gt;
               // The namespace URIs&lt;br /&gt;
               var xhtml_ns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;;&lt;br /&gt;
                var x3d_ns = &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;;&lt;br /&gt;
               // Get elements using namespaces&lt;br /&gt;
                var h1 =  document.getElementsByTagNameNS(xhtml_ns, &amp;quot;h1&amp;quot;);     &lt;br /&gt;
               var x3d = document.getElementsByTagNameNS(x3d_ns, &amp;quot;x3d&amp;quot;)[0];        &lt;br /&gt;
               var ts = x3d.getElementsByTagName(&amp;quot;TouchSensor&amp;quot;)[0];&lt;br /&gt;
               alert(&amp;quot;ts=&amp;quot; + ts);&lt;br /&gt;
               ts.addEventListener(&amp;quot;touchTime&amp;quot;, function() {&lt;br /&gt;
                   alert(&amp;quot;clicked&amp;quot;);&lt;br /&gt;
               }, false);&lt;br /&gt;
               &amp;lt;/script&amp;gt;&lt;br /&gt;
            &amp;lt;/body&amp;gt;&lt;br /&gt;
            &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
4) The position of the content in the document defines the position of the visible elements&lt;br /&gt;
&lt;br /&gt;
            The X3D element should also define the position where the content will be integrated into the html page. &lt;br /&gt;
            Simular how e.g. SVG or canvas works. A decoupled mechanisms will confuse application developer&lt;br /&gt;
&lt;br /&gt;
===Implementation===&lt;br /&gt;
&lt;br /&gt;
The X3DOM model should be implemented as native browser feature, simular to SVG, in the future. Current test-implementation utilize the object/SAI model internally. In addition test-versions based on the Canvas3D layer exist. Both need a browser-extension right now to synchronize and update the DOM changes&lt;br /&gt;
&lt;br /&gt;
=Future work=&lt;br /&gt;
&lt;br /&gt;
Some topics might become relevant once HTML5 is established as a formal W3C Recommendation. These are not part of our current planned work.&lt;br /&gt;
&lt;br /&gt;
* Publishing [http://www.web3d.org/x3d/specifications X3D Specifications] in HTML5&lt;br /&gt;
* Other topics as needed&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5&amp;diff=2057</id>
		<title>X3D and HTML5</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_and_HTML5&amp;diff=2057"/>
				<updated>2009-05-22T22:14:07Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Goal=&lt;br /&gt;
&lt;br /&gt;
The [http://www.web3D.org/x3d X3D Working Group] will participate in the [http://www.w3.org/html/wg HTML Working Group] for the purpose of best integrating X3D with HTML.&lt;br /&gt;
&lt;br /&gt;
This effort has strategic importance for Web3D.  We intend to establish a solid foundation for X3D to properly support 3D graphics in HTML5.&lt;br /&gt;
&lt;br /&gt;
=HTML5=&lt;br /&gt;
&lt;br /&gt;
The [http://www.w3.org/html/wg HTML working group] page states:&lt;br /&gt;
&lt;br /&gt;
        What is HTML?  HTML is the publishing language of the World Wide Web.&lt;br /&gt;
&lt;br /&gt;
The latest editor's draft Hypertext Markup Language (HTML) recommendation states:&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html HTML 5] W3C Working Draft&lt;br /&gt;
        A vocabulary and associated APIs for HTML and XHTML&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes 13.2 Declarative 3D scenes]&lt;br /&gt;
        Embedding 3D imagery into XHTML documents is the domain of X3D,&lt;br /&gt;
        or technologies based on X3D that are namespace-aware.&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#the-object-element 4.8.5 The object element]&lt;br /&gt;
        The object element can represent an external resource, which, depending on&lt;br /&gt;
        the type of the resource, will either be treated as an image, as a nested&lt;br /&gt;
        browsing context, or as an external resource to be processed by a plugin.&lt;br /&gt;
&lt;br /&gt;
        [http://dev.w3.org/html5/spec/Overview.html#the-param-element 4.8.6 The param element]&lt;br /&gt;
        The param element defines parameters for plugins invoked by object elements.&lt;br /&gt;
&lt;br /&gt;
=Technical Tasks=&lt;br /&gt;
&lt;br /&gt;
We are working on the following tasks.&lt;br /&gt;
* Ensure that all HTML5 questions and issues relative to X3D are properly considered and answered.&lt;br /&gt;
* Document how native X3D in .xml encoding can be best be embedded inside an HTML5 document, typically in a namespace-aware fashion&lt;br /&gt;
* Demonstrate X3D+HTML5 examples on the [http://www.web3D.org Web3D Consortium] website&lt;br /&gt;
* Examine how X3D pertains to related HTML5 tags (such as object and canvas) that are used for plugin-type content&lt;br /&gt;
* Track MIME type issues&lt;br /&gt;
* Examine overall interoperability issues:  combined X3D and HTML content with one floating over the other&lt;br /&gt;
** X3D scene with transparent background floating over HTML document or desktop&lt;br /&gt;
** HTML text overlay laid out over an X3D scene as help&lt;br /&gt;
* Identify API issues of mutual interest (such as DOM, Ajax and XHR) for further developmental work&lt;br /&gt;
&lt;br /&gt;
=Work Support=&lt;br /&gt;
&lt;br /&gt;
* Maintain this X3D and HTML5 wiki page to track issues and progress&lt;br /&gt;
* Identify people in HTML5 working group who want to collaborate with us on these issues&lt;br /&gt;
* Report regularly on efforts to [mailto:x3d@web3d.org x3d@web3d.org mailing list] and in our every-other-week X3D working group teleconferences&lt;br /&gt;
* Discussions to occur on the [mailto:x3d@web3d.org x3d@web3d.org mailing list] and [mailto:public-html@w3.org public-html@w3.org mailing list]&lt;br /&gt;
* Other tasks and efforts as needed&lt;br /&gt;
&lt;br /&gt;
=Participation=&lt;br /&gt;
&lt;br /&gt;
Relevant HTML5 and W3C information:&lt;br /&gt;
* [http://www.w3.org/html/wg HTML Working Group] especially [http://www.w3.org/html/wg/#who Membership and Participation]&lt;br /&gt;
* [http://www.w3.org World Wide Web Consortium (W3C)]&lt;br /&gt;
* [http://www.w3.org/Consortium/Process W3C Process Document]&lt;br /&gt;
&lt;br /&gt;
The following individuals have volunteered to serve as X3D Working Group representatives in the HTML5 Working Group.&lt;br /&gt;
* Johannes Behr, [http://instantreality.org Instant Reality], Fraunhofer Research, Darmstadt Germany&lt;br /&gt;
* [http://web.nps.navy.mil/~brutzman Don Brutzman], Naval Postgraduate School (Web3D-W3C liaison and W3C Advisory Committee representative), Monterey California USA&lt;br /&gt;
* John Stewart, [http://www.crc.ca/FreeWRL FreeWrl], Communications Research Center (CRC) Canada&lt;br /&gt;
* Joe Williams, [http://hypermultimedia.com HyperMultiMedia], Santa Rosa California USA&lt;br /&gt;
&lt;br /&gt;
Any other [http://www.web3D.org Web3D Consortium] members who are interested in serving as one of our X3D Working Group representatives is asked to review the HTML working group membership materials, notify the X3D working group that you are interested, and describe what your goals will be.&lt;br /&gt;
&lt;br /&gt;
=Meetings=&lt;br /&gt;
&lt;br /&gt;
Our weekly X3D and HTML5 teleconference is 0800-0900 (pacific time) each Tuesday.&lt;br /&gt;
&lt;br /&gt;
We are requesting membership for Web3D participants in W3C HTML5.  Don will report to W3C our list of participants, passwords and access will then be provided.&lt;br /&gt;
&lt;br /&gt;
=Annotated References=&lt;br /&gt;
&amp;lt;!-- TODO descriptive sentences --&amp;gt;&lt;br /&gt;
X3D and HTML4&lt;br /&gt;
* [http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D] shows how to place X3D objects within an HTML page&lt;br /&gt;
* [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.&lt;br /&gt;
* [http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html X3D Abstract Specification]&lt;br /&gt;
* [http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html X3D Scene Access Interface (SAI)] Edition 2&lt;br /&gt;
** [http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument 6.3.13 importDocument] service is a utility request to import a W3C DOM document or document fragment and convert it to an X3D scene.&lt;br /&gt;
&lt;br /&gt;
HTML4 and XHTML&lt;br /&gt;
* [http://www.w3.org/TR/html4 HTML 4.01] HyperText Markup Language (HTML)&lt;br /&gt;
* [http://www.w3.org/TR/xhtml1/ XHTML] Extensible HyperText Markup Language (XHTML)&lt;br /&gt;
&lt;br /&gt;
HTML5&lt;br /&gt;
* [http://dev.w3.org/html5/spec/Overview.html#embedded-content-0 4.8 Embedded content] &lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-figure-element 4.8.1 The figure element] represents some flow content, optionally with a caption, which can be moved away from the main flow of the document without affecting the document's meaning.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-img-element 4.8.2 The img element] represents an image.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-iframe-element 4.8.3 The iframe element] represents a nested browsing context.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-embed-element 4.8.4 The embed element] represents an integration point for an external (typically non-HTML) application or interactive content.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-object-element 4.8.5 The object element] can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-param-element 4.8.6 The param element] defines parameters for plugins invoked by object elements. It does not represent anything on its own.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#video 4.8.7 The video element] represents a video or movie.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#audio 4.8.8 The audio element] is a media element whose media data is ostensibly audio data.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#source 4.8.9 The source element] allows authors to specify multiple media resources for media elements. It does not represent anything on its own.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#media-elements 4.8.10 Media elements] are used to present audio data, or video and audio data, to the user. &lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-canvas-element 4.8.11 The canvas element] represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-map-element 4.8.12 The map element], in conjunction with any area element descendants, defines an image map. The element represents its children.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-area-element 4.8.13 The area element] represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#the-image-element 4.8.14 Image maps] allows geometric areas on an image to be associated with hyperlinks.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#mathml 4.8.15 MathML] from the [http://dev.w3.org/html5/spec/Overview.html#mathml-namespace MathML namespace] falls into the embedded content  category for the purposes of the content models in this specification.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#svg 4.8.16 SVG] from the [http://dev.w3.org/html5/spec/Overview.html#svg-namespace SVG namespace] falls into the embedded content category for the purposes of the content models in this specification.&lt;br /&gt;
** [http://dev.w3.org/html5/spec/Overview.html#dimension-attributes 4.8.17 Dimension attributes]&lt;br /&gt;
&lt;br /&gt;
=API details under discussion=&lt;br /&gt;
&lt;br /&gt;
We have discussed Johannes' message of 25 March 2009 + responses (Subject:  Re: Khronos Press Releases etc.) that included an X3DOM-connector.pdf diagram regarding how X3D might work with DOM, HTML etc.  Also discussed the thread on Khronos' presumed upcoming work on Canvas3D element, and past work on Ajax3D.&lt;br /&gt;
&lt;br /&gt;
These and other API topics are all technically related, and of interest, but have varying degrees of maturity.&lt;br /&gt;
&lt;br /&gt;
The primary objective of the current effort is to support X3D and HTML5.  Further work on DOM and other APIs is likely to evolve and spin off from this central effort.&lt;br /&gt;
&lt;br /&gt;
==X3DOM proposal==&lt;br /&gt;
&lt;br /&gt;
===Basics===&lt;br /&gt;
&lt;br /&gt;
The object element represents external resource like pdf-documents, movies or x3d-worlds. This works nicely for isolated content and applications which are unrelated to the surrounding xhtml-document. If the web-application developer would like to access and manipulate the object content he or she has to deal with object or plugin specific interfaces. e.g. X3D browser should provide a Scene Access Interface (SAI). &lt;br /&gt;
&lt;br /&gt;
The X3DOM model tires to ease the development of applications which needs to modify the X3D world content during runtime by following and respecting some basic xhtml rules:&lt;br /&gt;
&lt;br /&gt;
1) Declarative XML content is part of the DOM tree; Embedded with a separate xml namespace&lt;br /&gt;
&lt;br /&gt;
        &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
        &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
        &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
        &amp;lt;body&amp;gt;&lt;br /&gt;
          &amp;lt;x3d:x3d xmlns:x3d=&amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;x3d:Scene&amp;gt;&lt;br /&gt;
                &amp;lt;x3d:Shape&amp;gt;&amp;lt;x3d:Box x3d:size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&amp;lt;/x3d:Shape&amp;gt;&lt;br /&gt;
            &amp;lt;/x3d:Scene&amp;gt;                &lt;br /&gt;
          &amp;lt;/x3d:x3d&amp;gt;&lt;br /&gt;
        &amp;lt;/body&amp;gt;&lt;br /&gt;
        &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
2) The DOM elements can be used to read and manipulate the content&lt;br /&gt;
&lt;br /&gt;
         &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
         &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;,&amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
           &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
         &amp;lt;body&amp;gt;&lt;br /&gt;
          &amp;lt;x3d xmlns=&lt;br /&gt;
              &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
             &amp;lt;Scene&amp;gt;&lt;br /&gt;
                 &amp;lt;Shape&amp;gt;&amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&amp;lt;/Shape&amp;gt;&lt;br /&gt;
             &amp;lt;/Scene&amp;gt;                &lt;br /&gt;
           &amp;lt;/x3d&amp;gt;&lt;br /&gt;
           &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;       &lt;br /&gt;
          // The namespace URIs&lt;br /&gt;
           var xhtml_ns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;;&lt;br /&gt;
           var x3d_ns =&lt;br /&gt;
              &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;;&lt;br /&gt;
          // Get elements using namespaces&lt;br /&gt;
           var h1 = &lt;br /&gt;
               document.getElementsByTagNameNS(xhtml_ns, &amp;quot;h1&amp;quot;);            &lt;br /&gt;
           var box = &lt;br /&gt;
               document.getElementsByTagNameNS(x3d_ns, &amp;quot;Box&amp;quot;)[0];&lt;br /&gt;
          // Edit an attribute of the &amp;lt;Box /&amp;gt; element&lt;br /&gt;
           alert(box.getAttributeNS(null, &amp;quot;size&amp;quot;));&lt;br /&gt;
           box.setAttributeNS(null, &amp;quot;size&amp;quot;, &amp;quot;2 2 2&amp;quot;);    &lt;br /&gt;
           alert(box.getAttributeNS(null, &amp;quot;size&amp;quot;));&lt;br /&gt;
           &amp;lt;/script&amp;gt;&lt;br /&gt;
           &amp;lt;/body&amp;gt;&lt;br /&gt;
&lt;br /&gt;
3) Events can be used to interact with the content&lt;br /&gt;
&lt;br /&gt;
            &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot; ?&amp;gt;&lt;br /&gt;
            &amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;, &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;&lt;br /&gt;
              &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;body&amp;gt;&lt;br /&gt;
               &amp;lt;x3d xmlns=&lt;br /&gt;
                   &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;&amp;gt;&lt;br /&gt;
                   &amp;lt;Scene&amp;gt;&lt;br /&gt;
                       &amp;lt;Transform&amp;gt;&lt;br /&gt;
                           &amp;lt;Shape&amp;gt;&amp;lt;Box size=&amp;quot;4 4 4&amp;quot; /&amp;gt;&lt;br /&gt;
                           &amp;lt;/Shape&amp;gt;&lt;br /&gt;
                           &amp;lt;TouchSensor id=&amp;quot;ts&amp;quot; DEF=&amp;quot;ts&amp;quot; /&amp;gt;&lt;br /&gt;
                       &amp;lt;/Transform&amp;gt;&lt;br /&gt;
                   &amp;lt;/Scene&amp;gt;                &lt;br /&gt;
               &amp;lt;/x3d&amp;gt;&lt;br /&gt;
               &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;                    &lt;br /&gt;
               // The namespace URIs&lt;br /&gt;
               var xhtml_ns = &amp;quot;http://www.w3.org/1999/xhtml&amp;quot;;&lt;br /&gt;
                var x3d_ns = &amp;quot;http://www.web3d.org/specifications/x3d-3.0.xsd&amp;quot;;&lt;br /&gt;
               // Get elements using namespaces&lt;br /&gt;
                var h1 =  document.getElementsByTagNameNS(xhtml_ns, &amp;quot;h1&amp;quot;);     &lt;br /&gt;
               var x3d = document.getElementsByTagNameNS(x3d_ns, &amp;quot;x3d&amp;quot;)[0];        &lt;br /&gt;
               var ts = x3d.getElementsByTagName(&amp;quot;TouchSensor&amp;quot;)[0];&lt;br /&gt;
               alert(&amp;quot;ts=&amp;quot; + ts);&lt;br /&gt;
               ts.addEventListener(&amp;quot;touchTime&amp;quot;, function() {&lt;br /&gt;
                   alert(&amp;quot;clicked&amp;quot;);&lt;br /&gt;
               }, false);&lt;br /&gt;
               &amp;lt;/script&amp;gt;&lt;br /&gt;
            &amp;lt;/body&amp;gt;&lt;br /&gt;
            &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
4) The position of the content in the document defines the position of the visible elements&lt;br /&gt;
&lt;br /&gt;
            The X3D element should also define the position where the content will be integrated into the html page. &lt;br /&gt;
            Simular how e.g. SVG or canvas works. A decoupled mechanisms will confuse application developer&lt;br /&gt;
&lt;br /&gt;
===Implementation===&lt;br /&gt;
&lt;br /&gt;
The X3DOM model should be implemented as native browser feature, simular to SVG, in the future. Current test-implementation utilize the object/SAI model internally. In addition test-versions based on the Canvas3D layer exist. Both need a browser-extension right now to synchronize and update the DOM changes&lt;br /&gt;
&lt;br /&gt;
=Future work=&lt;br /&gt;
&lt;br /&gt;
Some topics might become relevant once HTML5 is established as a formal W3C Recommendation. These are not part of our current planned work.&lt;br /&gt;
&lt;br /&gt;
* Publishing [http://www.web3d.org/x3d/specifications X3D Specifications] in HTML5&lt;br /&gt;
* Other topics as needed&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1725</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1725"/>
				<updated>2008-08-06T21:19:04Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* Specification Notes */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
    &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
 &amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| Follows the X3D-Spec: read on foo gives you the field value,&lt;br /&gt;
but foo() as function gets also called. Breaks the ECMAScript spec.&lt;br /&gt;
 |-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Not Expected&lt;br /&gt;
| No support for inputOutput&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Not Expected&lt;br /&gt;
| same as bscontact but addition initialize() is not called. Breaks the ECMAScript spec&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| reading foo returns the function not the field value.&lt;br /&gt;
foo() funciton gets called. Does not break X3D or ECMA spec&lt;br /&gt;
but field value is not accessible.&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Not Expected&lt;br /&gt;
| reading foo does not work but also no function called ?!?&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Not Expected&lt;br /&gt;
| the value of foo is the function and the foo() function is&lt;br /&gt;
not called.&lt;br /&gt;
&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
== Specification Notes ==&lt;br /&gt;
&lt;br /&gt;
Basic Problem:&lt;br /&gt;
&lt;br /&gt;
A) The X3D-spec (not VRML) supports intputOutput Fields in Scripts&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Scriptlanguages)&lt;br /&gt;
&lt;br /&gt;
B) Field values can be read or written in the Script code&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Accessingfieldsandevents)&lt;br /&gt;
&lt;br /&gt;
C) Events received by the Script node are passed to the appropriate scripting language method in the script. The method's name depends on the language type used.&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Eventhandling)&lt;br /&gt;
&lt;br /&gt;
D) ECMAScript X3D-binding: If the function represents an inputOutput field, the name of the function shall be the same name as the field declaration, without the set_ or _changed modifiers&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19777-1-(X3DLanguageBindings-ECMAScript/Part1/concepts.html#ReceivingEvents)&lt;br /&gt;
&lt;br /&gt;
E) ECMAScript: variable and function both are objects in the same namespace.&lt;br /&gt;
(http://www.ecma-international.org/publications/standards/Ecma-262.htm)&lt;br /&gt;
&lt;br /&gt;
=&amp;gt; There is variable/function-shadowing problem ((E) brakes (D)) which prevents reading/writing (B) or receiving of events (C)&lt;br /&gt;
&lt;br /&gt;
-------------------------------------------&lt;br /&gt;
Solution:&lt;br /&gt;
&lt;br /&gt;
_S1_) Leave the X3D-Spec like it is (This breaks the ECMAScirpt spec (E))&lt;br /&gt;
-----------------------------------------------&lt;br /&gt;
There are ways to abuse the ECMAScript impl. (e.g SpiderMonkey)&lt;br /&gt;
to work this way but still breaks the spec. (and slows down the object access)&lt;br /&gt;
However there are some major browser that did exactly this&lt;br /&gt;
&lt;br /&gt;
code snip:&lt;br /&gt;
&lt;br /&gt;
    Script {&lt;br /&gt;
    inputOutput SFBool foo TRUE&lt;br /&gt;
      ...&lt;br /&gt;
      function initialize () {&lt;br /&gt;
           Browser.println( 'value: '+ foo);&lt;br /&gt;
      }&lt;br /&gt;
      ...&lt;br /&gt;
      function foo (value,timeStamp) {&lt;br /&gt;
          Browser.println( 'value: '+ value);&lt;br /&gt;
       }&lt;br /&gt;
&lt;br /&gt;
_S2_) Change the X3D-Spec, use set_foo for the event handler&lt;br /&gt;
-----------------------------------------------&lt;br /&gt;
change the name of the function for inputOuput from &amp;quot;same as field&amp;quot; to&lt;br /&gt;
&amp;quot;set_&amp;quot; prefix&lt;br /&gt;
&lt;br /&gt;
code snip:&lt;br /&gt;
&lt;br /&gt;
    Script {&lt;br /&gt;
    inputOutput SFBool foo TRUE&lt;br /&gt;
      ...&lt;br /&gt;
      function initialize () {&lt;br /&gt;
           Browser.println( 'value: '+ foo);&lt;br /&gt;
      }&lt;br /&gt;
      ...&lt;br /&gt;
      function set_foo (value,timeStamp) {&lt;br /&gt;
          Browser.println( 'value: '+ value);&lt;br /&gt;
       }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
_S3_) Change the X3D-Spec, use foo_value/set_foo or foo_changed to access the value&lt;br /&gt;
-----------------------------------------------&lt;br /&gt;
change the field-value access funciton&lt;br /&gt;
&lt;br /&gt;
code snip:&lt;br /&gt;
&lt;br /&gt;
    Script {&lt;br /&gt;
    inputOutput SFBool foo TRUE&lt;br /&gt;
      ...&lt;br /&gt;
      function initialize () {&lt;br /&gt;
           Browser.println( 'value: '+ foo_value);&lt;br /&gt;
      }&lt;br /&gt;
      ...&lt;br /&gt;
      function foo (value,timeStamp) {&lt;br /&gt;
          Browser.println( 'value: '+ value);&lt;br /&gt;
       }&lt;br /&gt;
&lt;br /&gt;
---------------------&lt;br /&gt;
conclusion:&lt;br /&gt;
&lt;br /&gt;
It is a mess right now and I would suggest that we change the spec&lt;br /&gt;
to change the event-handling function form foo to set_foo;&lt;br /&gt;
&lt;br /&gt;
Something like:&lt;br /&gt;
&lt;br /&gt;
ECMASCRIPT: 4 Concepts: 4.3.5.4 Receiving events&lt;br /&gt;
&lt;br /&gt;
OLD:&lt;br /&gt;
&lt;br /&gt;
Events sent to the containing node are passed to the corresponding ECMAScript function in the script. The function's name is the same as the field and is passed two arguments. If the function represents an inputOutput field, the name of the function shall be the same name as the field declaration, without the set_ or _changed modifiers&lt;br /&gt;
&lt;br /&gt;
NEW:&lt;br /&gt;
&lt;br /&gt;
Events sent to the containing node are passed to the corresponding ECMAScript function in the script. Two arguments, the value and the timestamp, are passed while calling the function. For inputOnly fields the function's name is the same as the field. If the function represents an inputOutput field, the name of the function shall be the same name as the field declaration plus a set_ prefix.&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1724</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1724"/>
				<updated>2008-08-06T21:17:58Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* Specification Notes */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
    &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
 &amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| Follows the X3D-Spec: read on foo gives you the field value,&lt;br /&gt;
but foo() as function gets also called. Breaks the ECMAScript spec.&lt;br /&gt;
 |-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Not Expected&lt;br /&gt;
| No support for inputOutput&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Not Expected&lt;br /&gt;
| same as bscontact but addition initialize() is not called. Breaks the ECMAScript spec&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| reading foo returns the function not the field value.&lt;br /&gt;
foo() funciton gets called. Does not break X3D or ECMA spec&lt;br /&gt;
but field value is not accessible.&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Not Expected&lt;br /&gt;
| reading foo does not work but also no function called ?!?&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Not Expected&lt;br /&gt;
| the value of foo is the function and the foo() function is&lt;br /&gt;
not called.&lt;br /&gt;
&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
== Specification Notes ==&lt;br /&gt;
&lt;br /&gt;
Basic Problem:&lt;br /&gt;
&lt;br /&gt;
A) The X3D-spec (not VRML) supports intputOutput Fields in Scripts&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Scriptlanguages)&lt;br /&gt;
&lt;br /&gt;
B) Field values can be read or written in the Script code&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Accessingfieldsandevents)&lt;br /&gt;
&lt;br /&gt;
C) Events received by the Script node are passed to the appropriate scripting language method in the script. The method's name depends on the language type used.&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Eventhandling)&lt;br /&gt;
&lt;br /&gt;
D) ECMAScript X3D-binding: If the function represents an inputOutput field, the name of the function shall be the same name as the field declaration, without the set_ or _changed modifiers&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19777-1-(X3DLanguageBindings-ECMAScript/Part1/concepts.html#ReceivingEvents)&lt;br /&gt;
&lt;br /&gt;
E) ECMAScript: variable and function both are objects in the same namespace.&lt;br /&gt;
(http://www.ecma-international.org/publications/standards/Ecma-262.htm)&lt;br /&gt;
&lt;br /&gt;
=&amp;gt; There is variable/function-shadowing problem ((E) brakes (D)) which prevents reading/writing (B) or receiving of events (C)&lt;br /&gt;
&lt;br /&gt;
-------------------------------------------&lt;br /&gt;
Solution:&lt;br /&gt;
&lt;br /&gt;
_S1_) Leave the X3D-Spec like it is (This breaks the ECMAScirpt spec (E))&lt;br /&gt;
-----------------------------------------------&lt;br /&gt;
There are ways to abuse the ECMAScript impl. (e.g SpiderMonkey)&lt;br /&gt;
to work this way but still breaks the spec. (and slows down the object access)&lt;br /&gt;
However there are some major browser that did exactly this&lt;br /&gt;
&lt;br /&gt;
code snip:&lt;br /&gt;
&lt;br /&gt;
    Script {&lt;br /&gt;
    inputOutput SFBool foo TRUE&lt;br /&gt;
      ...&lt;br /&gt;
      function initialize () {&lt;br /&gt;
           Browser.println( 'value: '+ foo);&lt;br /&gt;
      }&lt;br /&gt;
      ...&lt;br /&gt;
      function foo (value,timeStamp) {&lt;br /&gt;
          Browser.println( 'value: '+ value);&lt;br /&gt;
       }&lt;br /&gt;
&lt;br /&gt;
_S2_) Change the X3D-Spec, use set_foo for the event handler&lt;br /&gt;
-----------------------------------------------&lt;br /&gt;
change the name of the function for inputOuput from &amp;quot;same as field&amp;quot; to&lt;br /&gt;
&amp;quot;set_&amp;quot; prefix&lt;br /&gt;
&lt;br /&gt;
code snip:&lt;br /&gt;
&lt;br /&gt;
    Script {&lt;br /&gt;
    inputOutput SFBool foo TRUE&lt;br /&gt;
      ...&lt;br /&gt;
      function initialize () {&lt;br /&gt;
           Browser.println( 'value: '+ foo);&lt;br /&gt;
      }&lt;br /&gt;
      ...&lt;br /&gt;
      function set_foo (value,timeStamp) {&lt;br /&gt;
          Browser.println( 'value: '+ value);&lt;br /&gt;
       }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
_S3_) Change the X3D-Spec, use foo_value/set_foo or foo_changed to access the value&lt;br /&gt;
-----------------------------------------------&lt;br /&gt;
change the field-value access funciton&lt;br /&gt;
&lt;br /&gt;
code snip:&lt;br /&gt;
&lt;br /&gt;
    Script {&lt;br /&gt;
    inputOutput SFBool foo TRUE&lt;br /&gt;
      ...&lt;br /&gt;
      function initialize () {&lt;br /&gt;
           Browser.println( 'value: '+ foo_value);&lt;br /&gt;
      }&lt;br /&gt;
      ...&lt;br /&gt;
      function foo (value,timeStamp) {&lt;br /&gt;
          Browser.println( 'value: '+ value);&lt;br /&gt;
       }&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1723</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1723"/>
				<updated>2008-08-06T21:17:09Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
    &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
 &amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| Follows the X3D-Spec: read on foo gives you the field value,&lt;br /&gt;
but foo() as function gets also called. Breaks the ECMAScript spec.&lt;br /&gt;
 |-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Not Expected&lt;br /&gt;
| No support for inputOutput&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Not Expected&lt;br /&gt;
| same as bscontact but addition initialize() is not called. Breaks the ECMAScript spec&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| reading foo returns the function not the field value.&lt;br /&gt;
foo() funciton gets called. Does not break X3D or ECMA spec&lt;br /&gt;
but field value is not accessible.&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Not Expected&lt;br /&gt;
| reading foo does not work but also no function called ?!?&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Not Expected&lt;br /&gt;
| the value of foo is the function and the foo() function is&lt;br /&gt;
not called.&lt;br /&gt;
&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
== Specification Notes ==&lt;br /&gt;
&lt;br /&gt;
Basic Problem:&lt;br /&gt;
&lt;br /&gt;
A) The X3D-spec (not VRML) supports intputOutput Fields in Scripts&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Scriptlanguages)&lt;br /&gt;
&lt;br /&gt;
B) Field values can be read or written in the Script code&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Accessingfieldsandevents)&lt;br /&gt;
&lt;br /&gt;
C) Events received by the Script node are passed to the appropriate scripting language method in the script. The method's name depends on the language type used.&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19775-X3DAbstractSpecification_Revision1_to_Part1/Part01/components/scripting.html#Eventhandling)&lt;br /&gt;
&lt;br /&gt;
D) ECMAScript X3D-binding: If the function represents an inputOutput field, the name of the function shall be the same name as the field declaration, without the set_ or _changed modifiers&lt;br /&gt;
(http://www.web3d.org/x3d/specifications/ISO-IEC-19777-1-(X3DLanguageBindings-ECMAScript/Part1/concepts.html#ReceivingEvents)&lt;br /&gt;
&lt;br /&gt;
E) ECMAScript: variable and function both are objects in the same namespace.&lt;br /&gt;
(http://www.ecma-international.org/publications/standards/Ecma-262.htm)&lt;br /&gt;
&lt;br /&gt;
=&amp;gt; There is variable/function-shadowing problem ((E) brakes (D)) which prevents reading/writing (B) or receiving of events (C)&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1722</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1722"/>
				<updated>2008-08-06T21:15:06Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* Browser Results */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
    &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
 &amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| Follows the X3D-Spec: read on foo gives you the field value,&lt;br /&gt;
but foo() as function gets also called. Breaks the ECMAScript spec.&lt;br /&gt;
 |-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Not Expected&lt;br /&gt;
| No support for inputOutput&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Not Expected&lt;br /&gt;
| same as bscontact but addition initialize() is not called. Breaks the ECMAScript spec&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| reading foo returns the function not the field value.&lt;br /&gt;
foo() funciton gets called. Does not break X3D or ECMA spec&lt;br /&gt;
but field value is not accessible.&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Not Expected&lt;br /&gt;
| reading foo does not work but also no function called ?!?&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Not Expected&lt;br /&gt;
| the value of foo is the function and the foo() function is&lt;br /&gt;
not called.&lt;br /&gt;
&lt;br /&gt;
|}&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1721</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1721"/>
				<updated>2008-08-06T21:14:14Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* Browser Results */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
    &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
 &amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| Follows the X3D-Spec: read on foo gives you the field value,&lt;br /&gt;
but foo() as function gets also called. Breaks the ECMAScript spec.&lt;br /&gt;
 |-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Not Expected&lt;br /&gt;
| No support for inputOutput&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Not Expected&lt;br /&gt;
| same as bscontact but addition initialize() is not called. Breaks the ECMAScript spec&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| reading foo returns the function not the field value.&lt;br /&gt;
foo() funciton gets called. Does not break X3D or ECMA spec&lt;br /&gt;
but field value is not accessible.&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|}&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1720</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1720"/>
				<updated>2008-08-06T21:09:59Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
    &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
 &amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| No objects showing, global not supported&lt;br /&gt;
|-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Untested&lt;br /&gt;
|&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| Both spheres the same intensity, expect attenuation not supported&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|}&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1719</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1719"/>
				<updated>2008-08-06T21:09:18Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: Using inputOuput Fields in scripts&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt; &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
 &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
&amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| No objects showing, global not supported&lt;br /&gt;
|-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Untested&lt;br /&gt;
|&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| Both spheres the same intensity, expect attenuation not supported&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|}&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1718</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1718"/>
				<updated>2008-08-06T21:08:24Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
&amp;lt;/X3D&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Browser Results ==&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot; border=&amp;quot;1&amp;quot;&lt;br /&gt;
|-&lt;br /&gt;
! Browser&lt;br /&gt;
! Version&lt;br /&gt;
! Result&lt;br /&gt;
! Notes&lt;br /&gt;
|-&lt;br /&gt;
| BS Contact&lt;br /&gt;
| 7.107&lt;br /&gt;
| Not Expected&lt;br /&gt;
| No objects showing, global not supported&lt;br /&gt;
|-&lt;br /&gt;
| FreeWRL&lt;br /&gt;
| &lt;br /&gt;
| Untested&lt;br /&gt;
|&lt;br /&gt;
&lt;br /&gt;
|-&lt;br /&gt;
| Octaga&lt;br /&gt;
| 2.2.0.12&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Instant Reality&lt;br /&gt;
| 2.0.0_beta4&lt;br /&gt;
| Not Expected &lt;br /&gt;
| Both spheres the same intensity, expect attenuation not supported&lt;br /&gt;
| &lt;br /&gt;
|-&lt;br /&gt;
| Vivaty&lt;br /&gt;
| 2.1&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|-&lt;br /&gt;
| Xj3D&lt;br /&gt;
| 2_M1_DEV_2008-06_02&lt;br /&gt;
| Expected&lt;br /&gt;
|&lt;br /&gt;
|}&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1717</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1717"/>
				<updated>2008-08-06T21:07:51Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: Using inputOuput Fields in scripts&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Using inputOuput Fields in scripts &lt;br /&gt;
 &amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
  &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;lt;/X3D&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1716</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1716"/>
				<updated>2008-08-06T21:07:14Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
  &amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
  &amp;lt;/X3D&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1715</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1715"/>
				<updated>2008-08-06T21:06:53Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
&amp;lt;/X3D&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1714</id>
		<title>Script-and-inputOutputField.x3d</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=Script-and-inputOutputField.x3d&amp;diff=1714"/>
				<updated>2008-08-06T20:57:18Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;X3D profile='Full' &amp;gt;&lt;br /&gt;
  &amp;lt;Scene DEF='scene'&amp;gt;&lt;br /&gt;
    &amp;lt;Viewpoint position='20 0 40'/&amp;gt;&lt;br /&gt;
    &amp;lt;Shape&amp;gt;&lt;br /&gt;
      &amp;lt;Text DEF='text' string='&amp;quot;Initialize called: FALSE&amp;quot; &amp;quot;readFoo() called: FALSE&amp;quot; &amp;quot;foo value send: FALSE&amp;quot; &amp;quot;foo function called: FALSE&amp;quot; &amp;quot;set_foo function called: FALSE&amp;quot; &amp;quot;foo_changed function called: FALSE&amp;quot;'/&amp;gt;&lt;br /&gt;
    &amp;lt;/Shape&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s1' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOutput' name='foo' type='SFFloat' value='5'/&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='readFoo' type='SFTime'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function initialize (value) {&lt;br /&gt;
    line = 'Initialized called: TRUE; foo value: ' + foo;&lt;br /&gt;
    text.string[0] = line;&lt;br /&gt;
   }&lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function readFoo (value) {     &lt;br /&gt;
   text.string[1] = 'readFoo called: TRUE, value: ' + foo;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo (value) {     &lt;br /&gt;
   text.string[3] = 'foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function set_foo (value) {     &lt;br /&gt;
   text.string[4] = 'set_foo function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
&lt;br /&gt;
  //-----------------------------&lt;br /&gt;
  function foo_changed (value) {     &lt;br /&gt;
   text.string[5] = 'foo_changed function called: TRUE; ' + value;&lt;br /&gt;
  }       &lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;TimeSensor DEF='ts' cycleInterval='3' loop='true'/&amp;gt;&lt;br /&gt;
    &amp;lt;Script DEF='s2' directOutput='true'&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='initializeOnly' name='text' type='SFNode'&amp;gt;&lt;br /&gt;
        &amp;lt;Text USE='text'/&amp;gt;&lt;br /&gt;
      &amp;lt;/field&amp;gt;&lt;br /&gt;
      &amp;lt;field accessType='inputOnly' name='fooCatcher' type='SFFloat'/&amp;gt;&amp;lt;![CDATA[ecmascript:&lt;br /&gt;
&lt;br /&gt;
  //-----------------------&lt;br /&gt;
  function fooCatcher (value) {&lt;br /&gt;
    text.string[2] = 'Foo value send: TRUE; value: ' + value;&lt;br /&gt;
  }&lt;br /&gt;
&lt;br /&gt;
  ]]&amp;gt;&lt;br /&gt;
    &amp;lt;/Script&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='fraction_changed' toNode='s1' toField='set_foo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='ts' fromField='cycleTime' toNode='s1' toField='readFoo'/&amp;gt;&lt;br /&gt;
    &amp;lt;ROUTE fromNode='s1' fromField='foo_changed' toNode='s2' toField='fooCatcher'/&amp;gt;&lt;br /&gt;
  &amp;lt;/Scene&amp;gt;&lt;br /&gt;
&amp;lt;/X3D&amp;gt;&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	<entry>
		<id>https://old.web3d.org/wiki/index.php?title=X3D_Plugfest&amp;diff=1713</id>
		<title>X3D Plugfest</title>
		<link rel="alternate" type="text/html" href="https://old.web3d.org/wiki/index.php?title=X3D_Plugfest&amp;diff=1713"/>
				<updated>2008-08-06T20:53:53Z</updated>
		
		<summary type="html">&lt;p&gt;Jbehr: /* Problem Content */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;= X3D Plugfest =&lt;br /&gt;
&lt;br /&gt;
The goal of the X3D Plugfest is to foster interoperability between X3D players.  This event will bring &lt;br /&gt;
content authors, authoring tool vendors and browser implementers together to work on interoperability&lt;br /&gt;
issues.  &lt;br /&gt;
&lt;br /&gt;
This page will be the navigation home page for the upcoming X3D Plugfest.  Content will be&lt;br /&gt;
linked from this page for everyone's review.  &lt;br /&gt;
&lt;br /&gt;
== Problem Content ==&lt;br /&gt;
&lt;br /&gt;
*[[Viewpoint-binding-0.x3d]]&lt;br /&gt;
*[[ViewpointInlineMain.x3d]]&lt;br /&gt;
*[[TopLevelTouchSensors.x3d]]&lt;br /&gt;
*[[String.x3d]]&lt;br /&gt;
*[[GlobalAttenuation.x3d]]&lt;br /&gt;
*[[Script-and-inputOutputField.x3d]]&lt;br /&gt;
&lt;br /&gt;
== Working Content ==&lt;br /&gt;
*[[MovingBox.x3d]]&lt;br /&gt;
*[[CoordMorph.x3d]]&lt;br /&gt;
&lt;br /&gt;
== Issues ==&lt;br /&gt;
&lt;br /&gt;
This is a summary of the issues discovered.&lt;br /&gt;
&lt;br /&gt;
*User Initial Position without a Viewpoint&lt;br /&gt;
*Extrusion Implementations&lt;br /&gt;
*Node fields on a proto declaration, copy or reference&lt;/div&gt;</summary>
		<author><name>Jbehr</name></author>	</entry>

	</feed>