Skip to content
GitLab
Commit 7018135a authored by Athanasios's avatar Athanasios
Browse files

Add X3DOM tutorials

parent 8faf9dd5
Pipeline #3781 passed with stages
in 25 seconds
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 6016 additions and 86 deletions
+6016 -86
public/X3DOMTutorial/addnode.html 0 → 100644
+ 88
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add/Remove Nodes example</title>
<link rel="stylesheet" type="text/css" href="./x3dom.css">
</head>
<body>
<h1>Add/Remove Nodes Example</h1>
<p>
simple example which shows how to add/remove nodes using a simple DOM appendChild()/removeChild() function
</p>
<x3d id="boxes" showstat="true" x="0px" y="0px" width="600px" height="300px">
<scene render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" pickmode="idBuf" dopickpass="true">
<viewpoint position="4.88104 4.59865 7.4181" orientation="-0.69017 0.723467 -0.0161809 0.735134"
fieldofview="0.785398" centerofrotation="0,0,0" znear="-1" zfar="-1"></viewpoint>
<background def="bgnd" transparency="0" skycolor="1 1 1" groundcolor="" groundangle="" skyangle="" backurl=""
bottomurl="" fronturl="" lefturl="" righturl="" topurl=""></background>
<transform id="root" translation="0 0 0" render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" center="0,0,0"
rotation="0,0,0,0" scale="1,1,1" scaleorientation="0,0,0,0">
<shape render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true">
<appearance sorttype="auto">
<material ambientintensity="0.2" diffusecolor="0.8,0.8,0.8" emissivecolor="0,0,0" shininess="0.2"
specularcolor="0,0,0"></material>
</appearance>
<box solid="true" ccw="true" usegeocache="true" lit="true" size="2,2,2"></box>
</shape>
<transform translation="1.5160652180202305 1.489243873860687 -2.648085524328053"
scale="1.2286848302464932 0.7494203578680754 1.357877661474049" render="true" bboxcenter="0,0,0"
bboxsize="-1,-1,-1" center="0,0,0" rotation="0,0,0,0" scaleorientation="0,0,0,0">
<shape render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true">
<appearance sorttype="auto">
<material ambientintensity="0.2" diffusecolor="0.8,0.8,0.8" emissivecolor="0,0,0" shininess="0.2"
specularcolor="0,0,0"></material>
</appearance>
<box solid="true" ccw="true" usegeocache="true" lit="true" size="2,2,2"></box>
</shape>
</transform>
</transform>
</scene>
<div class="x3dom-progress" style="display: none;"><strong>Loading: 0</strong><span style="width: 25%;"> </span>
</div>
</x3d>
<p>Dynamic childtree update</p>
<input type="button" value="Add Child" onclick="addNode();">
<input type="button" value="Remove Child" onclick="removeNode();">
<script type="text/javascript">
function addNode() {
x = Math.random() * 6 - 3;
y = Math.random() * 6 - 3;
z = Math.random() * 6 - 3;
s0 = Math.random() + 0.5;
s1 = Math.random() + 0.5;
s2 = Math.random() + 0.5;
var t = document.createElement('Transform');
t.setAttribute("translation", x + " " + y + " " + z);
t.setAttribute("scale", s0 + " " + s1 + " " + s2);
var s = document.createElement('Shape');
// Appearance Node
var app = document.createElement('Appearance');
// Material Node
var mat = document.createElement('Material');
app.appendChild(mat);
s.appendChild(app);
t.appendChild(s);
var b = document.createElement('Box');
s.appendChild(b);
var ot = document.getElementById('root');
ot.appendChild(t);
return false;
};
function removeNode() {
var ot = document.getElementById('root');
for (var i = 0; i < ot.childNodes.length; i++) {
// check if we have a real X3DOM Node; not just e.g. a Text-tag
if (ot.childNodes[i].nodeType === Node.ELEMENT_NODE) {
ot.removeChild(ot.childNodes[i]);
break;
}
}
return false;
};
</script>
<script type="text/javascript" src="./x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/barchart.html 0 → 100644
+ 162
- 0
View file @ 7018135a
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Bar Chart </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Coordinate system </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<background transparency='0' skyColor='1 1 1'> </background>
<!-- Invoke CoordinateAxes in other scenes as an Inline child inside a scaling Transform node, at the topmost level of the scene graph. -->
<!-- Each arrow goes from +1m to -1m to allow linear scaling to fit a scene -->
<!-- Note each label rotates about the scene's vertical Y axis for consistency, enabling local orientation by user -->
<Group>
<!-- Vertical Y arrow and label -->
<Group DEF='ArrowGreen'>
<Transform translation='0 1 0'>
<Shape>
<Appearance DEF='Green'>
<Material diffuseColor='0 1 0'> </Material>
</Appearance>
<Cylinder DEF='ArrowCylinder' radius='.025' top='false'> </Cylinder>
</Shape>
</Transform>
<Transform translation='0 2 0'>
<Shape>
<Appearance USE='Green'> </Appearance>
<Cone DEF='ArrowCone' bottomRadius='.05' height='.1'> </Cone>
</Shape>
</Transform>
</Group>
<Transform translation='0 2.08 0'>
<Billboard>
<Shape>
<Appearance DEF='LABEL_APPEARANCE'>
<Material diffuseColor='0 0 0'> </Material>
</Appearance>
<Text id='chartlabel-y' string='"year"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
<Transform rotation='0 0 1 -1.57079'>
<!-- Horizontal X arrow and label -->
<Group DEF='ArrowRed'>
<Transform translation='0 1 0'>
<Shape>
<Appearance DEF='Red'>
<Material diffuseColor='.7 .1 .1' emissiveColor='.33 0 0' />
</Appearance>
<Cylinder USE='ArrowCylinder'> </Cylinder>
</Shape>
</Transform>
<Transform translation='0 2 0'>
<Shape>
<Appearance USE='Red'> </Appearance>
<Cone USE='ArrowCone'> </Cone>
</Shape>
</Transform>
</Group>
<Transform rotation='0 0 1 1.57079' translation='0 2 0'>
<!-- note label rotated back to original coordinate frame -->
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text id='chartlabel-x' string='"building id"'>
<FontStyle USE='LABEL_FONT'>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- bars -->
<Transform id="bar1" translation='0.25 0.5 0'>
<Shape>
<Appearance DEF='BAR_COLOR'>
<Material diffuseColor='1 0 1'>
</Material>
</Appearance>
<Box size='0.025 1 0.025'> </Box>
</Shape>
</Transform>
<Transform id="bar2" translation='0.75 0.5 0'>
<Shape>
<Appearance USE='BAR_COLOR'>
</Appearance>
<Box size='0.025 1.0 0.025'> </Box>
</Shape>
</Transform>
<Transform id="bar3" translation='1.25 0.5 0'>
<Shape>
<Appearance USE='BAR_COLOR'>
</Appearance>
<Box size='0.025 1.0 0.025'> </Box>
</Shape>
</Transform>
<Transform id="bar4" translation='1.75 0.5 0'>
<Shape>
<Appearance USE='BAR_COLOR'>
</Appearance>
<Box size='0.025 1.0 0.025'> </Box>
</Shape>
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
Bar chart example <br> <br>
label x-axis: <input type="text" id="label-x" value="building id" size="12" /> <br>
label y-axis: <input type="text" id="label-y" value="year" size="12" /><br>
attribute year of construction: <br>
<input type="text" id="yoc-b1" value="1960" size="12" /><br>
<input type="text" id="yoc-b2" value="1968" size="12" /><br>
<input type="text" id="yoc-b3" value="1980" size="12" /><br>
<input type="text" id="yoc-b4" value="1985" size="12" /><br>
<input type="button" value="draw" onclick="drawBarChart()" /> <br>
</td>
<script type="text/javascript" src="x3dom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function drawBarChart() {
var labelx = document.getElementById("label-x").value;
var chartlabelx = document.getElementById("chartlabel-x");
chartlabelx.setAttribute("string", labelx);
var labely = document.getElementById("label-y").value;
var chartlabely = document.getElementById("chartlabel-y");
chartlabely.setAttribute("string", labely);
var yocb1 = document.getElementById("yoc-b1").value;
var yocb2 = document.getElementById("yoc-b2").value;
var yocb3 = document.getElementById("yoc-b3").value;
var yocb4 = document.getElementById("yoc-b4").value;
yocb1 = (yocb1 - 1950) / 10;
var bar1 = document.getElementById("bar1");
bar1.setAttribute("translation", "0.25 " + yocb1 / 2.0 + " 0");
bar1.setAttribute("scale", "1 " + yocb1 + " 1");
yocb2 = (yocb2 - 1950) / 10;
var bar2 = document.getElementById("bar2");
bar2.setAttribute("translation", "0.75 " + yocb2 / 2.0 + " 0");
bar2.setAttribute("scale", "1 " + yocb2 + " 1");
yocb3 = (yocb3 - 1950) / 10;
var bar3 = document.getElementById("bar3");
bar3.setAttribute("translation", "1.25 " + yocb3 / 2.0 + " 0");
bar3.setAttribute("scale", "1 " + yocb3 + " 1");
yocb4 = (yocb4 - 1950) / 10;
var bar4 = document.getElementById("bar4");
bar4.setAttribute("translation", "1.75 " + yocb4 / 2.0 + " 0");
bar4.setAttribute("scale", "1 " + yocb4 + " 1");
}
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer.html 0 → 100644
+ 137
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Material brewer</title>
<link rel="stylesheet" type="text/css" href="x3dom.css"></link>
</head>
<body class="ui-widget-content" style="border:0;">
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<Appearance>
<Material id="material"> </Material>
</Appearance>
<Sphere radius="2.0"> </Sphere>
</Shape>
</Scene>
</X3D>
</td>
<td width="50%" align="left" valign="top" scope="col">
The following example will show you haw to interactively modify the 3D scene.
See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
target="_blank">
X3D Material node definition </a> for an explanation of the different color attributes.
<br>
<br><b>ambientIntensity</b><br>
ambientIntensity: 0 <input type="range" id="ambientIntensity" min="0.0" max="1.0" step="0.05" value="0.2"
onchange="changeColor()" />1<br>
<br>
<b>diffue color</b>
<br>
red: 0 <input type="range" id="diffuse_r" min="0.0" max="1.0" step="0.05" value="0.8"
onchange="changeColor()" />1<br>
green: 0 <input type="range" id="diffuse_g" min="0.0" max="1.0" step="0.05" value="0.8"
onchange="changeColor()" />1<br>
blue: 0 <input type="range" id="diffuse_b" min="0.0" max="1.0" step="0.05" value="0.8"
onchange="changeColor()" />1<br>
<br><b>emissive color</b><br>
red: 0 <input type="range" id="emissive_r" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
green: 0 <input type="range" id="emissive_g" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
blue: 0 <input type="range" id="emissive_b" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
<br>
<b>specular color</b>
<br>
red: 0 <input type="range" id="specular_r" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
green: 0 <input type="range" id="specular_g" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
blue: 0 <input type="range" id="specular_b" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
<br>
<b>shininess</b>
<br>
shininess: 0 <input type="range" id="shininess" min="0.0" max="1.0" step="0.05" value="0.2"
onchange="changeColor()" />1<br>
<br>
<b>transparency</b>
<br>
transparency : 0 <input type="range" id="transparency" min="0.0" max="1.0" step="0.05" value="0.0"
onchange="changeColor()" />1<br>
<br>
<p>
<br><br>
The diffuse color of a material will be interactively changed.
A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
and modified.
If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to
get the Material node first.
This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
<pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
<br>
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
attribute diffuseColor is set to
"1.0 0.0 0.0". The attribute value is always a string.
<pre>
var mat = document.getElementById("material");
mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
</pre>
In the example, the RGB value is fetched from the slider.
<pre>
var mat = document.getElementById("material");
rgbstring = " "+ red + " " + green + " " + blue;
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</p>
</td>
<script type="text/javascript" src="x3dom.js"></script>
<script>
/**
* Change the settings of the directional light
*
* @param field string: Name of the field
* @param value number: New value to set
*/
function changeColor() {
var material = document.getElementById("material");
var emissive_rgb = " " + document.getElementById("emissive_r").value;
emissive_rgb += " " + document.getElementById("emissive_g").value;
emissive_rgb += " " + document.getElementById("emissive_b").value;
material.setAttribute("emissiveColor", emissive_rgb);
var diffuse_rgb = " " + document.getElementById("diffuse_r").value;
diffuse_rgb += " " + document.getElementById("diffuse_g").value;
diffuse_rgb += " " + document.getElementById("diffuse_b").value;
material.setAttribute("diffuseColor", diffuse_rgb);
var specular_rgb = " " + document.getElementById("specular_r").value;
specular_rgb += " " + document.getElementById("specular_g").value;
specular_rgb += " " + document.getElementById("specular_b").value;
material.setAttribute("specularColor", specular_rgb);
var ambientIntensity = " " + document.getElementById("ambientIntensity").value;
material.setAttribute("ambientIntensity", ambientIntensity);
var shininess = " " + document.getElementById("shininess").value;
material.setAttribute("shininess", shininess);
var transparency = " " + document.getElementById("transparency").value;
material.setAttribute("transparency", transparency);
}
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer2.html 0 → 100644
+ 133
- 0
View file @ 7018135a
<html>
<head>
<meta charset="utf-8">
<title>Material brewer</title>
<!-- source Colorpicker slider: http://jqueryui.com/slider/#colorpicker -->
<link rel="stylesheet" type="text/css" href="x3dom.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</link>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</link>
<style>
#red,
#green,
#blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
</style>
</head>
<body class="ui-widget-content" style="border:0;">
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<Appearance>
<Material id="material" diffuseColor="0.980, 0.502, 0.447"> </Material>
</Appearance>
<Sphere radius="2.0"> </Sphere>
</Shape>
</Scene>
</X3D>
</td>
<td width="50%" align="left" valign="top" scope="col">
<p>The following example will show you haw to interactively modify the 3D scene.</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<p>
<br><br><br><br><br><br><br><br><br><br>
The diffuse color of a material will be interactively changed.
A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
and modified.
If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to
get the Material node first.
This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
<pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
<br>
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
attribute diffuseColor is set to
"1.0 0.0 0.0". The attribute value is always a string.
<pre>
var mat = document.getElementById("material");
mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
</pre>
In the example, the RGB value is fetched from the slider. As the slider gives the RGB values between 0 and 255,
they have to be transformed to
arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string.
<pre>
var mat = document.getElementById("material");
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
mat.setAttribute("diffuseColor", rgbstring);
</pre>
</p>
</td>
<script type="text/javascript" src="x3dom.js"></script>
<script>
function refreshDiffuseMaterial() {
var red = $("#red").slider("value"),
green = $("#green").slider("value"),
blue = $("#blue").slider("value");
var mat = document.getElementById("material");
rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255;
mat.setAttribute("diffuseColor", rgbstring);
}
$(function () {
$("#red, #green, #blue").slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshDiffuseMaterial,
change: refreshDiffuseMaterial
});
$("#red").slider("value", 255);
$("#green").slider("value", 140);
$("#blue").slider("value", 60);
});
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/coordinatesystem.html 0 → 100644
+ 119
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Coordinate system </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Coordinate system </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<background transparency='0' skyColor='1 1 1'> </background>
<!-- Invoke CoordinateAxes in other scenes as an Inline child inside a scaling Transform node, at the topmost level of the scene graph. -->
<!-- Each arrow goes from +1m to -1m to allow linear scaling to fit a scene -->
<!-- Note each label rotates about the scene's vertical Y axis for consistency, enabling local orientation by user -->
<Group>
<!-- Vertical Y arrow and label -->
<Group DEF='ArrowGreen'>
<Shape>
<Appearance DEF='Green'>
<Material diffuseColor='0 1 0'> </Material>
</Appearance>
<Cylinder DEF='ArrowCylinder' radius='.025' top='false'> </Cylinder>
</Shape>
<Transform translation='0 1 0'>
<Shape>
<Appearance USE='Green'> </Appearance>
<Cone DEF='ArrowCone' bottomRadius='.05' height='.1'> </Cone>
</Shape>
</Transform>
</Group>
<Transform translation='0 1.08 0'>
<Billboard>
<Shape>
<Appearance DEF='LABEL_APPEARANCE'>
<Material diffuseColor='0 0 0'> </Material>
</Appearance>
<Text string='"Y"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
<Transform rotation='0 0 1 -1.57079'>
<!-- Horizontal X arrow and label -->
<Group DEF='ArrowRed'>
<Shape>
<Appearance DEF='Red'>
<Material diffuseColor='.7 .1 .1' emissiveColor='.33 0 0' />
</Appearance>
<Cylinder USE='ArrowCylinder'> </Cylinder>
</Shape>
<Transform translation='0 1 0'>
<Shape>
<Appearance USE='Red'> </Appearance>
<Cone USE='ArrowCone'> </Cone>
</Shape>
</Transform>
</Group>
<Transform rotation='0 0 1 1.57079' translation='.072 1.1 0'>
<!-- note label rotated back to original coordinate frame -->
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"X"'>
<FontStyle USE='LABEL_FONT'>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<Transform rotation='1 0 0 1.57079'>
<!-- Z arrow and label -->
<Group DEF='ArrowBlue'>
<Shape>
<Appearance DEF='Blue'>
<Material diffuseColor='0 0 1'> </Material>
</Appearance>
<Cylinder USE='ArrowCylinder'> </Cylinder>
</Shape>
<Transform translation='0 1 0'>
<Shape>
<Appearance USE='Blue'> </Appearance>
<Cone USE='ArrowCone'> </Cone>
</Shape>
</Transform>
</Group>
<Transform rotation='1 0 0 -1.57079' translation='0 1.1 .072'>
<!-- note label rotated back to original coordinate frame -->
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"Z"'>
<FontStyle USE='LABEL_FONT'>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
</Group>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
In X3DOM, a right hand coordinate system is used. The Y-axis is pointing up. <br> <br>
<img src="http://flylib.com/books/2/416/1/html/2/images/fig3-3.jpg" width="350" height="310" />
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/hellox3dom.html 0 → 100644
+ 82
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Hello X3DOM </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Hello X3DOM </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<background transparency='0' skyColor='0 1 0'> </background>
<Shape>
<Box> </Box>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the
HTML document.
The &lt;X3D&gt; tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the
library or use it
from the server. It is recommended to use the library from the server to ensure that you always have the latest
version.
A local copy of the library is useful for development, if you are not always connected.
<br>
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;Shape id=box&gt;
&lt;Box&gt; &lt;/Box&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph.
An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph"
target="_blank"> X3D scene graph </a>
is defined as a directed acyclic graph.
The nodes of the scene graph will be rendered on the screen from a given camera position.
The default camera position is (0,0,10) pointing to the negative z-Axis.
So objects at the center of the coordinate system will be displayed on the screen.
A shape node contains a geometry. In this example, it is a simple box. The center of the box is at (0,0,0) with
default size 2 in all dimensions
<br>
The color of the background can be changed in the attribute skyColor. Currently it is red.
The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color
model </a>
with arithmetic notation (0.0 t0 1.0 per value). <br>
The color of the Box can be changed by applying an appearance to the shape node.
In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape
node </a> associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box.
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;Shape id=box&gt;
&lt;appearance &gt;
&lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt;
&lt;/appearance&gt;
&lt;Box&gt; &lt;/Box&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
<shape>
<box></box>
</shape>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandmaterial.html 0 → 100644
+ 103
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> indexed face set and material </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1>indexed face set and material</h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<!-- roof -->
<Appearance>
<Material diffuseColor="0.980, 0.502, 0.447"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1">
<Coordinate DEF="pointset" point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 ">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall -->
<Appearance>
<Material diffuseColor="0.753, 0.753, 0.753"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- ground -->
<Appearance>
<Material diffuseColor="0.180, 0.280, 0.230"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 3 2 1 -1 ">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
One shape has only ony appearance. If different colors for the building elements roof, wall and ground surfaces
shall be used,
we need to have different shape for these elements. However, they can share the same point set. The following
example uses different
Material for roo, wall, and ground surfaces.
<br>
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;!-- roof --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1"&gt;
&lt;Coordinate DEF="pointset" point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;Shape&gt;
&lt;!-- wall --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.753, 0.753, 0.753"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"&gt;
&lt;Coordinate USE="pointset" &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;Shape&gt;
&lt;!-- ground --&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.180, 0.280, 0.230"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 3 2 1 -1 "&gt;
&lt;Coordinate USE="pointset" &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtexturecoord.html 0 → 100644
+ 94
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> indexed face set and material </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</head>
<body>
<h1> indexed face set and material </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<!-- roof -->
<Appearance>
<Material diffuseColor="0.980, 0.502, 0.447"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1">
<Coordinate DEF="pointset" point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 ">
</Coordinate>
<TextureCoordinate DEF="texcoord" point="0 0 0 1 1 1 1 0 0 0 0 1 1 1 1 0 0 0">
</TextureCoorinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall 1 -->
<Appearance>
<ImageTexture
url="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Brick_wall_close-up_view.jpg/800px-Brick_wall_close-up_view.jpg">
</ImageTexture>
<Material diffuseColor="0.753, 0.753, 0.753"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex="0 1 5 4 -1 ">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall -->
<Appearance>
<ImageTexture
url="http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg">
</ImageTexture>
<Material diffuseColor="0.753, 0.753, 0.753"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1"
texCoordIndex="0 1 2 3 -1 0 1 2 3 -1 0 1 2 3">
<Coordinate USE="pointset">
</Coordinate>
<TextureCoordinate USE="texcoord">
</TextureCoorinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- ground -->
<Appearance>
<Material diffuseColor="0.180, 0.280, 0.230"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 3 2 1 -1 ">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
Example: <a href="http://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using Images
and Movies as Textures </a>
<br>
<a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/texturing.html"
target="_blank"> Textures </a>
<br>
<a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet"
target="_blank">
How Textures are mapped on IndexedFaceSet:
</a><br>
<br>
<pre class="prettyprint">
&lt;Appearance&gt;
&lt;ImageTexture url="http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg"&gt;&lt;/ImageTexture&gt;
&lt;Material diffuseColor="0.753, 0.753, 0.753"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtextures.html 0 → 100644
+ 87
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> indexed face set and material </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</head>
<body>
<h1> indexed face set and material <h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<!-- roof -->
<Appearance>
<Material diffuseColor="0.980, 0.502, 0.447"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1">
<Coordinate DEF="pointset" point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 ">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall 1 -->
<Appearance>
<ImageTexture url="img/brick_stone_wall_0119_01_preview.jpg"></ImageTexture>
<Material diffuseColor="0.753, 0.753, 0.753"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex="0 1 5 4 -1 ">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- wall -->
<Appearance>
<ImageTexture
url="http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg">
</ImageTexture>
<Material diffuseColor="0.753, 0.753, 0.753"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape>
<!-- ground -->
<Appearance>
<Material diffuseColor="0.180, 0.280, 0.230"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 3 2 1 -1 ">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
Example: <a href="http://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using
Images and Movies as Textures </a>
<br>
<a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/texturing.html"
target="_blank"> Textures </a>
<br>
<a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/geometry3D.html#IndexedFaceSet"
target="_blank">
How Textures are mapped on IndexedFaceSet:
</a><br>
<br>
<pre class="prettyprint">
&lt;Appearance&gt;
&lt;ImageTexture url="http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Peach_Rinkysplash.jpg/800px-Peach_Rinkysplash.jpg"&gt;&lt;/ImageTexture&gt;
&lt;Material diffuseColor="0.753, 0.753, 0.753"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/img/HFT_DL3_CMYK_maxH27mm.jpg 0 → 100644
+ 0
- 0
View file @ 7018135a
public/X3DOMTutorial/img/HFT_DL3_CMYK_maxH27mm.jpg

