Difference between revisions of "X3D and HTML5 examples"
From Web3D.org
(→HTML Anchor link to X3D document) |
(→HTML Anchor link to X3D document) |
||
| Line 33: | Line 33: | ||
== HTML Anchor link to X3D document == | == HTML Anchor link to X3D document == | ||
| + | |||
| + | HTML anchor links allow an HTML page to load the contents of an X3D scene. | ||
HTML source: | HTML source: | ||
| Line 41: | Line 43: | ||
HTML result: | HTML result: | ||
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D. | 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 plugin is installed or native support provided | ||
| + | * Launch an external X3D viewer | ||
| + | * Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect) | ||
== X3D embedded using object element == | == X3D embedded using object element == | ||
Revision as of 15:53, 27 October 2009
Here are examples that show different ways of combining HTML web pages and X3D scenes.
Contents
HelloWorld.x3d standalone scene
HelloWorld.x3d shows a simple standalone example.
X3D embedded in HTML page
HTML Object Tag for X3D shows how to place X3D objects within an HTML page
newHtmlPageWithX3dObject.html is an example HTML scene with X3D object tag to copy, edit and reuse.
<html> <body> <object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d" type="model/x3d+xml" height="360" width=" <param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/> <param name="DASHBOARD" value="FALSE"/> <param name="SPLASHSCREEN" value=" <!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --> <div class="noX3dPluginInstalled"> <a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> Select an X3D plugin to see this example...</a> </div> </object> </body> </html>
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 plugin is installed or native support provided
- Launch an external X3D viewer
- Show source (if http server X3D MIME type settings are incorrect)
X3D embedded using object element
<object name='x3dBlock' type='model/x3d+xml'
allow-same-origin allow-scripts>
<param name='src' value='aScene.x3d'>
<table>...</table>
</object>
- Opens nested browsing context in parent block element.
- Fallback to html. (table in this case.)
- Connections with DOM via event listeners (DOM<=>SAI).
- Set of negotiated <param> pairs: initialization and runtime.
X3D served as application/xhtml+xml
<?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>
X3D served as text/html
<!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>
