X3D and HTML5 examples
From Web3D.org
Revision as of 11:27, 6 September 2022 by Vmarchetti (Talk | contribs) (Deleted HTML section as obsolete)
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
- TODO: check XHTML syntax for this example
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>