671 KB

public/X3DOMTutorial/img/Logo_bisH27mm.jpg 0 → 100644
+ 0
- 0
View file @ 7018135a
public/X3DOMTutorial/img/Logo_bisH27mm.jpg

10.2 KB

public/X3DOMTutorial/img/brick_stone_wall_0119_01_preview.jpg 0 → 100644
+ 0
- 0
View file @ 7018135a
public/X3DOMTutorial/img/brick_stone_wall_0119_01_preview.jpg

68.4 KB

public/X3DOMTutorial/index.html
+ 55
- 86
View file @ 7018135a
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello X3DOM </title>
<link rel="stylesheet" type="text/css" href="https://x3dom.org/download/1.8.1/x3dom.css"></link>
<script type="text/javascript" src = "https://x3dom.org/download/1.8.1/x3dom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X3DOM Tutorials</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.button {
text-decoration: none;
display: block;
width: 500px;
height: 25px;
color: black;
background: lightgray;
padding: 10px;
text-align: center;
border-radius: 5px;
line-height: 25px;
margin-bottom: 10px;
font-family: sans-serif;
}
.button:hover {
background-color: #4CAF50;
color: white;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<font size="4"> Hello X3DOM </font>
<table width="100%" height="85%" border="0">
<tr>
<th width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<background transparency='0' skyColor='0 1 0'> </background>
<Shape>
<Box> </Box>
</Shape>
</Scene>
</X3D>
</p>
</th>
<th width="50%" align="left" valign="top" scope="col">
In this example, a simple 3D scene is integrated into a web page. This is done by the &lt;X3D&gt; tag in the HTML document.
The &lt;X3D&gt; tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the library or use it
from the server. It is recommended to use the library from the server to ensure that you always have the latest version.
A local copy of the library is useful for development, if you are not always connected.
<br>
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;Shape id=box&gt;
&lt;Box&gt; &lt;/Box&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
The &lt;X3D&gt; tag defines the size of the 3D canvas on the web page as well as the scene graph.
An <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/concepts.html#scenegraph" target="_blank"> X3D scene graph </a>
is defined as a directed acyclic graph.
The nodes of the scene graph will be rendered on the screen from a given camera position.
The default camera position is (0,0,10) pointing to the negative z-Axis.
So objects at the center of the coordinate system will be displayed on the screen.
A shape node contains a geometry. In this example, it is a simple box. The center of the box is at (0,0,0) with default size 2 in all dimensions
<br>
The color of the background can be changed in the attribute skyColor. Currently it is red.
The color is defined using <a href="http://en.wikipedia.org/wiki/RGB_color_model" target="_blank"> RGB color model </a>
with arithmetic notation (0.0 t0 1.0 per value). <br>
The color of the Box can be changed by applying an appearance to the shape node.
In X3D, the <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/index.html" target="_blank"> Shape node </a> associates a geometry node with
nodes that define that geometry's appearance. The following example draws a blue box.
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt;
&lt;Shape id=box&gt;
&lt;appearance &gt;
&lt;material diffuseColor='0 0 1'&gt;&lt;/material&gt;
&lt;/appearance&gt;
&lt;Box&gt; &lt;/Box&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
<shape>
<box></box>
</shape>
</th>
<ul class="center">
<li><a class="button" href="hellox3dom.html">hello X3DOM</a></li>
<li><a class="button" href="coordinatesystem.html">coordinate system</a></li>
<li><a class="button" href="transform.html">transform</a></li>
<li><a class="button" href="colorbrewer.html">color brewer</a></li>
<li><a class="button" href="colorbrewer2.html">color brewer 2</a></li>
<li><a class="button" href="indexedfaceset.html">indexedfaceset</a></li>
<li><a class="button" href="indexedfaceset2.html">indexedfaceset 2</a></li>
<li><a class="button" href="ifsandmaterial.html">indexedfaceset and material</a></li>
<li><a class="button" href="ifsandtexturecoord.html">indexedfaceset and texture coord</a></li>
<li><a class="button" href="ifsandtextures.html">indexedfaceset and textures</a></li>
<li><a class="button" href="terrain.html">terrain</a></li>
<li><a class="button" href="barchart.html">barchart</a></li>
<li><a class="button" href="toytown.html">toy town</a></li>
<li><a class="button" href="addnode.html">add node</a></li>
</ul>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset.html 0 → 100644
+ 244
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Indexed Face Set </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Indexed Face Set </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<Appearance>
<Material diffuseColor="0.5 0.5 0.5"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1">
<Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 ">
</Coordinate>
</IndexedFaceSet>
</Shape>
<!-- add points (as spheres) and labels -->
<!-- P0 -->
<Transform translation='-1 0 1'>
<Shape DEF='Point'>
<Appearance DEF='Green'>
<Material diffuseColor='0 1 0'> </Material>
</Appearance>
<Sphere radius="0.1"> </Sphere>
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance DEF='LABEL_APPEARANCE'>
<Material diffuseColor='0 0 0'> </Material>
</Appearance>
<Text string='"P0"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P1 -->
<Transform translation='1 0 1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P1"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P2 -->
<Transform translation='1 0 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P2"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P3 -->
<Transform translation='-1 0 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P3"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P4 -->
<Transform translation='-1 2 1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P4"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P5 -->
<Transform translation='1 2 1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P5"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P6 -->
<Transform translation='1 2 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P6"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P7 -->
<Transform translation='-1 2 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P7"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P8 -->
<Transform translation='0 3 0'>
<Shape USE="Point">
</Shape>
<Transform translation='0 0.0 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P8"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
The building geometry is given by a set of points P={P0, P1, ..., Pn}
and a set of polygons F={F0, F1, ..., Fm}. Each point Pi is given by its coordinates Pi=(xi,yi,zi).
Each polygon Fi is defined by a list of m coplanar points (m >=3) given in counterclockwise order:
Fi=(Pi0, Pi1, ... Pim)
<pre>
Example:
P = {P0, P1, P2, P3, P4, P5, P6, P7, P8}
with
P0 = (-1.0, 0.0, 1.0)
P1 = ( 1.0, 0.0, 1.0)
P2 = ( 1.0, 0.0, -1.0)
P3 = (-1.0, 0.0, -1.0)
P4 = (-1.0, 2.0, 1.0)
P5 = ( 1.0, 2.0, 1.0)
P6 = ( 1.0, 2.0, -1.0)
P7 = (-1.0, 2.0, -1.0)
P8 = ( 0.0, 3.0, 0.0)
F = {F0, F1, F2, F3, F4, F5, F6, F7, F8}
wall:
F0 = (P0, P1, P5, P4)
F1 = (P1, P2, P6, P5)
F2 = (P2, P3, P7, P6)
F3 = (P3, P0, P4, P7)
ground:
F4 = (P0, P3, P2, P1)
roof:
F5 = (P7, P4, P8)
F6 = (P4, P5, P8)
F7 = (P5, P6, P8)
F8 = (P6, P7, P8)
</pre>
<br>
In the IndexedFaceSet the point set P is defined in the Coordinate node.
The set of polygons F is defined in the attribute coordIndex. Each polygon is given by a list of point indices
followed by -1 to indicate the end of a polygon and the beginning of a new one.
<br>
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.5 0.5 0.5"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1"&gt;
&lt;Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset2.html 0 → 100644
+ 249
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Indexed Face Set</title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Indexed Face Set </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<Shape>
<Appearance>
<Material diffuseColor="0.5 0.5 0.5"> </Material>
</Appearance>
<IndexedFaceSet solid="false" ccw="true" coordIndex=" 0 4 5 1 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 1 2 3 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1
9 13 14 10 -1 10 11 15 14 -1 11 12 16 15 -1
12 9 13 16 -1 9 10 11 12 -1 16 13 17 -1
13 14 17 -1 14 15 17 -1 15 16 17 -1">
<Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0,
2 0 1, 4 0 1, 4 0 -1, 2 0 -1,
2 2 1, 4 2 1, 4 2 -1, 2 2 -1, 3 3 0 ">
</Coordinate>
</IndexedFaceSet>
</Shape>
<!-- add points (as spheres) and labels -->
<!-- P0 -->
<Transform translation='-1 0 1'>
<Shape DEF='Point'>
<Appearance DEF='Green'>
<Material diffuseColor='0 1 0'> </Material>
</Appearance>
<Sphere radius="0.1"> </Sphere>
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance DEF='LABEL_APPEARANCE'>
<Material diffuseColor='0 0 0'> </Material>
</Appearance>
<Text string='"P0"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P1 -->
<Transform translation='1 0 1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P1"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P2 -->
<Transform translation='1 0 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P2"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P3 -->
<Transform translation='-1 0 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P3"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P4 -->
<Transform translation='-1 2 1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P4"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P5 -->
<Transform translation='1 2 1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P5"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P6 -->
<Transform translation='1 2 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P6"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P7 -->
<Transform translation='-1 2 -1'>
<Shape USE="Point">
</Shape>
<Transform translation='0 -0.75 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P7"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
<!-- P8 -->
<Transform translation='0 3 0'>
<Shape USE="Point">
</Shape>
<Transform translation='0 0.0 0'>
<Billboard>
<Shape>
<Appearance USE='LABEL_APPEARANCE'>
</Appearance>
<Text string='"P8"'>
<FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
</Text>
</Shape>
</Billboard>
</Transform>
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
The building geometry is given by a set of points P={P0, P1, ..., Pn}
and a set of polygons F={F0, F1, ..., Fm}. Each point Pi is given by its coordinates Pi=(xi,yi,zi).
Each polygon Fi is defined by a list of m coplanar points (m >=3) given in counterclockwise order:
Fi=(Pi0, Pi1, ... Pim)
<pre>
Example:
P = {P0, P1, P2, P3, P4, P5, P6, P7, P8}
with
P0 = (-1.0, 0.0, 1.0)
P1 = ( 1.0, 0.0, 1.0)
P2 = ( 1.0, 0.0, -1.0)
P3 = (-1.0, 0.0, -1.0)
P4 = (-1.0, 2.0, 1.0)
P5 = ( 1.0, 2.0, 1.0)
P6 = ( 1.0, 2.0, -1.0)
P7 = (-1.0, 2.0, -1.0)
P8 = ( 0.0, 3.0, 0.0)
F = {F0, F1, F2, F3, F4, F5, F6, F7, F8}
wall:
F0 = (P0, P1, P5, P4)
F1 = (P1, P2, P6, P5)
F2 = (P2, P3, P7, P6)
F3 = (P3, P0, P4, P7)
ground:
F4 = (P0, P3, P2, P1)
roof:
F5 = (P7, P4, P8)
F6 = (P4, P5, P8)
F7 = (P5, P6, P8)
F8 = (P6, P7, P8)
</pre>
<br>
In the IndexedFaceSet the point set P is defined in the Coordinate node.
The set of polygons F is defined in the attribute coordIndex. Each polygon is given by a list of point indices
followed by -1 to indicate the end of a polygon and the beginning of a new one.
<br>
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor="0.5 0.5 0.5"&gt; &lt;/Material&gt;
&lt;/Appearance&gt;
&lt;IndexedFaceSet solid="true" ccw ="true"
coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
4 5 8 -1 5 6 8 -1 6 7 8 -1"&gt;
&lt;Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 " &gt;
&lt;/Coordinate&gt;
&lt;/IndexedFaceSet&gt;
&lt;/Shape&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/terrain.html 0 → 100644
+ 92
- 0
View file @ 7018135a
This diff is collapsed.
public/X3DOMTutorial/toytown.html 0 → 100644
+ 104
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> toy town </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> toy town </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<transform id="terrain">
<Shape>
<Appearance>
<ImageTexture url="./img/Logo_bisH27mm.jpg"></ImageTexture>
<Material diffuseColor="0, 1, 0"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 3 2 1 -1">
<Coordinate point="-5 0 -5, 5 0 -5, 5 0 5, -5 0 5">
</Coordinate>
</IndexedFaceSet>
</Shape>
</transform>
<transform id="building_1">
<Group DEF="building">
<Shape DEF="roof">
<!-- roof -->
<Appearance>
<Material diffuseColor="0.980, 0.502, 0.447"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1">
<Coordinate DEF="pointset" point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
-1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 ">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape DEF="wall">
<!-- wall -->
<Appearance>
<Material diffuseColor="0.753, 0.753, 0.753"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1 3 0 4 7 -1">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
<Shape DEF="ground">
<!-- ground -->
<Appearance>
<Material diffuseColor="0.180, 0.280, 0.230"> </Material>
</Appearance>
<IndexedFaceSet solid="true" ccw="true" coordIndex=" 0 3 2 1 -1 ">
<Coordinate USE="pointset">
</Coordinate>
</IndexedFaceSet>
</Shape>
</Group>
</Transform>
<Transform id="building_2" translation="3 0 0">
<Group>
<Shape USE="roof">
</Shape>
<Shape USE="wall">
</Shape>
<Shape USE="ground">
</Shape>
</Group>
</Transform>
<Transform id="building_3" translation="0 0 4">
<Group>
<Shape USE="roof">
</Shape>
<Shape USE="wall">
</Shape>
<Shape USE="ground">
</Shape>
</Group>
</Transform>
<Transform id="building_4" translation="-3 0 0">
<Group>
<Shape USE="roof">
</Shape>
<Shape USE="wall">
</Shape>
<Shape USE="ground">
</Shape>
</Group>
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
DEF / USE
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/transform.html 0 → 100644
+ 86
- 0
View file @ 7018135a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Transformation </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Transformation </h1>
<table width="100%" height="85%" border="0">
<tr>
<td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene>
<background transparency='0' skyColor='1 1 1'> </background>
<Shape>
<Appearance>
<Material diffuseColor='1 0 0'></Material>
</Appearance>
<Box></Box>
</Shape>
<Transform translation='-3 0 0'>
<Shape>
<Appearance>
<Material diffuseColor='0 1 0'></Material>
</Appearance>
<Cone></Cone>
</Shape>
</Transform>
<Transform translation='3 0 0'>
<Shape>
<Appearance>
<Material diffuseColor='0 0 1'></Material>
</Appearance>
<Sphere></Sphere>
</Shape>
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
In X3DOM, a shape such as Box, Cone, and Sphere is always created at the center of the coordinate system. The
size of the shape can be modified,
but the location is always centered at (0,0,0). To move a shape to another location, a transformation needs to
be applied. See slides for
the different kinds of affine transformations: translation, rotation, and scaling.
<br>
<pre class="prettyprint">
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 1 1'&gt; &lt;/background&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor='1 0 0'&gt;&lt;/Material&gt;
&lt;/Appearance&gt;
&lt;Box&gt;&lt;/Box&gt;
&lt;/Shape&gt;
&lt;Transform translation='-3 0 0'&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor='0 1 0'&gt;&lt;/Material&gt;
&lt;/Appearance&gt;
&lt;Cone&gt;&lt;/Cone&gt;
&lt;/Shape&gt;
&lt;/Transform&gt;
&lt;Transform translation='3 0 0'&gt;
&lt;Shape&gt;
&lt;Appearance&gt;
&lt;Material diffuseColor='0 0 1'&gt;&lt;/Material&gt;
&lt;/Appearance&gt;
&lt;Sphere&gt;&lt;/Sphere&gt;
&lt;/Shape&gt;
&lt;/Transform&gt;
&lt;/Scene&gt;
&lt;/X3D&gt;
</pre>
<br>
This example illustrates how to move shapes to another location.
</td>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/x3dom.css 0 → 100644
+ 222
- 0
View file @ 7018135a
/*
* X3DOM JavaScript Library
* http://www.x3dom.org
*
* (C)2009 Fraunhofer IGD, Darmstadt, Germany
* Dual licensed under the MIT and GPL
*
* Based on code originally provided by
* Philip Taylor: http://philip.html5.org
*/
body {
background-color: white;
font-family: Helvetica, sans-serif;
font-size: 12px;
}
X3D, x3d {
position:relative; /* in order to be able to position stat-div within X3D */
float:left; /* float the element so it has the same size like the canvas */
cursor:pointer;
margin: 0;
padding: 0;
border: 1px solid #000;
}
object {
margin: 0;
padding: 0;
border: none;
z-index: 0;
width:100%;
height:100%;
float:left;
}
X3D:hover,
x3d:hover,
.x3dom-canvas:hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.x3dom-canvas {
border:none;
cursor:pointer;
cursor:-webkit-grab;
cursor:grab;
width:100%;
height:100%;
float:left;
}
.x3dom-canvas-mousedown {
cursor:-webkit-grabbing;
cursor:grabbing;
}
.x3dom-canvas:focus {
outline:none;
}
.x3dom-progress {
margin: 0;
padding: 6px 8px 0px 26px;
left: 0px;
top: 0px;
position: absolute;
color: #0f0;
font-family: Helvetica, sans-serif;
line-height:10px;
font-size: 10px;
min-width: 45px;
min-height: 20px;
border: 0px;
background-position: 4px 4px;
background-repeat: no-repeat;
background-color: #333;
background-color: rgba(51, 51, 51, 0.9);
z-index: 100;
background-image: url('data:image/gif;base64,R0lGODlhEAAQAPQAADMzM////z4+Po+Pj0pKSsbGxpycnP///7e3t+Hh4XR0dGZmZu7u7oGBgfr6+tLS0qqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==');
}
.x3dom-progress.bar span {
position: absolute;
left: 0;
top: 0;
line-height: 20px;
background-color: red;
}
.x3dom-statdiv {
margin: 0;
padding: 0;
right: 10px;
top: 10px;
position: absolute;
color: #0f0;
font-family: Helvetica, sans-serif;
line-height:10px;
font-size: 10px;
width: 75px;
height: 70px;
border: 0px;
}
#x3dom-state-canvas {
margin: 2px;
padding: 0;
right: 0%;
top: 0%;
position: absolute;
}
#x3dom-state-viewer {
position: absolute;
margin: 2px;
padding: 5px;
width: 135px;
top: 0%;
right: 0%;
opacity: 0.9;
background-color: #323232;
z-index: 1000;
font-family: Arial, sans-serif;
color: #C8C8C8;
font-weight: bold;
text-transform: uppercase;
cursor: help;
}
.x3dom-states-head {
display: block;
font-size: 26px;
}
.x3dom-states-head2 {
font-size: 10px;
}
.x3dom-states-list {
float: left;
width: 100%;
border-top: 1px solid #C8C8C8;
list-style: none;
font-size: 9px;
line-height: 16px;
margin:0;
padding: 0;
padding-top: 2px;
}
.x3dom-states-item {
width: 100%;
float: left;
}
.x3dom-states-item-title {
float: left;
margin-left: 2px;
}
.x3dom-states-item-value {
float: right;
margin-right: 2px;
}
.x3dom-touch-marker {
display: inline;
padding: 5px;
border-radius: 10px;
position: absolute;
font-family: Helvetica, sans-serif;
line-height:10px;
font-size: 10px;
color: darkorange;
background: cornsilk;
opacity: 0.6;
border: 2px solid orange;
z-index: 200;
}
.x3dom-logContainer {
border: 2px solid olivedrab;
height: 200px;
padding: 4px;
overflow: auto;
white-space: pre-wrap;
font-family: sans-serif;
font-size: x-small;
color: #00ff00;
background-color: black;
margin-right: 10px;
}
.x3dom-nox3d {
font-family: Helvetica, sans-serif;
font-size: 14px;
background-color: #eb7a7a;
padding: 1em;
opacity: 0.75;
}
.x3dom-nox3d p {
color: #fff;
font-size: 14px;
}
.x3dom-nox3d a {
color: #fff;
font-size: 14px;
}
/* self-clearing floats */
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
public/X3DOMTutorial/x3dom.js 0 → 100644
+ 3959
- 0
View file @ 7018135a
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal