Difference between revisions of "X3D and HTML5 examples"
From Web3D.org
(→X3D embedded using HTML5 object element: tighten up) |
Vmarchetti (Talk | contribs) m (Removed TODO item related to XHTML, XHTML being yet another has-been technology) |
||
(10 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | Here are | + | Here are several examples that show different ways of combining HTML web pages and X3D scenes. |
− | + | ||
== HelloWorld.x3d standalone scene == | == HelloWorld.x3d standalone scene == | ||
Line 43: | Line 42: | ||
</Scene> | </Scene> | ||
</X3D> | </X3D> | ||
− | |||
== HTML Anchor link to X3D document == | == HTML Anchor link to X3D document == | ||
Line 62: | Line 60: | ||
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect) | * Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect) | ||
+ | == X3D embedded using HTML5 object element == | ||
+ | September 2022 status: There are no publicly distributed plug-ins for current web browsers that display X3D content | ||
+ | referenced in an object tag. Current practice is to render X3D on a web page using a javascript library such as [https://xwdom.org X3DOM] or [https://github.com/create3000/x_ite X_ITE] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts> | <object name='x3dBlock' type='model/x3d+xml' allow-same-origin allow-scripts> | ||
Line 98: | Line 73: | ||
* Opens nested browsing context in parent block element | * Opens nested browsing context in parent block element | ||
* Set of negotiated <param> pairs for initialization and runtime | * Set of negotiated <param> pairs for initialization and runtime | ||
− | |||
== X3D served as text/html (no namespace prefix) == | == X3D served as text/html (no namespace prefix) == | ||
Line 164: | Line 138: | ||
</html> | </html> | ||
− | == X3D | + | == Possible future X3D extension - Box has added html onclick event == |
<?xml version="1.0" encoding="utf-8" ?> | <?xml version="1.0" encoding="utf-8" ?> | ||
− | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | + | <!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"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
Line 188: | Line 161: | ||
</body> | </body> | ||
</html> | </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 == | == X3D - Making direct updates on the tree == | ||
<?xml version="1.0" encoding="utf-8" ?> | <?xml version="1.0" encoding="utf-8" ?> | ||
− | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | + | <!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"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
Line 201: | Line 176: | ||
</head> | </head> | ||
<body> | <body> | ||
− | <x3d:X3D name='x3dBlock' | + | <x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"> |
− | + | ||
− | + | ||
<Scene> | <Scene> | ||
<Shape> | <Shape> | ||
Line 216: | Line 189: | ||
</Scene> | </Scene> | ||
</x3d:X3D> | </x3d:X3D> | ||
− | + | <script type="text/javascript"><! CDATA | |
− | + | var colSel = true; | |
− | + | function toggleRendering() | |
− | + | { | |
var button = document.getElementById("color"); | var button = document.getElementById("color"); | ||
colSel = !colSel; | colSel = !colSel; | ||
Line 231: | Line 204: | ||
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); | aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); | ||
return false; | return false; | ||
− | + | } | |
− | + | ></script> | |
− | + | <p class="case"> | |
− | + | Dynamic material update | |
− | + | <input type="button" id="color" value="Change Color" onclick="toggleRendering();" /> | |
− | + | </p> | |
− | + | </body> | |
</html> | </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>