https://www.old.web3d.org/wiki/api.php?action=feedcontributions&feedformat=atom&user=JoedwilWeb3D.org - User contributions [en]2026-04-04T07:38:22ZUser contributionsMediaWiki 1.25.1https://www.old.web3d.org/wiki/index.php?title=About_the_X3D/VRML_ROUTE_statement&diff=7929About the X3D/VRML ROUTE statement2014-02-05T02:52:30Z<p>Joedwil: </p>
<hr />
<div>About the X3D/VRML ROUTE statement<br />
<br />
I have heard items like: <br />
<br />
" Tracking ROUTEs is tedious tasks and error-prone. Routes have as many detractors as fans, and more when experienced HTML Javascripters first pick up VRML, They may look at ROUTE and say,"What the heck is this?" <br />
<br />
Imagine a complex highly structured hierarchy of many nodes, each with native eventOuts, eventIns, and even inputOutputs. Imagine these nodes with nothing to tell them who they can talk and listen to. Imagine being able to configure these collections of connections in a highly dynamic way that is essentially self-documenting. Fan out folks, and also Fan in...:) Give the Route a chance to breath. They are so obvious in their necessity and simplicity. And the Nodes really need 'em. <br />
<br />
When the experienced regex or DOM script programmer looks at VRML/X3D and says: "What the heck are those ROUTE thingies" you don't need to be a 'fan' of the Route statement to add a listener and see the need to help them understand how the Node employs the Route. <br />
<br />
True, it may be possible to create and deliver very complex X3D/VRML without using the Route statement, and in fact, that is the way 'they/us' probably learned to to program, But, it may not be the programmer-friendly or even browser-friendly way to create and deliver interactive Web 3D. <br />
<br />
It is not uncommon that the first "Route-like' programming 'they/us' ever used was the equal sign and even then used that as an assignment operator, not as a Route. Then, onward and upward to building a real node and then actually adding a live field to that node and building an event listener for that field of that node so that if that field is activated there is a target node that has a live field that can be activated to process the event and maybe pass it on to another node. Now, to import/export raw characters and data structures between live distributed web applications. After mastering all this, including XML and ECMAScript/Java DOM and maybe ActionScript, they/us come to X3D expecting order sanity and evolution. And they/us find out that you gotta use ROUTE? <br />
<br />
So, since this may be intense, it still more than likely will be better in the long-term to just go ahead and explain some facts about the Nodes and the Routes. Besides, you can leverage this learning experience because there are several other examples where X3D Nodes and X3D Statements get along together real nice. <br />
<br />
As another besides, at the high end, please recall that the list of ROUTE statements of a particular SAI context of the X3D scene is intended to be a live list, like others possibly encountered, like maybe in the DOM. So, for X3D, at the beginning of a potential next event cascade to figure out what needs to be done to produce the next frame, this list constitutes an instantaneous map of possible event flow needed to produce that next frame. Of course the list may be changed by events of the current cascade. This is the intent in the conformant X3D browser and should be a tool to be employed by the efficient scene content developer. (Please see Add/Delete Route SAI interfaces.) <br />
<br />
Some detailed facts about the Route and its relationship to the Node. <br />
<br />
We can generally discuss a Node with field content that may be a Node, and how one node's eventOut may get connected with another node's eventIn for the purpose of information exchange using the X3D VRML Route statement. <br />
<br />
In short, to connect an eventOut with an EventIn, you write an X3D statement like: <br />
<br />
Route From DEFNode1.fieldName To DEFNode2.fieldName <br />
<br />
The exact characters used for the Route depends upon the encoding, but that is it. The important items are the "From" where you define the named node's eventOut field of interest, and the "To" where you define the target named node's field. At runtime, if the "From" field produces an output, then the event data will be received at the "To" field. <br />
<br />
So this works universally. Basic example is if you need a sensor to activate a timer, then you rig a sensor and a timer and whatever the timer is going to control, then you connect the sensor to the timer by a Route statement that says: From Sensor.isActive To Timer.enabled and the timer can run once or continuously while the sensor is active. <br />
<br />
Node has fields, each with a declared data type and access type. Event is passed between nodes using Route statement which names the From Node1.eventOut and the To Node2.eventIn. Where necessary, supporting user code including event utilities and script is responsible for data type conversion to match the initial eventOut dataType to the target EventIn dataType. <br />
<br />
In a vernacular: "The gozouta gotta typematch the gozinta."<br />
<br />
Now back in the early middle/meta ages, since the ascent of 'scripting' to generate live code, a machine that generated real time interactive 3D using the relatively rich VRML structuring needed all the speed and convenience and memory management they could get. If there are a lot of nodes that have live fields and not all of them will be activated to produce every frame, then of course it is most simple to demand the programmer to predeclare paths of event flow, and even to predeclare paths of no event flow. In the former, this helps to optimize complex simulation because the machine can know more. Just because a Node happens to contain an eventOut, there is need to actually provide any service if there are no eventIns that care. In the latter, this may help the machine to tell you that no changes were expected for that group. <br />
<br />
So OK, that is all very nice and self contained. The Route statement has performed the detail of defining sources and sinks for events in a very dynamic way and human-readable way. <br />
<br />
Everything works fine when we can pass events of the same data type between different nodes. But if the data types are not the same, or need some processing, We first peruse the X3D event utilities and if we can't find something there, or the processing is too complicated, we can use a script. <br />
<br />
The Script is essentially a Sensor node which can receive and send events. Like any other node, events are passed from a SensorNode.eventOut to a ScriptNode.eventIn using a Route. Likewise, as expected, events are passed from a ScriptNode.eventOut to AnotherNode.eventIn using a Route. In the X3D standard event system the eventOuts are sent in sequence at the end of Script execution. <br />
<br />
This is just the way you want it. Known things are going to happen at known times. There is great opportunity for debug because the scene can literally document and simulate itself. <br />
<br />
But wait. Using Routes, the script can only get access to fields of other nodes. What if I want to get complete access to another node and its fields directly. Without using Route? <br />
<br />
Well, please first check your design and look for another, perhaps better integrated and structured solution that is certainly available. <br />
<br />
However, there is always using the familiar DOM-style SAI getNamedNode('AnotherNode'); interface in the body of the script. <br />
<br />
Or, you may use a Script directOut declaration. In this usage case, you can provide: inputOutput SFNode 'myNodeInTheScript' USE 'AnotherNode' in the script declaration to get a connection to AnotherNode. Now you may access the fields directly using: MyNodeInTheScript.fieldName in the body of the script. <br />
<br />
In the second case, check your event timing because it may be possible that directOut event(s) may not be synchronized with the cascade that produced the current script eventIn. Although the X3D standard may be interpreted to predict standardized event cascade processing in a Script node and between other scripts and nodes involved in a cascade, this is potentially application-dependant just because it is hard to implement correctly. <br />
<br />
So it seems to me that there is actually a preferred way:<br />
<br />
Use Routes to define event flow between all nodes, even the Script nodes. <br />
<br />
And, you may: <br />
Use SAI getNamedNode(); to work on nodes. <br />
<br />
and/or <br />
Use directOut to manipulate the node. <br />
<br />
or <br />
everything at once. <br />
<br />
EXAMPLE 1: Accessing Script Fields<br />
<br />
DEF SomeNode Transform { ... }<br />
Script DEF SomeScriptNode {<br />
inputOnly SFVec3f pos<br />
outputOnly SFVec3f someField<br />
url "ecmascript:<br />
function pos(value) {<br />
someField = value;<br />
}<br />
"<br />
}<br />
ROUTE SomeOtherNode.someSFVec3FField TO SomeScriptNode.pos<br />
ROUTE SomeScriptNode.someField TO SomeNode.trans<br />
<br />
Example 1 receives a routed event from SomeOtherNode.someSFVec3FField then generates an event that is routed to the Transform node SomeNode.translation. The time stamp of the input and output events is the same, the output is ready when script execution completes, and the result is evaluated as part of the current cascade. <br />
<br />
EXAMPLE 2: Accessing fields of other nodes<br />
<br />
DEF SomeNode Transform { }<br />
Script DEF SomeScriptNode{<br />
inputOnly SFVec3f pos<br />
initializeOnly SFNode node USE SomeNode<br />
directOutput TRUE<br />
url "ecmascript:<br />
function pos(value) {<br />
node.translation = value;<br />
}<br />
"<br />
}<br />
ROUTE SomeOtherNode.someSFVec3FField TO SomeScriptNode.pos<br />
<br />
Example 2 receives a routed event from SomeOtherNode.someSFVec3FField then sends a set_translation event to the Transform node. Because directOutput is TRUE and the target node is included in the declaration by USE, the event is sent directly to SomeNode.translation through the direct action of the script rather than through a ROUTE. This event is processed separate from any existing or pending event cascade and shall not initiate a new cascade. <br />
<br />
Since there are so many ways to play, you will probably have to make a choice in how to do the job. When in doubt always choose the simplest solution? How you do it may not make a difference from one browser to another, or it might. Ask your favorite browser maker if their product cares. I think most applications should be better performing and easier to maintain when directOuts are refactored to use Route and to eliminate many scripts by good use of X3D event utilities. <br />
<br />
It should be reassuring that there are several ways to do it, if luck is happening, your choice will run everywhere! <br />
<br />
Also look at some other X3D Statements like Import and Export.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_HAnim_Displacer_Operation&diff=7859X3D HAnim Displacer Operation2014-01-16T21:47:04Z<p>Joedwil: </p>
<hr />
<div>'''HAnim skin with Displacer''' <br />
<br />
Example is here: <br />
<br />
[http://www.hypermultimedia.com/x3d/hanim/JoeLevel2LOA3SSPYRWRJKDNoGeometry.x3dv]http://www.hypermultimedia.com/x3d/hanim/JoeLevel2LOA3SSPYRWRJKDNoGeometry.x3dv<br />
<br />
The example combines the single mesh skin animated by joint(s) binding, with a Displacer providing additional animation for specific vertices. <br />
<br />
In this case, the 10 standard feature points of the head are 'expanded' by the Displacer. <br />
<br />
In practice, Displacer animations for the skin mesh are contained by the first Joint that references the skinCoordIndex of the skin. Following shows the insertion of the Displacer node into the skullBase.<br />
<br />
... <br />
DEF hanim_skullbase HAnimJoint { name "skullbase" center 0.0 1.63 -0.01 <br />
skinCoordIndex [ 0 1 2 3 4 5 6 7 8 9 ] <br />
skinCoordWeight [ 1 1 1 1 1 1 1 1 1 1 ] <br />
displacers [<br />
DEF Joe_skull_tipTest Displacer { <br />
weight 0 <br />
name "skull_tip_raiser_action" <br />
coordIndex [ 0 1 2 3 4 5 6 7 8 9 ] <br />
displacements [ <br />
0 0.15 0, <br />
0 0 0.15, <br />
-0.1 0 0.15,<br />
0.1 0 0.05, <br />
0 -0.02 0.05, <br />
-0.15 0 0,<br />
-0.05 0 0, <br />
0.15 0 0, <br />
0.05 0 0, <br />
0 0 -0.15 <br />
]<br />
}<br />
]<br />
children [ ... <br />
<br />
The Displacer is initialized by the weight, coordIndex, and displacements fields as follows: <br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated<br />
index is order of appearance of vertex <br />
in user code for parent mesh <br />
]<br />
displacements [<br />
maximum relative x,y,z displacement <br />
in skeleton space <br />
of each vertex at maximum weight <br />
same order as coordIndex<br />
]<br />
weight 0 to 1 <br />
animation control <br />
(from ScalarInterpolator)<br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum relative displacment of parent mesh vertex <br />
<br />
So, the main idea is to establish displacements that represent the final position of the specified vertex relative to the initial position of the vertex. If the weight value is defined as 0 then there is no added displacement. If the weight is 1 then the vertex is displaced the maximum relative position. If the vertex has been animated by Joint(s) rotation, then this displacement is added to the vertex in the animated position. <br />
<br />
Please notice the definitions used in this skin field:<br />
<br />
skin [ ...<br />
0.0 1.77 0.0 #0 skull_tip <br />
0.0 1.665 0.09 #1 sellion <br />
-0.033 1.62 0.087 #2 r_infraorbitale <br />
0.033 1.62 0.087 #3 l_infraorbitale <br />
0.0 1.55 0.097 #4 supramenton <br />
-0.077 1.64 -0.01 #5 r_tragion <br />
-0.0527 1.58 0.015 #6 r_gonion <br />
0.077 1.64 -0.01 #7 l_tragion <br />
0.0527 1.58 0.015 #8 l_gonion <br />
0.0 1.625 -0.0925 #9 nuchale <br />
]... <br />
<br />
Both the initial skin vertex locations and the displacements are given in skeleton space. <br />
<br />
For this example, when the Displacer weight is 0, then the skull_tip vertex is animated only as a result of various Joint rotations applied to the skeleton and thus to the skin vertices. If the weight is not 0, then the Displacer displacement value is added to the skull_tip location. <br />
<br />
In this example the Displacer is controlled by the following timer and ScalerInterpolator to provide weight values to the Displacer node. <br />
<br />
DEF DisplacersAnimation Group {<br />
children [<br />
DEF skull_tipTestTimer TimeSensor { <br />
cycleInterval 5.73 loop TRUE enabled TRUE }<br />
DEF skull_tipTest_Run ScalarInterpolator { <br />
key [ 0 0.1 0.2 0.35 0.65 0.7 0.85 0.95 0.98 1 ] <br />
keyValue [ 0 0.2 0.4 0.6 1 1 0.85 0.55 0.25 0 ] }<br />
ROUTE skull_tipTestTimer.fraction_changed TO skull_tipTest_Run.set_fraction<br />
ROUTE skull_tipTest_Run.value_changed TO Joe_skull_tipTest.weight<br />
]<br />
}<br />
<br />
Sorry I didn't make a button to turn on/off the Displacer timer yet. When you run the example and select Default, only the Displacer animation is running.<br />
<br />
Joe</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_HAnim_Displacer_Operation&diff=7858X3D HAnim Displacer Operation2014-01-16T21:46:02Z<p>Joedwil: An example using HAnim DIsplacer node with skin</p>
<hr />
<div>'''HAnim skin with Displacer''' <br />
<br />
Example is here: <br />
<br />
[http://www.hypermultimedia.com/x3d/hanim/JoeLevel2LOA3SSPYRWRJKDNoGeometry.x3dv]<br />
<br />
The example combines the single mesh skin animated by joint(s) binding, with a Displacer providing additional animation for specific vertices. <br />
<br />
In this case, the 10 standard feature points of the head are 'expanded' by the Displacer. <br />
<br />
In practice, Displacer animations for the skin mesh are contained by the first Joint that references the skinCoordIndex of the skin. Following shows the insertion of the Displacer node into the skullBase.<br />
<br />
... <br />
DEF hanim_skullbase HAnimJoint { name "skullbase" center 0.0 1.63 -0.01 <br />
skinCoordIndex [ 0 1 2 3 4 5 6 7 8 9 ] <br />
skinCoordWeight [ 1 1 1 1 1 1 1 1 1 1 ] <br />
displacers [<br />
DEF Joe_skull_tipTest Displacer { <br />
weight 0 <br />
name "skull_tip_raiser_action" <br />
coordIndex [ 0 1 2 3 4 5 6 7 8 9 ] <br />
displacements [ <br />
0 0.15 0, <br />
0 0 0.15, <br />
-0.1 0 0.15,<br />
0.1 0 0.05, <br />
0 -0.02 0.05, <br />
-0.15 0 0,<br />
-0.05 0 0, <br />
0.15 0 0, <br />
0.05 0 0, <br />
0 0 -0.15 <br />
]<br />
}<br />
]<br />
children [ ... <br />
<br />
The Displacer is initialized by the weight, coordIndex, and displacements fields as follows: <br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated<br />
index is order of appearance of vertex <br />
in user code for parent mesh <br />
]<br />
displacements [<br />
maximum relative x,y,z displacement <br />
in skeleton space <br />
of each vertex at maximum weight <br />
same order as coordIndex<br />
]<br />
weight 0 to 1 <br />
animation control <br />
(from ScalarInterpolator)<br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum relative displacment of parent mesh vertex <br />
<br />
So, the main idea is to establish displacements that represent the final position of the specified vertex relative to the initial position of the vertex. If the weight value is defined as 0 then there is no added displacement. If the weight is 1 then the vertex is displaced the maximum relative position. If the vertex has been animated by Joint(s) rotation, then this displacement is added to the vertex in the animated position. <br />
<br />
Please notice the definitions used in this skin field:<br />
<br />
skin [ ...<br />
0.0 1.77 0.0 #0 skull_tip <br />
0.0 1.665 0.09 #1 sellion <br />
-0.033 1.62 0.087 #2 r_infraorbitale <br />
0.033 1.62 0.087 #3 l_infraorbitale <br />
0.0 1.55 0.097 #4 supramenton <br />
-0.077 1.64 -0.01 #5 r_tragion <br />
-0.0527 1.58 0.015 #6 r_gonion <br />
0.077 1.64 -0.01 #7 l_tragion <br />
0.0527 1.58 0.015 #8 l_gonion <br />
0.0 1.625 -0.0925 #9 nuchale <br />
]... <br />
<br />
Both the initial skin vertex locations and the displacements are given in skeleton space. <br />
<br />
For this example, when the Displacer weight is 0, then the skull_tip vertex is animated only as a result of various Joint rotations applied to the skeleton and thus to the skin vertices. If the weight is not 0, then the Displacer displacement value is added to the skull_tip location. <br />
<br />
In this example the Displacer is controlled by the following timer and ScalerInterpolator to provide weight values to the Displacer node. <br />
<br />
DEF DisplacersAnimation Group {<br />
children [<br />
DEF skull_tipTestTimer TimeSensor { <br />
cycleInterval 5.73 loop TRUE enabled TRUE }<br />
DEF skull_tipTest_Run ScalarInterpolator { <br />
key [ 0 0.1 0.2 0.35 0.65 0.7 0.85 0.95 0.98 1 ] <br />
keyValue [ 0 0.2 0.4 0.6 1 1 0.85 0.55 0.25 0 ] }<br />
ROUTE skull_tipTestTimer.fraction_changed TO skull_tipTest_Run.set_fraction<br />
ROUTE skull_tipTest_Run.value_changed TO Joe_skull_tipTest.weight<br />
]<br />
}<br />
<br />
Sorry I didn't make a button to turn on/off the Displacer timer yet. When you run the example and select Default, only the Displacer animation is running.<br />
<br />
Joe</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_HAnim_Displacer_Operation&diff=7857X3D HAnim Displacer Operation2014-01-16T21:44:33Z<p>Joedwil: Created page with "'''HAnim skin with Displacer''' Example is here: [http://www.hypermultimedia.com/x3d/hanim/JoeLevel2LOA3SSPYRWRJKDNoGeometry.x3dv] The example combines the single mesh sk..."</p>
<hr />
<div>'''HAnim skin with Displacer''' <br />
<br />
Example is here: <br />
<br />
[http://www.hypermultimedia.com/x3d/hanim/JoeLevel2LOA3SSPYRWRJKDNoGeometry.x3dv]<br />
<br />
The example combines the single mesh skin animated by joint(s) binding, with a Displacer providing additional animation for specific vertices. <br />
<br />
In this case, the 10 standard feature points of the head are 'expanded' by the Displacer. <br />
<br />
In practice, Displacer animations for the skin mesh are contained by the first Joint that references the skinCoordIndex of the skin. Following shows the insertion of the Displacer node into the skullBase.<br />
<br />
... <br />
DEF hanim_skullbase HAnimJoint { name "skullbase" center 0.0 1.63 -0.01 <br />
skinCoordIndex [ 0 1 2 3 4 5 6 7 8 9 ] <br />
skinCoordWeight [ 1 1 1 1 1 1 1 1 1 1 ] <br />
displacers [<br />
DEF Joe_skull_tipTest Displacer { <br />
weight 0 <br />
name "skull_tip_raiser_action" <br />
coordIndex [ 0 1 2 3 4 5 6 7 8 9 ] <br />
displacements [ <br />
0 0.15 0, <br />
0 0 0.15, <br />
-0.1 0 0.15,<br />
0.1 0 0.05, <br />
0 -0.02 0.05, <br />
-0.15 0 0,<br />
-0.05 0 0, <br />
0.15 0 0, <br />
0.05 0 0, <br />
0 0 -0.15 <br />
]<br />
}<br />
]<br />
children [ ... <br />
<br />
The Displacer is initialized by the weight, coordIndex, and displacements fields as follows: <br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated<br />
index is order of appearance of vertex <br />
in user code for parent mesh <br />
]<br />
displacements [<br />
maximum relative x,y,z displacement <br />
in skeleton space <br />
of each vertex at maximum weight <br />
same order as coordIndex<br />
]<br />
weight 0 to 1 <br />
animation control <br />
(from ScalarInterpolator)<br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum relative displacment of parent mesh vertex <br />
<br />
So, the main idea is to establish displacements that represent the final position of the specified vertex relative to the initial position of the vertex. If the weight value is defined as 0 then there is no added displacement. If the weight is 1 then the vertex is displaced the maximum relative position. If the vertex has been animated by Joint(s) rotation, then this displacement is added to the vertex in the animated position. <br />
<br />
Please notice the definitions used in this skin field:<br />
<br />
skin [ ...<br />
0.0 1.77 0.0 #0 skull_tip <br />
0.0 1.665 0.09 #1 sellion <br />
-0.033 1.62 0.087 #2 r_infraorbitale <br />
0.033 1.62 0.087 #3 l_infraorbitale <br />
0.0 1.55 0.097 #4 supramenton <br />
-0.077 1.64 -0.01 #5 r_tragion <br />
-0.0527 1.58 0.015 #6 r_gonion <br />
0.077 1.64 -0.01 #7 l_tragion <br />
0.0527 1.58 0.015 #8 l_gonion <br />
0.0 1.625 -0.0925 #9 nuchale <br />
]... <br />
<br />
Both the initial skin vertex locations and the displacements are given in skeleton space. <br />
<br />
For this example, when the Displacer weight is 0, then the skull_tip vertex is animated only as a result of various Joint rotations applied to the skeleton and thus to the skin vertices. If the weight is not 0, then the Displacer displacement value is added to the skull_tip location. <br />
<br />
In this example the Displacer is controlled by the following timer and ScalerInterpolator to provide weight values to the Displacer node. <br />
<br />
DEF DisplacersAnimation Group {<br />
children [<br />
DEF skull_tipTestTimer TimeSensor { <br />
cycleInterval 5.73 loop TRUE enabled TRUE }<br />
DEF skull_tipTest_Run ScalarInterpolator { <br />
key [ 0 0.1 0.2 0.35 0.65 0.7 0.85 0.95 0.98 1 ] <br />
keyValue [ 0 0.2 0.4 0.6 1 1 0.85 0.55 0.25 0 ] }<br />
ROUTE skull_tipTestTimer.fraction_changed TO skull_tipTest_Run.set_fraction<br />
ROUTE skull_tipTest_Run.value_changed TO Joe_skull_tipTest.weight<br />
]<br />
}<br />
<br />
Sorry I didn't make a button to turn on/off the Displcaer timer yet. When you run the example and select Default, only the Displacer animation is running.<br />
<br />
Joe</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=How-To_Guides&diff=7856How-To Guides2014-01-16T21:40:14Z<p>Joedwil: </p>
<hr />
<div>== How-To Guides ==<br />
* [[About the X3D/VRML ROUTE statement]]<br />
* [[Convert VRML97 To X3D]]<br />
* [[How to create a HUD (Head Up Display)]]<br />
* [[How to create an X3D applet with Xj3D]]<br />
* [[How to wiki]]<br />
* [[SAI Tutorial]]<br />
* [[What are profiles?]]<br />
* [[X3D CAD Howto]]<br />
* [[X3D HAnim Displacer Operation]]</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=January_8th,_2014_at_5:00pm_PDT,_Agenda_and_Minutes&diff=7827January 8th, 2014 at 5:00pm PDT, Agenda and Minutes2014-01-09T04:43:51Z<p>Joedwil: </p>
<hr />
<div>Dick Puk, Don Brutzman, William Glascoe, Myeong Won Lee, Joe Williams, and Prof. Jung-Ju Choi attended. <br />
<br />
==1. Facial animation using current H-Anim==<br />
<br />
<br />
Jung-Ju explained [http://web3d.org/wiki/images/3/3e/H-Anim-ConfCall-20140108-2.pdf document with design ideas regarding facial animation].<br />
<br />
Joe Williams discussed a number Jung-Ju's questions about his proposal. Check out MPEG-4 Facial Animation Parameter overview at the following URL.<br />
* http://www.visagetechnologies.com/uploads/2012/08/MPEG-4FBAOverview.pdf<br />
* Virtual Humans by Prof Nadia Magnenat Thalmann is another reference.<br />
<br />
''Caution please:'' Everyone has to be very careful not to infringe on MPEG4 FAP Intellectual Property Rights in facial animation.<br />
<br />
==2. Relationship to current and future H-Anim ==<br />
<br />
Don explains how feature points are animated (via HAnimSite and HAnimDisplacer nodes) and how a comparison (CoordinateInterpolator and IndexedFaceSet/mesh) might show how much value is added by a mesh displacer. <br />
<br />
A prerequisite for CoordinateInterpolator is that every vertex in the mesh must be animated.<br />
<br />
* In X3D, a CoordinateInterpolator can animate a mesh. This is an interesting alternative that can be compared in a test.<br />
* The red dots in Jung-Ju's figure shown today correspond to feature points<br />
* The number of black vertices might vary depending on an implementation<br />
* The most interesting choice for an H-Anim perspective might be choice of those feature points<br />
** H-Anim has about about 8 (or 9) feature points for face. See H-Anim Specification [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePointsOnTheHumanBody Figure B.1] and feature points 1..8, which are listed in [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePoints Table B.1].<br />
** MPEG4 has about 50 feature points for face, but there are patents restricting their specific use in an open standard<br />
<br />
So our first main design decision for H-Anim might be whether to<br />
<br />
'''1. pre-specify a set of feature points for common use (and re-use)'''<br />
'''2. or allow an author to define them (which might not be valuable, they can define geometry anyway'''<br />
<br />
(I'm guessing we'd want option #1, but it is possible that we might find a way to do something like option #2.)<br />
<br />
There are also a finite number of human facial expressions<br />
* there are multiple models published about this (see SIGGRAPH papers, can we make a list?)<br />
* each facial expression has a name<br />
* there is a set of feature points common to these<br />
<br />
So our next next decision might be<br />
<br />
'''3. to define a set of sites, likely as a superset of the existing 8 points in H-Anim'''<br />
'''4. to define a set of expressions, each named, each with a finite number of the feature points'''<br />
<br />
Possibility: if we added a little more to Jung-Ju's point paper (perhaps steps 1 3 and 4 above) then we could write "expression animators" that describe the end locations of each feature point.<br />
<br />
=== Joe's comments on this topic ===<br />
<br />
I like how the proposed parametric animation could work with the Displacer. <br />
<br />
Displacer nodes require detailed knowledge of the parent mesh. Specifically, the vertex order of the parent mesh must not change between authoring and rendering. Compared to CoordinateInterpolator, for example, since all vertices of the mesh may not need to be animated for a given sequence, only the vertices to be moved are included. <br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated<br />
index is order of appearance of vertex <br />
in user code for parent mesh <br />
]<br />
displacements [<br />
x,y,z location in skeleton space <br />
of each vertex at maximum displacement<br />
same order as coordIndex<br />
]<br />
weight 0 to 1 animation control (from ScalarInterpolator)<br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum location of parent mesh vertex <br />
<br />
Parent geometry is either the Humanoid, if the Displacer is applied to the continious mesh in the skin node, or, the geometry of the Displacer node's parent Segment.<br />
<br />
Some old work:<br />
http://h-anim.org/Specifications/H-Anim1.1/appendices.html#appendixb<br />
<br />
==3. Standardization item for facial animation ==<br />
<br />
We will discuss further in Korea. Points of interest:<br />
* the only skeletal motion in the face is the jaw but the rotation of the tongue, eyeballs, eyelids and ... are addressable<br />
* the boundaries of the facial muscles could for the basis of the facial animation parameters (perimeters of primitive zones)<br />
* the boundaries of facial skin as mapped by estheticians could form the basis of the H-anim facial animations primitives<br />
<br />
==4. NWIP discussion==<br />
<br />
Dick reports that both New Work Item Proposals have passed ISO SC 24 review.<br />
<br />
Congratulations everyone! Thanks Myeong Won Lee for drafting the original documents!<br />
<br />
==5. Parametric Human Project== <br />
<br />
William mentioned collaborating with the Parametric Human Project as they amass microCT data of human skeletons. See a paper describing the project scope and goals.<br />
<br />
* http://www.autodeskresearch.com/pdf/PMHA%202013%20-%20AutoDesk%20Ontology%20Paper.pdf<br />
<br />
==6. Scheduling next meeting==<br />
<br />
Next meeting will be held in person, co-located at the meetings below, as well as via Web3D teleconference. <br />
January 20th (Monday) at 4:00pm PST (21th, 9:00am KST) <br />
---------------------------------------------------------------------------------------------<br />
<br />
This wiki approach worked today, we will try to continue that to make simultaneous contributions and discussion easier.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=January_8th,_2014_at_5:00pm_PDT,_Agenda_and_Minutes&diff=7826January 8th, 2014 at 5:00pm PDT, Agenda and Minutes2014-01-09T04:41:01Z<p>Joedwil: </p>
<hr />
<div>Dick Puk, Don Brutzman, William Glascoe, Myeong Won Lee, Joe Williams, and Prof. Jung-Ju Choi attended. <br />
<br />
==1. Facial animation using current H-Anim==<br />
<br />
<br />
Jung-Ju explained [http://web3d.org/wiki/images/3/3e/H-Anim-ConfCall-20140108-2.pdf document with design ideas regarding facial animation].<br />
<br />
Joe Williams discussed a number Jung-Ju's questions about his proposal. Check out MPEG-4 Facial Animation Parameter overview at the following URL.<br />
* http://www.visagetechnologies.com/uploads/2012/08/MPEG-4FBAOverview.pdf<br />
* Virtual Humans by Prof Nadia Magnenat Thalmann is another reference.<br />
<br />
''Caution please:'' Everyone has to be very careful not to infringe on MPEG4 FAP Intellectual Property Rights in facial animation.<br />
<br />
==2. Relationship to current and future H-Anim ==<br />
<br />
Don explains how feature points are animated (via HAnimSite and HAnimDisplacer nodes) and how a comparison (CoordinateInterpolator and IndexedFaceSet/mesh) might show how much value is added by a mesh displacer. <br />
<br />
A prerequisite for CoordinateInterpolator is that every vertex in the mesh must be animated.<br />
<br />
* In X3D, a CoordinateInterpolator can animate a mesh. This is an interesting alternative that can be compared in a test.<br />
* The red dots in Jung-Ju's figure shown today correspond to feature points<br />
* The number of black vertices might vary depending on an implementation<br />
* The most interesting choice for an H-Anim perspective might be choice of those feature points<br />
** H-Anim has about about 8 (or 9) feature points for face. See H-Anim Specification [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePointsOnTheHumanBody Figure B.1] and feature points 1..8, which are listed in [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePoints Table B.1].<br />
** MPEG4 has about 50 feature points for face, but there are patents restricting their specific use in an open standard<br />
<br />
So our first main design decision for H-Anim might be whether to<br />
<br />
'''1. pre-specify a set of feature points for common use (and re-use)'''<br />
'''2. or allow an author to define them (which might not be valuable, they can define geometry anyway'''<br />
<br />
(I'm guessing we'd want option #1, but it is possible that we might find a way to do something like option #2.)<br />
<br />
There are also a finite number of human facial expressions<br />
* there are multiple models published about this (see SIGGRAPH papers, can we make a list?)<br />
* each facial expression has a name<br />
* there is a set of feature points common to these<br />
<br />
So our next next decision might be<br />
<br />
'''3. to define a set of sites, likely as a superset of the existing 8 points in H-Anim'''<br />
'''4. to define a set of expressions, each named, each with a finite number of the feature points'''<br />
<br />
Possibility: if we added a little more to Jung-Ju's point paper (perhaps steps 1 3 and 4 above) then we could write "expression animators" that describe the end locations of each feature point.<br />
<br />
=== Joe's comments on this topic ===<br />
<br />
I like how the proposed parametric animation could work with the Displacer. <br />
<br />
Displacer nodes require detailed knowledge of the parent mesh. Specifically, the vertex order of the parent mesh must not change between authoring and rendering. Compared to CoordinateInterpolator, for example, since all vertices of the mesh may not need to be animated for a given sequence, only the vertices to be moved are included. <br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated<br />
index is order of appearance of vertex <br />
in user code for parent mesh <br />
]<br />
displacements [<br />
x,y,z location in skeleton space <br />
of each vertex at maximum displacement<br />
same order as corrdIndex<br />
]<br />
weight 0 to 1 animation control <br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum location of parent mesh vertex <br />
<br />
Parent geometry is either the Humanoid, if the Displacer is applied to the continious mesh in the skin node, or, the geometry of the Displacer node's parent Segment.<br />
<br />
Some old work:<br />
http://h-anim.org/Specifications/H-Anim1.1/appendices.html#appendixb<br />
<br />
==3. Standardization item for facial animation ==<br />
<br />
We will discuss further in Korea. Points of interest:<br />
* the only skeletal motion in the face is the jaw but the rotation of the tongue, eyeballs, eyelids and ... are addressable<br />
* the boundaries of the facial muscles could for the basis of the facial animation parameters (perimeters of primitive zones)<br />
* the boundaries of facial skin as mapped by estheticians could form the basis of the H-anim facial animations primitives<br />
<br />
==4. NWIP discussion==<br />
<br />
Dick reports that both New Work Item Proposals have passed ISO SC 24 review.<br />
<br />
Congratulations everyone! Thanks Myeong Won Lee for drafting the original documents!<br />
<br />
==5. Parametric Human Project== <br />
<br />
William mentioned collaborating with the Parametric Human Project as they amass microCT data of human skeletons. See a paper describing the project scope and goals.<br />
<br />
* http://www.autodeskresearch.com/pdf/PMHA%202013%20-%20AutoDesk%20Ontology%20Paper.pdf<br />
<br />
==6. Scheduling next meeting==<br />
<br />
Next meeting will be held in person, co-located at the meetings below, as well as via Web3D teleconference. <br />
January 20th (Monday) at 4:00pm PST (21th, 9:00am KST) <br />
---------------------------------------------------------------------------------------------<br />
<br />
This wiki approach worked today, we will try to continue that to make simultaneous contributions and discussion easier.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=January_8th,_2014_at_5:00pm_PDT,_Agenda_and_Minutes&diff=7825January 8th, 2014 at 5:00pm PDT, Agenda and Minutes2014-01-09T04:33:37Z<p>Joedwil: </p>
<hr />
<div>Dick Puk, Don Brutzman, William Glascoe, Myeong Won Lee, Joe Williams, and Prof. Jung-Ju Choi attended. <br />
<br />
==1. Facial animation using current H-Anim==<br />
<br />
<br />
Jung-Ju explained [http://web3d.org/wiki/images/3/3e/H-Anim-ConfCall-20140108-2.pdf document with design ideas regarding facial animation].<br />
<br />
Joe Williams discussed a number Jung-Ju's questions about his proposal. Check out MPEG-4 Facial Animation Parameter overview at the following URL.<br />
* http://www.visagetechnologies.com/uploads/2012/08/MPEG-4FBAOverview.pdf<br />
* Virtual Humans by Prof Nadia Magnenat Thalmann is another reference.<br />
<br />
''Caution please:'' Everyone has to be very careful not to infringe on MPEG4 FAP Intellectual Property Rights in facial animation.<br />
<br />
==2. Relationship to current and future H-Anim ==<br />
<br />
Don explains how feature points are animated (via HAnimSite and HAnimDisplacer nodes) and how a comparison (CoordinateInterpolator and IndexedFaceSet/mesh) might show how much value is added by a mesh displacer. <br />
<br />
A prerequisite for CoordinateInterpolator is that every vertex in the mesh must be animated.<br />
<br />
* In X3D, a CoordinateInterpolator can animate a mesh. This is an interesting alternative that can be compared in a test.<br />
* The red dots in Jung-Ju's figure shown today correspond to feature points<br />
* The number of black vertices might vary depending on an implementation<br />
* The most interesting choice for an H-Anim perspective might be choice of those feature points<br />
** H-Anim has about about 8 (or 9) feature points for face. See H-Anim Specification [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePointsOnTheHumanBody Figure B.1] and feature points 1..8, which are listed in [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePoints Table B.1].<br />
** MPEG4 has about 50 feature points for face, but there are patents restricting their specific use in an open standard<br />
<br />
So our first main design decision for H-Anim might be whether to<br />
<br />
'''1. pre-specify a set of feature points for common use (and re-use)'''<br />
'''2. or allow an author to define them (which might not be valuable, they can define geometry anyway'''<br />
<br />
(I'm guessing we'd want option #1, but it is possible that we might find a way to do something like option #2.)<br />
<br />
There are also a finite number of human facial expressions<br />
* there are multiple models published about this (see SIGGRAPH papers, can we make a list?)<br />
* each facial expression has a name<br />
* there is a set of feature points common to these<br />
<br />
So our next next decision might be<br />
<br />
'''3. to define a set of sites, likely as a superset of the existing 8 points in H-Anim'''<br />
'''4. to define a set of expressions, each named, each with a finite number of the feature points'''<br />
<br />
Possibility: if we added a little more to Jung-Ju's point paper (perhaps steps 1 3 and 4 above) then we could write "expression animators" that describe the end locations of each feature point.<br />
<br />
=== Joe's comments on this topic ===<br />
<br />
I like how the proposed parametric animation could work with the Displacer. <br />
<br />
Displacer nodes require detailed knowledge of the parent mesh. Specifically, the vertex order of the parent mesh must not change between authoring and rendering. Compared to CoordinateInterpolator, for example, since all vertices of the mesh may not need to be animated for a given sequence, only the vertices to be moved are included. <br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated in the <br />
same order as they appear <br />
in the user code <br />
]<br />
displacements [<br />
x,y,z location in skeleton space <br />
of each vertex at maximum displacement<br />
]<br />
weight 0 to 1 animation control <br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum location of parent mesh vertex <br />
<br />
Parent geometry is either the Humanoid, if the Displacer is applied to the continious mesh in the skin node, or, the geometry of the Displacer node's parent Segment.<br />
<br />
Some old work:<br />
http://h-anim.org/Specifications/H-Anim1.1/appendices.html#appendixb<br />
<br />
==3. Standardization item for facial animation ==<br />
<br />
We will discuss further in Korea. Points of interest:<br />
* the only skeletal motion in the face is the jaw but the rotation of the tongue, eyeballs, eyelids and ... are addressable<br />
* the boundaries of the facial muscles could for the basis of the facial animation parameters (perimeters of primitive zones)<br />
* the boundaries of facial skin as mapped by estheticians could form the basis of the H-anim facial animations primitives<br />
<br />
==4. NWIP discussion==<br />
<br />
Dick reports that both New Work Item Proposals have passed ISO SC 24 review.<br />
<br />
Congratulations everyone! Thanks Myeong Won Lee for drafting the original documents!<br />
<br />
==5. Parametric Human Project== <br />
<br />
William mentioned collaborating with the Parametric Human Project as they amass microCT data of human skeletons. See a paper describing the project scope and goals.<br />
<br />
* http://www.autodeskresearch.com/pdf/PMHA%202013%20-%20AutoDesk%20Ontology%20Paper.pdf<br />
<br />
==6. Scheduling next meeting==<br />
<br />
Next meeting will be held in person, co-located at the meetings below, as well as via Web3D teleconference. <br />
January 20th (Monday) at 4:00pm PST (21th, 9:00am KST) <br />
---------------------------------------------------------------------------------------------<br />
<br />
This wiki approach worked today, we will try to continue that to make simultaneous contributions and discussion easier.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=January_8th,_2014_at_5:00pm_PDT,_Agenda_and_Minutes&diff=7824January 8th, 2014 at 5:00pm PDT, Agenda and Minutes2014-01-09T04:21:29Z<p>Joedwil: </p>
<hr />
<div>Dick Puk, Don Brutzman, William Glascoe, Myeong Won Lee, Joe Williams, and Prof. Jung-Ju Choi attended. <br />
<br />
==1. Facial animation using current H-Anim==<br />
<br />
<br />
Jung-Ju explained [http://web3d.org/wiki/images/3/3e/H-Anim-ConfCall-20140108-2.pdf document with design ideas regarding facial animation].<br />
<br />
Joe Williams discussed a number Jung-Ju's questions about his proposal. Check out MPEG-4 Facial Animation Parameter overview at the following URL.<br />
* http://www.visagetechnologies.com/uploads/2012/08/MPEG-4FBAOverview.pdf<br />
* Virtual Humans by Prof Nadia Magnenat Thalmann is another reference.<br />
<br />
''Caution please:'' Everyone has to be very careful not to infringe on MPEG4 FAP Intellectual Property Rights in facial animation.<br />
<br />
==2. Relationship to current and future H-Anim ==<br />
<br />
Don explains how feature points are animated (via HAnimSite and HAnimDisplacer nodes) and how a comparison (CoordinateInterpolator and IndexedFaceSet/mesh) might show how much value is added by a mesh displacer. <br />
<br />
A prerequisite for CoordinateInterpolator is that every vertex in the mesh must be animated.<br />
<br />
* In X3D, a CoordinateInterpolator can animate a mesh. This is an interesting alternative that can be compared in a test.<br />
* The red dots in Jung-Ju's figure shown today correspond to feature points<br />
* The number of black vertices might vary depending on an implementation<br />
* The most interesting choice for an H-Anim perspective might be choice of those feature points<br />
** H-Anim has about about 8 (or 9) feature points for face. See H-Anim Specification [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePointsOnTheHumanBody Figure B.1] and feature points 1..8, which are listed in [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePoints Table B.1].<br />
** MPEG4 has about 50 feature points for face, but there are patents restricting their specific use in an open standard<br />
<br />
So our first main design decision for H-Anim might be whether to<br />
<br />
'''1. pre-specify a set of feature points for common use (and re-use)'''<br />
'''2. or allow an author to define them (which might not be valuable, they can define geometry anyway'''<br />
<br />
(I'm guessing we'd want option #1, but it is possible that we might find a way to do something like option #2.)<br />
<br />
There are also a finite number of human facial expressions<br />
* there are multiple models published about this (see SIGGRAPH papers, can we make a list?)<br />
* each facial expression has a name<br />
* there is a set of feature points common to these<br />
<br />
So our next next decision might be<br />
<br />
'''3. to define a set of sites, likely as a superset of the existing 8 points in H-Anim'''<br />
'''4. to define a set of expressions, each named, each with a finite number of the feature points'''<br />
<br />
Possibility: if we added a little more to Jung-Ju's point paper (perhaps steps 1 3 and 4 above) then we could write "expression animators" that describe the end locations of each feature point.<br />
<br />
=== Joe's comments on this topic ===<br />
<br />
I will work on this more. I like how the proposed parametric animation could work with the Displacer. I lost my edit.<br />
<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated in the <br />
same order as they appear <br />
in the user code <br />
]<br />
displacements [<br />
x,y,z location in skeleton space <br />
of each vertex at maximum displacement<br />
]<br />
weight 0 to 1 animation control <br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum location of parent mesh vertex <br />
<br />
Parent geometry is either the Humanoid, if the Displacer is applied to the continious mesh in the skin node, or, the geometry of the Displacer node's parent Segment.<br />
<br />
Some old work:<br />
http://h-anim.org/Specifications/H-Anim1.1/appendices.html#appendixb<br />
<br />
<br />
Level of Detail perspective (JW)...<br />
<br />
==3. Standardization item for facial animation ==<br />
<br />
We will discuss further in Korea. Points of interest:<br />
* the only skeletal motion in the face is the jaw but the rotation of the tongue, eyeballs, eyelids and ... are addressable<br />
* the boundaries of the facial muscles could for the basis of the facial animation parameters (perimeters of primitive zones)<br />
* the boundaries of facial skin as mapped by estheticians could form the basis of the H-anim facial animations primitives<br />
<br />
==4. NWIP discussion==<br />
<br />
Dick reports that both New Work Item Proposals have passed ISO SC 24 review.<br />
<br />
Congratulations everyone! Thanks Myeong Won Lee for drafting the original documents!<br />
<br />
==5. Parametric Human Project== <br />
<br />
William mentioned collaborating with the Parametric Human Project as they amass microCT data of human skeletons. See a paper describing the project scope and goals.<br />
<br />
* http://www.autodeskresearch.com/pdf/PMHA%202013%20-%20AutoDesk%20Ontology%20Paper.pdf<br />
<br />
==6. Scheduling next meeting==<br />
<br />
Next meeting will be held in person, co-located at the meetings below, as well as via Web3D teleconference. <br />
January 20th (Monday) at 4:00pm PST (21th, 9:00am KST) <br />
---------------------------------------------------------------------------------------------<br />
<br />
This wiki approach worked today, we will try to continue that to make simultaneous contributions and discussion easier.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=January_8th,_2014_at_5:00pm_PDT,_Agenda_and_Minutes&diff=7823January 8th, 2014 at 5:00pm PDT, Agenda and Minutes2014-01-09T04:20:42Z<p>Joedwil: </p>
<hr />
<div>Dick Puk, Don Brutzman, William Glascoe, Myeong Won Lee, Joe Williams, and Prof. Jung-Ju Choi attended. <br />
<br />
==1. Facial animation using current H-Anim==<br />
<br />
<br />
Jung-Ju explained [http://web3d.org/wiki/images/3/3e/H-Anim-ConfCall-20140108-2.pdf document with design ideas regarding facial animation].<br />
<br />
Joe Williams discussed a number Jung-Ju's questions about his proposal. Check out MPEG-4 Facial Animation Parameter overview at the following URL.<br />
* http://www.visagetechnologies.com/uploads/2012/08/MPEG-4FBAOverview.pdf<br />
* Virtual Humans by Prof Nadia Magnenat Thalmann is another reference.<br />
<br />
''Caution please:'' Everyone has to be very careful not to infringe on MPEG4 FAP Intellectual Property Rights in facial animation.<br />
<br />
==2. Relationship to current and future H-Anim ==<br />
<br />
Don explains how feature points are animated (via HAnimSite and HAnimDisplacer nodes) and how a comparison (CoordinateInterpolator and IndexedFaceSet/mesh) might show how much value is added by a mesh displacer. <br />
<br />
A prerequisite for CoordinateInterpolator is that every vertex in the mesh must be animated.<br />
<br />
* In X3D, a CoordinateInterpolator can animate a mesh. This is an interesting alternative that can be compared in a test.<br />
* The red dots in Jung-Ju's figure shown today correspond to feature points<br />
* The number of black vertices might vary depending on an implementation<br />
* The most interesting choice for an H-Anim perspective might be choice of those feature points<br />
** H-Anim has about about 8 (or 9) feature points for face. See H-Anim Specification [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePointsOnTheHumanBody Figure B.1] and feature points 1..8, which are listed in [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePoints Table B.1].<br />
** MPEG4 has about 50 feature points for face, but there are patents restricting their specific use in an open standard<br />
<br />
So our first main design decision for H-Anim might be whether to<br />
<br />
'''1. pre-specify a set of feature points for common use (and re-use)'''<br />
'''2. or allow an author to define them (which might not be valuable, they can define geometry anyway'''<br />
<br />
(I'm guessing we'd want option #1, but it is possible that we might find a way to do something like option #2.)<br />
<br />
There are also a finite number of human facial expressions<br />
* there are multiple models published about this (see SIGGRAPH papers, can we make a list?)<br />
* each facial expression has a name<br />
* there is a set of feature points common to these<br />
<br />
So our next next decision might be<br />
<br />
'''3. to define a set of sites, likely as a superset of the existing 8 points in H-Anim'''<br />
'''4. to define a set of expressions, each named, each with a finite number of the feature points'''<br />
<br />
Possibility: if we added a little more to Jung-Ju's point paper (perhaps steps 1 3 and 4 above) then we could write "expression animators" that describe the end locations of each feature point.<br />
<br />
=== Joe's comments on this topic ===<br />
<br />
I will work on this more. I like how the proposed parametric animation could work with the Displacer. I lost my edit.<br />
HAnimDisplacer<br />
coordIndex [<br />
numerical index of each <br />
parent geometry vertex <br />
to be animated in the <br />
same order as they appear <br />
in the user code <br />
]<br />
displacements [<br />
x,y,z location in skeleton space <br />
of each vertex at maximum displacement<br />
]<br />
weight 0 to 1 animation control <br />
(linear interpolation)<br />
0 = same location as parent mesh initial vertex <br />
1 = defined maximum location of parent mesh vertex <br />
<br />
Parent geometry is either the Humanoid, if the Displacer is applied to the continious mesh in the skin node, or, the geometry of the Displacer node's parent Segment.<br />
<br />
Some old work:<br />
http://h-anim.org/Specifications/H-Anim1.1/appendices.html#appendixb<br />
<br />
<br />
Level of Detail perspective (JW)...<br />
<br />
==3. Standardization item for facial animation ==<br />
<br />
We will discuss further in Korea. Points of interest:<br />
* the only skeletal motion in the face is the jaw but the rotation of the tongue, eyeballs, eyelids and ... are addressable<br />
* the boundaries of the facial muscles could for the basis of the facial animation parameters (perimeters of primitive zones)<br />
* the boundaries of facial skin as mapped by estheticians could form the basis of the H-anim facial animations primitives<br />
<br />
==4. NWIP discussion==<br />
<br />
Dick reports that both New Work Item Proposals have passed ISO SC 24 review.<br />
<br />
Congratulations everyone! Thanks Myeong Won Lee for drafting the original documents!<br />
<br />
==5. Parametric Human Project== <br />
<br />
William mentioned collaborating with the Parametric Human Project as they amass microCT data of human skeletons. See a paper describing the project scope and goals.<br />
<br />
* http://www.autodeskresearch.com/pdf/PMHA%202013%20-%20AutoDesk%20Ontology%20Paper.pdf<br />
<br />
==6. Scheduling next meeting==<br />
<br />
Next meeting will be held in person, co-located at the meetings below, as well as via Web3D teleconference. <br />
January 20th (Monday) at 4:00pm PST (21th, 9:00am KST) <br />
---------------------------------------------------------------------------------------------<br />
<br />
This wiki approach worked today, we will try to continue that to make simultaneous contributions and discussion easier.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=January_8th,_2014_at_5:00pm_PDT,_Agenda_and_Minutes&diff=7822January 8th, 2014 at 5:00pm PDT, Agenda and Minutes2014-01-09T04:07:24Z<p>Joedwil: </p>
<hr />
<div>Dick Puk, Don Brutzman, William Glascoe, Myeong Won Lee, Joe Williams, and Prof. Jung-Ju Choi attended. <br />
<br />
==1. Facial animation using current H-Anim==<br />
<br />
<br />
Jung-Ju explained [http://web3d.org/wiki/images/3/3e/H-Anim-ConfCall-20140108-2.pdf document with design ideas regarding facial animation].<br />
<br />
Joe Williams discussed a number Jung-Ju's questions about his proposal. Check out MPEG-4 Facial Animation Parameter overview at the following URL.<br />
* http://www.visagetechnologies.com/uploads/2012/08/MPEG-4FBAOverview.pdf<br />
* Virtual Humans by Prof Nadia Magnenat Thalmann is another reference.<br />
<br />
''Caution please:'' Everyone has to be very careful not to infringe on MPEG4 FAP Intellectual Property Rights in facial animation.<br />
<br />
==2. Relationship to current and future H-Anim ==<br />
<br />
Don explains how feature points are animated (via HAnimSite and HAnimDisplacer nodes) and how a comparison (CoordinateInterpolator and IndexedFaceSet/mesh) might show how much value is added by a mesh displacer. <br />
<br />
A prerequisite for CoordinateInterpolator is that every vertex in the mesh must be animated.<br />
<br />
* In X3D, a CoordinateInterpolator can animate a mesh. This is an interesting alternative that can be compared in a test.<br />
* The red dots in Jung-Ju's figure shown today correspond to feature points<br />
* The number of black vertices might vary depending on an implementation<br />
* The most interesting choice for an H-Anim perspective might be choice of those feature points<br />
** H-Anim has about about 8 (or 9) feature points for face. See H-Anim Specification [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePointsOnTheHumanBody Figure B.1] and feature points 1..8, which are listed in [http://www.web3d.org/files/specifications/19774/V1.0/HAnim/FeaturePoints.html#FeaturePoints Table B.1].<br />
** MPEG4 has about 50 feature points for face, but there are patents restricting their specific use in an open standard<br />
<br />
So our first main design decision for H-Anim might be whether to<br />
<br />
'''1. pre-specify a set of feature points for common use (and re-use)'''<br />
'''2. or allow an author to define them (which might not be valuable, they can define geometry anyway'''<br />
<br />
(I'm guessing we'd want option #1, but it is possible that we might find a way to do something like option #2.)<br />
<br />
There are also a finite number of human facial expressions<br />
* there are multiple models published about this (see SIGGRAPH papers, can we make a list?)<br />
* each facial expression has a name<br />
* there is a set of feature points common to these<br />
<br />
So our next next decision might be<br />
<br />
'''3. to define a set of sites, likely as a superset of the existing 8 points in H-Anim'''<br />
'''4. to define a set of expressions, each named, each with a finite number of the feature points'''<br />
<br />
Possibility: if we added a little more to Jung-Ju's point paper (perhaps steps 1 3 and 4 above) then we could write "expression animators" that describe the end locations of each feature point.<br />
<br />
=== Joe's comments on this topic ===<br />
<br />
I will work on this more. I like how the proposed parametric animation could work with the Displacer. I lost my edit.<br />
<br />
<br />
http://h-anim.org/Specifications/H-Anim1.1/appendices.html#appendixb<br />
is some old work. <br />
<br />
Level of Detail perspective (JW)...<br />
<br />
==3. Standardization item for facial animation ==<br />
<br />
We will discuss further in Korea. Points of interest:<br />
* the only skeletal motion in the face is the jaw but the rotation of the tongue, eyeballs, eyelids and ... are addressable<br />
* the boundaries of the facial muscles could for the basis of the facial animation parameters (perimeters of primitive zones)<br />
* the boundaries of facial skin as mapped by estheticians could form the basis of the H-anim facial animations primitives<br />
<br />
==4. NWIP discussion==<br />
<br />
Dick reports that both New Work Item Proposals have passed ISO SC 24 review.<br />
<br />
Congratulations everyone! Thanks Myeong Won Lee for drafting the original documents!<br />
<br />
==5. Parametric Human Project== <br />
<br />
William mentioned collaborating with the Parametric Human Project as they amass microCT data of human skeletons. See a paper describing the project scope and goals.<br />
<br />
* http://www.autodeskresearch.com/pdf/PMHA%202013%20-%20AutoDesk%20Ontology%20Paper.pdf<br />
<br />
==6. Scheduling next meeting==<br />
<br />
Next meeting will be held in person, co-located at the meetings below, as well as via Web3D teleconference. <br />
January 20th (Monday) at 4:00pm PST (21th, 9:00am KST) <br />
---------------------------------------------------------------------------------------------<br />
<br />
This wiki approach worked today, we will try to continue that to make simultaneous contributions and discussion easier.</div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2326X3D and HTML5 examples2009-10-31T04:04:51Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes. <br />
<br />
== Contents ==<br />
<br />
* 1 HelloWorld.x3d standalone scene<br />
* 2 X3D embedded in HTML page<br />
* 3 HTML Anchor link to X3D document<br />
* 4 X3D embedded using object element<br />
* 5 X3D served as text/html<br />
* 6 X3D served as application/xhtml+xml<br />
* 7 X3D served as application/xhtml+xml : HTML onClick() Event<br />
* 8 X3D served as application/xhtml+xml : updates on the tree<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D slightly extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Making direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2325X3D and HTML5 examples2009-10-31T04:04:04Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes. <br />
<br />
++ Contents ++<br />
<br />
* 1 HelloWorld.x3d standalone scene<br />
* 2 X3D embedded in HTML page<br />
* 3 HTML Anchor link to X3D document<br />
* 4 X3D embedded using object element<br />
* 5 X3D served as text/html<br />
* 6 X3D served as application/xhtml+xml<br />
* 7 X3D served as application/xhtml+xml : HTML onClick() Event<br />
* 8 X3D served as application/xhtml+xml : updates on the tree<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D slightly extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Making direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2324X3D and HTML5 examples2009-10-31T04:03:09Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes. Contents [hide]<br />
<br />
* 1 HelloWorld.x3d standalone scene<br />
* 2 X3D embedded in HTML page<br />
* 3 HTML Anchor link to X3D document<br />
* 4 X3D embedded using object element<br />
* 5 X3D served as text/html<br />
* 6 X3D served as application/xhtml+xml<br />
* 7 X3D served as application/xhtml+xml : HTML onClick() Event<br />
* 8 X3D served as application/xhtml+xml : updates on the tree<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D slightly extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Making direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2323X3D and HTML5 examples2009-10-31T04:02:33Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
Contents [hide]<br />
<br />
* 1 HelloWorld.x3d standalone scene<br />
* 2 X3D embedded in HTML page<br />
* 3 HTML Anchor link to X3D document<br />
* 4 X3D embedded using object element<br />
* 5 X3D served as text/html<br />
* 6 X3D served as application/xhtml+xml<br />
* 7 X3D served as application/xhtml+xml : HTML onClick() Event<br />
* 8 X3D served as application/xhtml+xml : updates on the tree<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D slightly extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Making direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2322X3D and HTML5 examples2009-10-31T03:59:54Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
Contents [hide]<br />
<br />
* 1 HelloWorld.x3d standalone scene<br />
* 2 X3D embedded in HTML page<br />
* 3 HTML Anchor link to X3D document<br />
* 4 X3D embedded using object element<br />
* 5 X3D served as text/html<br />
* 6 X3D served as application/xhtml+xml<br />
* 7 X3D served as application/xhtml+xml : HTML onClick() Event<br />
* 8 X3D served as application/xhtml+xml : updates on the tree<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D slightly extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Making direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2321X3D and HTML5 examples2009-10-30T19:06:24Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D slightly extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Making direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2320X3D and HTML5 examples2009-10-30T19:04:09Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D - Using Direct updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2319X3D and HTML5 examples2009-10-30T19:00:15Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D extended - Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2318X3D and HTML5 examples2009-10-30T18:56:00Z<p>Joedwil: </p>
<hr />
<div>Here are eight examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2317X3D and HTML5 examples2009-10-30T18:47:23Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using HTML5 object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2316X3D and HTML5 examples2009-10-30T18:40:21Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : Box has added html onclick event ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2315X3D and HTML5 examples2009-10-30T18:33:10Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : <br />
[note: Box has added html onclick event] ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2314X3D and HTML5 examples2009-10-30T18:28:09Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : <br />
[note: Box has added html onclick event]<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2313X3D and HTML5 examples2009-10-30T18:26:12Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : <br />
[note: Box has added html onclick event<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" onclick="alert('box picked at position ' + hitPnt);" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2312X3D and HTML5 examples2009-10-30T18:21:45Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : <br />
[note: Box has added html onclick event<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2311X3D and HTML5 examples2009-10-30T17:15:22Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta name='title' content='HelloWorld.x3d'/><br />
&lt;meta name='identifier' content='http://www.web3d.org/x3d/content/examples/HelloWorld.x3d'/> <br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as text/html (no namespace prefix) ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml (with namespace prefix) ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : <br />
[note: Box is not allowed to have an onclick attribute, needs to be fixed]<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock' xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
== X3D served as application/xhtml+xml : updates on the tree ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Appearance><br />
&lt;Material diffuseColor="1 0 0" /><br />
&lt;/Appearance><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;script type="text/javascript">&lt;! CDATA<br />
var colSel = true;<br />
function toggleRendering()<br />
{<br />
var button = document.getElementById("color"); <br />
colSel = !colSel; <br />
if (colSel)<br />
button.value = "Blue";<br />
else<br />
button.value = "Red"; <br />
var mat = document.getElementsByTagName("Material");<br />
var n = mat.length; <br />
var aMat = mat[0];<br />
aMat.setAttribute("diffuseColor", (!colSel ? "0 0 1" : "1 0 0")); <br />
return false;<br />
} <br />
>&lt;/script> <br />
&lt;p class="case"> &nbsp; <br />
Dynamic material update<br />
&lt;input type="button" id="color" value="Change Color" onclick="toggleRendering();" /><br />
&lt;/p> <br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2286X3D and HTML5 examples2009-10-27T17:01:05Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2285X3D and HTML5 examples2009-10-27T16:59:40Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2284X3D and HTML5 examples2009-10-27T16:57:46Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2283X3D and HTML5 examples2009-10-27T16:55:28Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
<br />
<br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2282X3D and HTML5 examples2009-10-27T16:53:55Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
<br />
<br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2281X3D and HTML5 examples2009-10-27T16:52:46Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "zttp://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2280X3D and HTML5 examples2009-10-27T16:51:58Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "zhttp://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2279X3D and HTML5 examples2009-10-27T16:50:40Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2278X3D and HTML5 examples2009-10-27T16:49:23Z<p>Joedwil: </p>
<hr />
<div>Here are examples that show different ways of combining HTML web pages and X3D scenes.<br />
<br />
== HelloWorld.x3d standalone scene ==<br />
<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?><br />
&lt;!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN"<br />
"http://www.web3d.org/specifications/x3d-3.2.dtd"><br />
&lt;X3D profile='Immersive' version='3.2' <br />
xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' <br />
xsd:noNamespaceSchemaLocation=<br />
'http://www.web3d.org/specifications/x3d-3.2.xsd'><br />
&lt;head><br />
&lt;meta content='HelloWorld.x3d' name='title'/><br />
&lt;/head><br />
&lt;Scene><br />
&lt;Group><br />
&lt;Viewpoint centerOfRotation='0 -1 0' <br />
description='Hello world!' position='0 -1 7'/><br />
&lt;Transform rotation='0 1 0 3'><br />
&lt;Shape><br />
&lt;Sphere/><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0 0.5 1'/><br />
&lt;ImageTexture url='"earth-topo.png"' /><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;Transform translation='0 -2 0'><br />
&lt;Shape><br />
&lt;Text solid='false' string='"Hello" "world!"'><br />
&lt;FontStyle justify='"MIDDLE" "MIDDLE"'/><br />
&lt;/Text><br />
&lt;Appearance><br />
&lt;Material diffuseColor='0.1 0.5 1'/><br />
&lt;/Appearance><br />
&lt;/Shape><br />
&lt;/Transform><br />
&lt;/Group><br />
&lt;/Scene><br />
&lt;/X3D><br />
<br />
<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]<br />
shows a simple standalone example<br />
([http://www.web3d.org/x3d/content/examples/HelloWorld.html .html] and<br />
[http://www.web3d.org/x3d/content/examples/HelloWorld.tall.png .png])<br />
<br />
== X3D embedded in HTML page ==<br />
<br />
[http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html HTML Object Tag for X3D]<br />
shows how to place X3D objects within an HTML page<br />
<br />
[http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html newHtmlPageWithX3dObject.html]<br />
is an example HTML scene with X3D object tag to copy, edit and reuse.<br />
<br />
&lt;html><br />
&lt;body><br />
&lt;object data="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"<br />
type="model/x3d+xml" height="360" width=" <br />
&lt;param name="src" value="http://www.web3d.org/x3d/content/examples/HelloWorld.x3d"/><br />
&lt;param name="DASHBOARD" value="FALSE"/><br />
&lt;param name="SPLASHSCREEN" value="<br />
&lt;!-- the following anchor-link text is only displayed to user if no X3D plugin is already installed --><br />
&lt;div class="noX3dPluginInstalled"><br />
&lt;a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications" target="helpPage"> <br />
Select an X3D plugin to see this example...</a><br />
&lt;/div><br />
&lt;/object><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== HTML Anchor link to X3D document == <br />
<br />
HTML anchor links allow an HTML page to load the contents of an X3D scene.<br />
<br />
HTML source:<br />
<br />
Here is my<br />
&lt;a href='[http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld.x3d]' title='Link to a new X3D document'>HelloWorld example&lt;/a> in X3D.<br />
<br />
HTML result:<br />
Here is my [http://www.web3d.org/x3d/content/examples/HelloWorld.x3d HelloWorld example] in X3D.<br />
<br />
Typically Web browser responses to a user selecting the link:<br />
* Show X3D scene, if an X3D plugin is installed or native support for X3D is provided<br />
* 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)<br />
* Show source (if http server [http://www.web3d.org/x3d/learn/mimetypes X3D MIME type settings] are incorrect)<br />
<br />
<br />
== X3D embedded using object element == <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
<br />
== X3D served as application/xhtml+xml ==<br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
== X3D served as text/html ==<br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2250X3D and HTML5 examples2009-10-16T20:49:00Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:X3D name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:X3D><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2249X3D and HTML5 examples2009-10-16T20:46:56Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:x3d name='x3dBlock'<br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:x3d><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2248X3D and HTML5 examples2009-10-16T02:34:05Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:x3d><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby> WWW &lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2247X3D and HTML5 examples2009-10-16T02:01:07Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:x3d><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint description='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby><br />
&lt;rb>WWW&lt;/rb>&lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2246X3D and HTML5 examples2009-10-16T01:58:14Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:x3d><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
svg { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
version='3.3' profile='Interchange'<br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint descrition='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby><br />
&lt;rb>WWW&lt;/rb>&lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2245X3D and HTML5 examples2009-10-16T01:49:26Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:x3d><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint descrition='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;svg type='image/svg+xml' version="1.1"><br />
&lt;ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /><br />
&lt;/svg><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby><br />
&lt;rb>WWW&lt;/rb>&lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2244X3D and HTML5 examples2009-10-16T00:22:50Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene&lt;/a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
&lt;object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
&lt;/object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
&lt;?xml version="1.0" encoding="utf-8" ?><br />
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"><br />
&lt;head><br />
&lt;style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
&lt;Scene><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/x3d:x3d><br />
&lt;/body><br />
&lt;/html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
&lt;head><br />
&lt;style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
&lt;/style><br />
&lt;/head><br />
&lt;body><br />
&lt;X3D name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
&lt;Scene><br />
&lt;Viewpoint descrition='Start' /><br />
&lt;Shape><br />
&lt;Box size="4 4 4" /><br />
&lt;/Shape><br />
&lt;Shape><br />
&lt;Text string='"This is X3D Text"' /><br />
&lt;/Shape><br />
&lt;/Scene><br />
&lt;/X3D><br />
&lt;mathml><br />
&lt;mrow>&lt;mi> x &lt;/mi>&lt;mo> + &lt;/mo><br />
&lt;mrow>&lt;mi> a &lt;/mi>&lt;mo> / &lt;/mo>&lt;mi> b &lt;/mi><br />
&lt;/mrow>&lt;/mrow><br />
&lt;/mathml><br />
&lt;ruby><br />
&lt;rb>WWW&lt;/rb>&lt;rt>World Wide Web&lt;/rt><br />
&lt;/ruby><br />
&lt;/body><br />
&lt;/html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2243X3D and HTML5 examples2009-10-16T00:16:47Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
</style><br />
</head><br />
<body><br />
<X3D name='x3dBlock' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
<Scene><br />
<Viewpoint descrition='Start' /><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
<mathml><br />
<mrow><mi> x </mi><mo> + </mo><br />
<mrow><mi> a </mi><mo> / </mo><mi> b </mi><br />
</mrow></mrow><br />
</mathml><br />
<ruby><br />
<rb>WWW</rb><rt>World Wide Web</rt><br />
</ruby><br />
</body><br />
</html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2242X3D and HTML5 examples2009-10-16T00:09:50Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
</style><br />
</head><br />
<body><br />
<X3D><br />
<Scene><br />
<Viewpoint descrition='Start' /><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
<mathml><br />
<mrow><mi> x </mi><mo> + </mo><br />
<mrow><mi> a </mi><mo> / </mo><mi> b </mi><br />
</mrow></mrow><br />
</mathml><br />
</body><br />
</html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2241X3D and HTML5 examples2009-10-16T00:08:17Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
</style><br />
</head><br />
<body><br />
<X3D><br />
<Scene><br />
<vciewpoint descrition='Start' /><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
<mathml><br />
<mrow><mi> x </mi><mo> + </mo><br />
<mrow><mi> a </mi><mo> / </mo><mi> b </mi><br />
</mrow></mrow><br />
</mathml><br />
</body><br />
</html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2240X3D and HTML5 examples2009-10-16T00:04:34Z<p>Joedwil: text/html example</p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:100%;width:100%; }<br />
</style><br />
</head><br />
<body><br />
<X3D><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
<mathml><br />
<mrow><mi> x </mi><mo> + </mo><br />
<mrow><mi> a </mi><mo> / </mo><mi> b </mi><br />
</mrow></mrow><br />
</mathml><br />
</body><br />
</html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2239X3D and HTML5 examples2009-10-15T00:59:25Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' <br />
allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html. (table in this case.) <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d <br />
xmlns:x3d=<br />
"http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<X3D><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
</body><br />
</html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2238X3D and HTML5 examples2009-10-15T00:54:30Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html table. <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<X3D><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
</body><br />
</html></div>Joedwilhttps://www.old.web3d.org/wiki/index.php?title=X3D_and_HTML5_examples&diff=2231X3D and HTML5 examples2009-10-13T16:42:06Z<p>Joedwil: </p>
<hr />
<div>* <b>Draft Example #1, Anchor link to new document</b><br />
<br />
<br />
&lt;a href='aScene.x3d' title='A new X3D document.window'>Enter My Scene</a><br />
<br />
* html anchor link.<br />
* In this case the host browser uses whatever it has access to in order to create a new window browsing context for the target .x3d resource. <br />
<br />
* <b>Draft Example #2, embedded using object element. </b> <br />
<br />
<object name='x3d' type='model/x3d+xml' allow-same-origin allow-scripts><br />
<param name='src' value='aScene.x3d'><br />
&lt;table>...</table><br />
</object><br />
<br />
* Opens nested browsing context in parent block element.<br />
* Fallback to html table. <br />
* Connections with DOM via event listeners (DOM<=>SAI). <br />
* Set of negotiated <param> pairs: initialization and runtime.<br />
<br />
* <b>Draft Example #3, served as application/xhtml+xml</b><br />
<br />
<?xml version="1.0" encoding="utf-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<style type=text/css'><br />
x3d:X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<x3d:x3d xmlns:x3d="http://www.web3d.org/specifications/x3d-3.2.xsd"><br />
<x3d:Scene><br />
<x3d:Shape><br />
<x3d:Box x3d:size="4 4 4" /><br />
</x3d:Shape><br />
<x3d:Shape><br />
<x3d:Text x3d:string='"This is X3D Text"' /><br />
<x3d:/Shape><br />
</x3d:Scene><br />
</x3d:x3d><br />
</body><br />
</html><br />
<br />
<br />
* <b>Draft Example #4, served as text/html</b><br />
<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<style type=text/css'><br />
X3D { height:200px;width:200px; }<br />
</style><br />
</head><br />
<body><br />
<X3D><br />
<Scene><br />
<Shape><br />
<Box size="4 4 4" /><br />
</Shape><br />
<Shape><br />
<Text string='"This is X3D Text"' /><br />
</Shape><br />
</Scene><br />
</X3D><br />
</body><br />
</html></div>Joedwil