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

Add X3DOM tutorials

parent 8faf9dd5
Expand all Hide whitespace changes
Inline Side-by-side
public/X3DOMTutorial/addnode.html 0 → 100644
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
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
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
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
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 -->