Difference between revisions of "X3D and HTML5 examples"
From Web3D.org
Vmarchetti (Talk | contribs) m (Removed TODO item related to XHTML, XHTML being yet another has-been technology) |
|||
(79 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
− | + | Here are several examples that show different ways of combining HTML web pages and X3D scenes. | |
+ | == HelloWorld.x3d standalone scene == | ||
− | + | [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d] | |
+ | shows a simple standalone example | ||
+ | ([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and | ||
+ | [http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png]) | ||
− | + | <?xml version="1.0" encoding="UTF-8"?> | |
− | + | <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"> | |
+ | <X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' | ||
+ | xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'> | ||
+ | <head> | ||
+ | <meta name='title' content='HelloWorld.x3d'/> | ||
+ | <meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> | ||
+ | </head> | ||
+ | <Scene> | ||
+ | <Group> | ||
+ | <Viewpoint centerOfRotation='0 -1 0' | ||
+ | description='Hello world!' position='0 -1 7'/> | ||
+ | <Transform rotation='0 1 0 3'> | ||
+ | <Shape> | ||
+ | <Sphere/> | ||
+ | <Appearance> | ||
+ | <Material diffuseColor='0 0.5 1'/> | ||
+ | <ImageTexture url='"earth-topo.png"' /> | ||
+ | </Appearance> | ||
+ | </Shape> | ||
+ | </Transform> | ||
+ | <Transform translation='0 -2 0'> | ||
+ | <Shape> | ||
+ | <Text solid='false' string='"Hello" "world!"'> | ||
+ | <FontStyle justify='"MIDDLE" "MIDDLE"'/> | ||
+ | </Text> | ||
+ | <Appearance> | ||
+ | <Material diffuseColor='0.1 0.5 1'/> | ||
+ | </Appearance> | ||
+ | </Shape> | ||
+ | </Transform> | ||
+ | </Group> | ||
+ | </Scene> | ||
+ | </X3D> | ||
− | + | == HTML Anchor link to X3D document == | |
− | <object name='x3dBlock' type='model/x3d+xml' | + | HTML anchor links allow an HTML page to load the contents of an X3D scene. |
− | + | ||
+ | HTML source: | ||
+ | |||
+ | Here is my | ||
+ | <a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example</a> in X3D. | ||
+ | |||
+ | HTML result: | ||
+ | Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D. | ||
+ | |||
+ | Typically Web browser responses to a user selecting the link: | ||
+ | * Show X3D scene, if an X3D plugin is installed or native support for X3D is provided | ||
+ | * If X3D file format is unrecognized, browser might save file or else provide the user a choice to launch an external application (such as an X3D viewer or editor) | ||
+ | * Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect) | ||
+ | |||
+ | == X3D embedded using HTML5 object element == | ||
+ | September 2022 status: There are no publicly distributed plug-ins for current web browsers that display X3D content | ||
+ | referenced in an object tag. Current practice is to render X3D on a web page using a javascript library such as [https://xwdom.org X3DOM] or [https://github.com/create3000/x_ite X_ITE] | ||
+ | |||
+ | |||
+ | <object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts> | ||
<param name='src' value='aScene.x3d'> | <param name='src' value='aScene.x3d'> | ||
− | < | + | <-- fallback HTML here --> |
</object> | </object> | ||
− | * Opens nested browsing context in parent block element | + | * Goal for this example is to show some HTML5-specific attributes |
− | + | * Opens nested browsing context in parent block element | |
− | + | * Set of negotiated <param> pairs for initialization and runtime | |
− | * Set of negotiated <param> pairs | + | |
+ | == X3D served as text/html (no namespace prefix) == | ||
+ | |||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <style type=text/css'> | ||
+ | X3D { height:100%;width:100%; } | ||
+ | svg { height:100%;width:100%; } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <X3D name='x3dBlock' type='model/x3d+xml' | ||
+ | version='3.3' profile='Interchange' | ||
+ | allow-same-origin allow-scripts> | ||
+ | <Scene> | ||
+ | <Viewpoint description='Start' /> | ||
+ | <Shape> | ||
+ | <Box size="4 4 4" /> | ||
+ | </Shape> | ||
+ | <Shape> | ||
+ | <Text string='"This is X3D Text"' /> | ||
+ | </Shape> | ||
+ | </Scene> | ||
+ | </X3D> | ||
+ | <svg type='image/svg+xml' version="1.1"> | ||
+ | <ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /> | ||
+ | </svg> | ||
+ | <mathml> | ||
+ | <mrow><mi> x </mi><mo> + </mo> | ||
+ | <mrow><mi> a </mi><mo> / </mo><mi> b </mi> | ||
+ | </mrow></mrow> | ||
+ | </mathml> | ||
+ | <ruby> WWW <rt>World Wide Web</rt> | ||
+ | </ruby> | ||
+ | </body> | ||
+ | </html> | ||
− | + | == X3D served as application/xhtml+xml (with namespace prefix) == | |
<?xml version="1.0" encoding="utf-8" ?> | <?xml version="1.0" encoding="utf-8" ?> | ||
Line 47: | Line 138: | ||
</html> | </html> | ||
+ | == Possible future X3D extension - Box has added html onclick event == | ||
− | + | <?xml version="1.0" encoding="utf-8" ?> | |
+ | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <head> | ||
+ | <style type=text/css'> | ||
+ | x3d:X3D { height:200px;width:200px; } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"> | ||
+ | <Scene> | ||
+ | <Shape> | ||
+ | <Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /> | ||
+ | </Shape> | ||
+ | <Shape> | ||
+ | <Text string='"This is X3D Text"' /> | ||
+ | </Shape> | ||
+ | </Scene> | ||
+ | </x3d:X3D> | ||
+ | </body> | ||
+ | </html> | ||
− | <!DOCTYPE html> | + | * Note that addition of onclick attribute is not standard X3D |
− | <html> | + | * Preferred approach is probably to use X3D TouchSensor instead |
+ | |||
+ | == X3D - Making direct updates on the tree == | ||
+ | |||
+ | <?xml version="1.0" encoding="utf-8" ?> | ||
+ | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
<style type=text/css'> | <style type=text/css'> | ||
− | X3D { height: | + | x3d:X3D { height:200px;width:200px; } |
− | + | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
− | <X3D name='x3dBlock' | + | <x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"> |
− | + | ||
− | + | ||
<Scene> | <Scene> | ||
− | |||
<Shape> | <Shape> | ||
+ | <Appearance> | ||
+ | <Material diffuseColor="1 0 0" /> | ||
+ | </Appearance> | ||
<Box size="4 4 4" /> | <Box size="4 4 4" /> | ||
</Shape> | </Shape> | ||
Line 70: | Line 187: | ||
<Text string='"This is X3D Text"' /> | <Text string='"This is X3D Text"' /> | ||
</Shape> | </Shape> | ||
− | + | </Scene> | |
− | + | </x3d:X3D> | |
− | + | <script type="text/javascript"><! CDATA | |
− | + | var colSel = true; | |
− | + | function toggleRendering() | |
− | + | { | |
− | + | var button = document.getElementById("color"); | |
− | + | colSel = !colSel; | |
− | + | if (colSel) | |
− | + | button.value = "Blue"; | |
− | + | else | |
− | + | button.value = "Red"; | |
− | + | var mat = document.getElementsByTagName("Material"); | |
− | + | var n = mat.length; | |
+ | var aMat = mat[0]; | ||
+ | aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); | ||
+ | return false; | ||
+ | } | ||
+ | ></script> | ||
+ | <p class="case"> | ||
+ | Dynamic material update | ||
+ | <input type="button" id="color" value="Change Color" onclick="toggleRendering();" /> | ||
+ | </p> | ||
+ | </body> | ||
+ | </html> |
Latest revision as of 11:34, 6 September 2022
Here are several examples that show different ways of combining HTML web pages and X3D scenes.
Contents
- 1 HelloWorld.x3d standalone scene
- 2 HTML Anchor link to X3D document
- 3 X3D embedded using HTML5 object element
- 4 X3D served as text/html (no namespace prefix)
- 5 X3D served as application/xhtml+xml (with namespace prefix)
- 6 Possible future X3D extension - Box has added html onclick event
- 7 X3D - Making direct updates on the tree
HelloWorld.x3d standalone scene
HelloWorld.x3d shows a simple standalone example (.html and .png)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"> <X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'> <head> <meta name='title' content='HelloWorld.x3d'/> <meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> </head> <Scene> <Group> <Viewpoint centerOfRotation='0 -1 0' description='Hello world!' position='0 -1 7'/> <Transform rotation='0 1 0 3'> <Shape> <Sphere/> <Appearance> <Material diffuseColor='0 0.5 1'/> <ImageTexture url='"earth-topo.png"' /> </Appearance> </Shape> </Transform> <Transform translation='0 -2 0'> <Shape> <Text solid='false' string='"Hello" "world!"'> <FontStyle justify='"MIDDLE" "MIDDLE"'/> </Text> <Appearance> <Material diffuseColor='0.1 0.5 1'/> </Appearance> </Shape> </Transform> </Group> </Scene> </X3D>
HTML Anchor link to X3D document
HTML anchor links allow an HTML page to load the contents of an X3D scene.
HTML source:
Here is my <a href='HelloWorld.x3d' title='Link to a new X3D document'>HelloWorld example</a> in X3D.
HTML result:
Here is my HelloWorld example in X3D.
Typically Web browser responses to a user selecting the link:
- Show X3D scene, if an X3D plugin is installed or native support for X3D is provided
- If X3D file format is unrecognized, browser might save file or else provide the user a choice to launch an external application (such as an X3D viewer or editor)
- Show source (if http server X3D MIME type settings are incorrect)
X3D embedded using HTML5 object element
September 2022 status: There are no publicly distributed plug-ins for current web browsers that display X3D content referenced in an object tag. Current practice is to render X3D on a web page using a javascript library such as X3DOM or X_ITE
<object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts> <param name='src' value='aScene.x3d'> <-- fallback HTML here --> </object>
- Goal for this example is to show some HTML5-specific attributes
- Opens nested browsing context in parent block element
- Set of negotiated <param> pairs for initialization and runtime
X3D served as text/html (no namespace prefix)
<!DOCTYPE html> <html> <head> <style type=text/css'> X3D { height:100%;width:100%; } svg { height:100%;width:100%; } </style> </head> <body> <X3D name='x3dBlock' type='model/x3d+xml' version='3.3' profile='Interchange' allow-same-origin allow-scripts> <Scene> <Viewpoint description='Start' /> <Shape> <Box size="4 4 4" /> </Shape> <Shape> <Text string='"This is X3D Text"' /> </Shape> </Scene> </X3D> <svg type='image/svg+xml' version="1.1"> <ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /> </svg> <mathml> <mrow><mi> x </mi><mo> + </mo> <mrow><mi> a </mi><mo> / </mo><mi> b </mi> </mrow></mrow> </mathml> <ruby> WWW <rt>World Wide Web</rt> </ruby> </body> </html>
X3D served as application/xhtml+xml (with namespace prefix)
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type=text/css'> x3d:X3D { height:200px;width:200px; } </style> </head> <body> <x3d:X3D name='x3dBlock' xmlns:x3d= "http://www.web3d.org/specifications/x3d-3.2.xsd"> <Scene> <Shape> <Box size="4 4 4" /> </Shape> <Shape> <Text string='"This is X3D Text"' /> </Shape> </Scene> </x3d:X3D> </body> </html>
Possible future X3D extension - Box has added html onclick event
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type=text/css'> x3d:X3D { height:200px;width:200px; } </style> </head> <body> <x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"> <Scene> <Shape> <Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /> </Shape> <Shape> <Text string='"This is X3D Text"' /> </Shape> </Scene> </x3d:X3D> </body> </html>
- Note that addition of onclick attribute is not standard X3D
- Preferred approach is probably to use X3D TouchSensor instead
X3D - Making direct updates on the tree
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type=text/css'> x3d:X3D { height:200px;width:200px; } </style> </head> <body> <x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"> <Scene> <Shape> <Appearance> <Material diffuseColor="1 0 0" /> </Appearance> <Box size="4 4 4" /> </Shape> <Shape> <Text string='"This is X3D Text"' /> </Shape> </Scene> </x3d:X3D> <script type="text/javascript"><! CDATA var colSel = true; function toggleRendering() { var button = document.getElementById("color"); colSel = !colSel; if (colSel) button.value = "Blue"; else button.value = "Red"; var mat = document.getElementsByTagName("Material"); var n = mat.length; var aMat = mat[0]; aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); return false; } ></script> <p class="case"> Dynamic material update <input type="button" id="color" value="Change Color" onclick="toggleRendering();" /> </p> </body> </html>