Skip to content
GitLab
Commit 29cfa78b authored by Athanasios's avatar Athanasios
Browse files

Add missing tutorials

parent ce283081
Hide whitespace changes
Inline Side-by-side
public/X3DOMTutorial/barchart.html
View file @ 29cfa78b
......@@ -112,7 +112,6 @@
</Transform>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
Bar chart example <br> <br>
......@@ -125,37 +124,39 @@
<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>
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>
</tr>
</table>
<script type="text/javascript" src="x3dom.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>
</html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer.html
View file @ 29cfa78b
......@@ -3,7 +3,8 @@
<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>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body class="ui-widget-content" style="border:0;">
......@@ -26,8 +27,8 @@
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>
<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>
......@@ -100,38 +101,39 @@
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>
</tr>
</table>
<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
View file @ 29cfa78b
......@@ -102,32 +102,33 @@
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>
</tr>
</table>
<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>
</html>
\ No newline at end of file
public/X3DOMTutorial/coordinatesystem.html
View file @ 29cfa78b
......@@ -107,13 +107,14 @@
</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="https://flylib.com/books/2/416/1/html/2/images/fig3-3.jpg" width="350" height="310" />
<img src="img/right_hand_system.png" width="178" />
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/externalfile.html 0 → 100644
View file @ 29cfa78b
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> External File </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> External File </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">
<Scene>
<background transparency='0' skyColor='1 1 1'></background>
<inline id="inline" url="x3d/HFT_Bau1_0.x3d"></inline>
</Scene>
</X3D>
</td>
<td width="50%" align="left" valign="top" scope="col">
<p>
Any X3D scene can be integrated into the Scene by using the &lt;inline&gt; node. The X3D model has be be
stored on a web server. The X3D file should be optimized using aopt. It is not necessary, but usually improves
performance a lot.
</p>
<pre>
&lt;X3D id="shapedata"&gt;
&lt;Scene&gt;
&lt;background transparency='0' skyColor='1 1 1'&gt;&lt;/background&gt;
&lt;inline url="HFT_Bau1_0.x3d"&gt;&lt;/inline&gt;
&lt;/Scene&gt;
&lt;/X3D&gt
</pre>
<select id="combo" style="margin-bottom:20px" onchange="comboCallback();">
<option value="x3d/HFT_Bau1_0.x3d">HFT Building 1 Floor 0</option>
<option value="x3d/HFT_Bau1_1.x3d">HFT Building 1 Floor 1</option>
<option value="x3d/HFT_Bau1_2.x3d">HFT Building 1 Floor 2</option>
<option value="x3d/HFT_Bau1_3.x3d">HFT Building 1 Floor 3</option>
<option value="x3d/HFT_Bau2_0.x3d">HFT Building 2 Floor 0</option>
<option value="x3d/HFT_Bau2_3.x3d">HFT Building 2 Floor 3</option>
<option value="x3d/HFT_Bau2_4.x3d">HFT Building 2 Floor 4</option>
</select>
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
<script>
function comboCallback() {
var index = document.getElementById("combo").selectedIndex;
var value = document.getElementsByTagName("option")[index].value;
document.getElementById("inline").url = value;
}
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/hellox3dom.html
View file @ 29cfa78b
......@@ -16,14 +16,13 @@
<Scene>
<background transparency='0' skyColor='0.68, 0.95, 0.47'> </background>
<Shape>
<appearance >
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<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
......@@ -79,7 +78,9 @@
<box></box>
</shape>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandmaterial.html
View file @ 29cfa78b
......@@ -47,7 +47,6 @@
</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
......@@ -97,7 +96,9 @@
&lt;/X3D&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtexturecoord.html
View file @ 29cfa78b
......@@ -67,7 +67,6 @@
</Shape>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
Example: <a href="https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using Images
......@@ -88,7 +87,9 @@
&lt;/Appearance&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtextures.html
View file @ 29cfa78b
......@@ -60,7 +60,6 @@
</Shape>
</Scene>
</X3D>
</p>
</td>
<td width="50%" align="left" valign="top" scope="col">
Example: <a href="https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using
......@@ -81,7 +80,9 @@
&lt;/Appearance&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public/X3DOMTutorial/index.html
View file @ 29cfa78b
......@@ -51,6 +51,9 @@
<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="treesdeciduous.html">trees deciduous</a></li>
<li><a class="button" href="treesconifer.html">trees conifer</a></li>
<li><a class="button" href="externalfile.html">external file</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>
......
public/X3DOMTutorial/indexedfaceset.html
View file @ 29cfa78b
......@@ -178,7 +178,6 @@
</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.
......@@ -238,7 +237,9 @@
&lt;/X3D&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset2.html
View file @ 29cfa78b
......@@ -183,7 +183,6 @@
</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.
......@@ -243,7 +242,9 @@
&lt;/X3D&gt;
</pre>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/terrain.html
View file @ 29cfa78b
......@@ -30,7 +30,6 @@
</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
......@@ -86,7 +85,9 @@
<box></box>
</shape>
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/toytown.html
View file @ 29cfa78b
......@@ -93,12 +93,13 @@
</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>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/transform.html
View file @ 29cfa78b
......@@ -39,7 +39,6 @@
</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
......@@ -80,7 +79,9 @@
<br>
This example illustrates how to move shapes to another location.
</td>
<script type="text/javascript" src="x3dom.js"></script>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/treesconifer.html 0 → 100644
View file @ 29cfa78b
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Trees Conifer </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
</head>
<body>
<h1> Trees Conifer </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">
<Scene>
<background transparency='0' skyColor='1 1 1'> </background>
<transform id="root" translation="0 0 0">
<Transform id="trunk" translation='0 1.5 0'>
<Shape>
<Appearance>
<Material diffuseColor='0.5 0.5 0.5'></Material>
</Appearance>
<Cylinder id="geometryTrunk" radius="0.2" height="3"></Cylinder>
</Shape>
</Transform>
<Transform id="crown" translation='0 3 0'>
<Transform id="crown-s" scale='1 3.5 1'>
<Shape>
<Appearance>
<Material diffuseColor='0 1 0'></Material>
</Appearance>
<Cone id="geometryCrown" height="1.0" radius="2.0" subdivision="8"></Cone>
</Shape>
</Transform>
</Transform>
</transform>
</Scene>
</X3D>
</td>
<td width="50%" align="left" valign="top" scope="col">
<img src="img/Abb-Nadelbaum.png" alt="Abb-Nadelbaum" width="259" height="399"
class="alignnone size-full wp-image-260" /><br>
Baum Parameter: <br>
Gesamth&ouml;he h= <input type="text" id="h" name="h" size="5" value="10" /> m<br>
H&ouml;he Stamm ht= <input type="text" id="ht" name="ht" size="5" value="3" /> m<br>
Kronendurchmesser dc=<input type="text" id="dc" name="Kronendurchmesser" size="5" value="4" /> m<br>
Stammdurchmesser dt=<input type="text" id="dt" name="Stammdurchmesser" size="5" value="0.4" /> m<br>
Position:
<input type="text" id="pos_x" name="pos_x" size="5" value="0" />
<input type="text" id="pos_y" name="pos_y" size="5" value="0" />
<input type="text" id="pos_z" name="pos_z" size="5" value="0" /><br>
<input type="button" value="DrawTree" onclick="drawTree()" /><br><b>
Approximation Stamm</b><br>
subdivision: 4 <input type="range" id="subdivTrunk" min="4" max="64" step="1" value="32"
onchange="changeSubDivisionTrunk()" />64<br>
<b>Approximation Krone</b><br>
subdivision: 4 <input type="range" id="subdivCrown" min="4" max="64" step="1" value="8"
onchange="changeSubDivisionCrown()" />64
</td>
</tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
<script type="text/javascript">
function drawTree() {
// read input parameter
var h = document.getElementById("h").value;
var ht = document.getElementById("ht").value;
var dc = document.getElementById("dc").value;
var dt = document.getElementById("dt").value;
var x = document.getElementById("pos_x").value;
var y = document.getElementById("pos_y").value;
var z = document.getElementById("pos_z").value;
// get X3D nodes