Skip to content

GitLab

Commit 29cfa78b authored by Athanasios's avatar Athanasios
Browse files

Add missing tutorials

parent ce283081
Pipeline #3793 passed with stages
in 21 seconds
Hide whitespace changes
Inline Side-by-side
public/X3DOMTutorial/barchart.html
View file @ 29cfa78b
...@@ -112,7 +112,6 @@ ...@@ -112,7 +112,6 @@
</Transform> </Transform>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <td width="50%" align="left" valign="top" scope="col">
Bar chart example <br> <br> Bar chart example <br> <br>
...@@ -125,37 +124,39 @@ ...@@ -125,37 +124,39 @@
<input type="text" id="yoc-b4" value="1985" size="12" /><br> <input type="text" id="yoc-b4" value="1985" size="12" /><br>
<input type="button" value="draw" onclick="drawBarChart()" /> <br> <input type="button" value="draw" onclick="drawBarChart()" /> <br>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
<script> </table>
function drawBarChart() { <script type="text/javascript" src="x3dom.js"></script>
var labelx = document.getElementById("label-x").value; <script>
var chartlabelx = document.getElementById("chartlabel-x"); function drawBarChart() {
chartlabelx.setAttribute("string", labelx); var labelx = document.getElementById("label-x").value;
var labely = document.getElementById("label-y").value; var chartlabelx = document.getElementById("chartlabel-x");
var chartlabely = document.getElementById("chartlabel-y"); chartlabelx.setAttribute("string", labelx);
chartlabely.setAttribute("string", labely); var labely = document.getElementById("label-y").value;
var yocb1 = document.getElementById("yoc-b1").value; var chartlabely = document.getElementById("chartlabel-y");
var yocb2 = document.getElementById("yoc-b2").value; chartlabely.setAttribute("string", labely);
var yocb3 = document.getElementById("yoc-b3").value; var yocb1 = document.getElementById("yoc-b1").value;
var yocb4 = document.getElementById("yoc-b4").value; var yocb2 = document.getElementById("yoc-b2").value;
yocb1 = (yocb1 - 1950) / 10; var yocb3 = document.getElementById("yoc-b3").value;
var bar1 = document.getElementById("bar1"); var yocb4 = document.getElementById("yoc-b4").value;
bar1.setAttribute("translation", "0.25 " + yocb1 / 2.0 + " 0"); yocb1 = (yocb1 - 1950) / 10;
bar1.setAttribute("scale", "1 " + yocb1 + " 1"); var bar1 = document.getElementById("bar1");
yocb2 = (yocb2 - 1950) / 10; bar1.setAttribute("translation", "0.25 " + yocb1 / 2.0 + " 0");
var bar2 = document.getElementById("bar2"); bar1.setAttribute("scale", "1 " + yocb1 + " 1");
bar2.setAttribute("translation", "0.75 " + yocb2 / 2.0 + " 0"); yocb2 = (yocb2 - 1950) / 10;
bar2.setAttribute("scale", "1 " + yocb2 + " 1"); var bar2 = document.getElementById("bar2");
yocb3 = (yocb3 - 1950) / 10; bar2.setAttribute("translation", "0.75 " + yocb2 / 2.0 + " 0");
var bar3 = document.getElementById("bar3"); bar2.setAttribute("scale", "1 " + yocb2 + " 1");
bar3.setAttribute("translation", "1.25 " + yocb3 / 2.0 + " 0"); yocb3 = (yocb3 - 1950) / 10;
bar3.setAttribute("scale", "1 " + yocb3 + " 1"); var bar3 = document.getElementById("bar3");
yocb4 = (yocb4 - 1950) / 10; bar3.setAttribute("translation", "1.25 " + yocb3 / 2.0 + " 0");
var bar4 = document.getElementById("bar4"); bar3.setAttribute("scale", "1 " + yocb3 + " 1");
bar4.setAttribute("translation", "1.75 " + yocb4 / 2.0 + " 0"); yocb4 = (yocb4 - 1950) / 10;
bar4.setAttribute("scale", "1 " + yocb4 + " 1"); var bar4 = document.getElementById("bar4");
} bar4.setAttribute("translation", "1.75 " + yocb4 / 2.0 + " 0");
</script> bar4.setAttribute("scale", "1 " + yocb4 + " 1");
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer.html
View file @ 29cfa78b
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Material brewer</title> <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> </head>
<body class="ui-widget-content" style="border:0;"> <body class="ui-widget-content" style="border:0;">
...@@ -26,8 +27,8 @@ ...@@ -26,8 +27,8 @@
See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material" See <a href="http://www.web3d.org/files/specifications/19775-1/V3.3/Part01/components/shape.html#Material"
target="_blank"> target="_blank">
X3D Material node definition </a> for an explanation of the different color attributes. X3D Material node definition </a> for an explanation of the different color attributes.
<br> <br>
<br><b>ambientIntensity</b><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" ambientIntensity: 0 <input type="range" id="ambientIntensity" min="0.0" max="1.0" step="0.05" value="0.2"
onchange="changeColor()" />1<br> onchange="changeColor()" />1<br>
<br> <br>
...@@ -100,38 +101,39 @@ ...@@ -100,38 +101,39 @@
rgbstring = " "+ red + " " + green + " " + blue; rgbstring = " "+ red + " " + green + " " + blue;
mat.setAttribute("diffuseColor", rgbstring); mat.setAttribute("diffuseColor", rgbstring);
</pre> </pre>
</p>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
<script> </table>
/** <script type="text/javascript" src="x3dom.js"></script>
* Change the settings of the directional light <script>
* /**
* @param field string: Name of the field * Change the settings of the directional light
* @param value number: New value to set *
*/ * @param field string: Name of the field
function changeColor() { * @param value number: New value to set
var material = document.getElementById("material"); */
var emissive_rgb = " " + document.getElementById("emissive_r").value; function changeColor() {
emissive_rgb += " " + document.getElementById("emissive_g").value; var material = document.getElementById("material");
emissive_rgb += " " + document.getElementById("emissive_b").value; var emissive_rgb = " " + document.getElementById("emissive_r").value;
material.setAttribute("emissiveColor", emissive_rgb); emissive_rgb += " " + document.getElementById("emissive_g").value;
var diffuse_rgb = " " + document.getElementById("diffuse_r").value; emissive_rgb += " " + document.getElementById("emissive_b").value;
diffuse_rgb += " " + document.getElementById("diffuse_g").value; material.setAttribute("emissiveColor", emissive_rgb);
diffuse_rgb += " " + document.getElementById("diffuse_b").value; var diffuse_rgb = " " + document.getElementById("diffuse_r").value;
material.setAttribute("diffuseColor", diffuse_rgb); diffuse_rgb += " " + document.getElementById("diffuse_g").value;
var specular_rgb = " " + document.getElementById("specular_r").value; diffuse_rgb += " " + document.getElementById("diffuse_b").value;
specular_rgb += " " + document.getElementById("specular_g").value; material.setAttribute("diffuseColor", diffuse_rgb);
specular_rgb += " " + document.getElementById("specular_b").value; var specular_rgb = " " + document.getElementById("specular_r").value;
material.setAttribute("specularColor", specular_rgb); specular_rgb += " " + document.getElementById("specular_g").value;
var ambientIntensity = " " + document.getElementById("ambientIntensity").value; specular_rgb += " " + document.getElementById("specular_b").value;
material.setAttribute("ambientIntensity", ambientIntensity); material.setAttribute("specularColor", specular_rgb);
var shininess = " " + document.getElementById("shininess").value; var ambientIntensity = " " + document.getElementById("ambientIntensity").value;
material.setAttribute("shininess", shininess); material.setAttribute("ambientIntensity", ambientIntensity);
var transparency = " " + document.getElementById("transparency").value; var shininess = " " + document.getElementById("shininess").value;
material.setAttribute("transparency", transparency); material.setAttribute("shininess", shininess);
} var transparency = " " + document.getElementById("transparency").value;
</script> material.setAttribute("transparency", transparency);
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/colorbrewer2.html
View file @ 29cfa78b
...@@ -102,32 +102,33 @@ ...@@ -102,32 +102,33 @@
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255; rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
mat.setAttribute("diffuseColor", rgbstring); mat.setAttribute("diffuseColor", rgbstring);
</pre> </pre>
</p>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
<script> </table>
function refreshDiffuseMaterial() { <script type="text/javascript" src="x3dom.js"></script>
var red = $("#red").slider("value"), <script>
green = $("#green").slider("value"), function refreshDiffuseMaterial() {
blue = $("#blue").slider("value"); var red = $("#red").slider("value"),
var mat = document.getElementById("material"); green = $("#green").slider("value"),
rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255; blue = $("#blue").slider("value");
mat.setAttribute("diffuseColor", rgbstring); var mat = document.getElementById("material");
} rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255;
$(function () { mat.setAttribute("diffuseColor", rgbstring);
$("#red, #green, #blue").slider({ }
orientation: "horizontal", $(function () {
range: "min", $("#red, #green, #blue").slider({
max: 255, orientation: "horizontal",
value: 127, range: "min",
slide: refreshDiffuseMaterial, max: 255,
change: refreshDiffuseMaterial value: 127,
}); slide: refreshDiffuseMaterial,
$("#red").slider("value", 255); change: refreshDiffuseMaterial
$("#green").slider("value", 140); });
$("#blue").slider("value", 60); $("#red").slider("value", 255);
}); $("#green").slider("value", 140);
</script> $("#blue").slider("value", 60);
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/coordinatesystem.html
View file @ 29cfa78b
...@@ -107,13 +107,14 @@ ...@@ -107,13 +107,14 @@
</Group> </Group>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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> 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> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </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 @@ ...@@ -16,14 +16,13 @@
<Scene> <Scene>
<background transparency='0' skyColor='0.68, 0.95, 0.47'> </background> <background transparency='0' skyColor='0.68, 0.95, 0.47'> </background>
<Shape> <Shape>
<appearance > <appearance>
<material diffuseColor='1 0 0'></material> <material diffuseColor='1 0 0'></material>
</appearance> </appearance>
<Box> </Box> <Box> </Box>
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 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 @@ ...@@ -79,7 +78,9 @@
<box></box> <box></box>
</shape> </shape>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/ifsandmaterial.html
View file @ 29cfa78b
...@@ -47,7 +47,6 @@ ...@@ -47,7 +47,6 @@
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 One shape has only ony appearance. If different colors for the building elements roof, wall and ground surfaces
...@@ -97,7 +96,9 @@ ...@@ -97,7 +96,9 @@
&lt;/X3D&gt; &lt;/X3D&gt;
</pre> </pre>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtexturecoord.html
View file @ 29cfa78b
...@@ -67,7 +67,6 @@ ...@@ -67,7 +67,6 @@
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 Example: <a href="https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using Images
...@@ -88,7 +87,9 @@ ...@@ -88,7 +87,9 @@
&lt;/Appearance&gt; &lt;/Appearance&gt;
</pre> </pre>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/ifsandtextures.html
View file @ 29cfa78b
...@@ -60,7 +60,6 @@ ...@@ -60,7 +60,6 @@
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <td width="50%" align="left" valign="top" scope="col">
Example: <a href="https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using Example: <a href="https://doc.x3dom.org/tutorials/basics/imagesMovies/index.html" target="_blank"> Using
...@@ -81,7 +80,9 @@ ...@@ -81,7 +80,9 @@
&lt;/Appearance&gt; &lt;/Appearance&gt;
</pre> </pre>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/index.html
View file @ 29cfa78b
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li><a class="button" href="ifsandmaterial.html">indexedfaceset and material</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="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="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="terrain.html">terrain</a></li>
<li><a class="button" href="barchart.html">barchart</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="toytown.html">toy town</a></li>
......
public/X3DOMTutorial/indexedfaceset.html
View file @ 29cfa78b
...@@ -178,7 +178,6 @@ ...@@ -178,7 +178,6 @@
</Transform> </Transform>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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. An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
...@@ -238,7 +237,9 @@ ...@@ -238,7 +237,9 @@
&lt;/X3D&gt; &lt;/X3D&gt;
</pre> </pre>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/indexedfaceset2.html
View file @ 29cfa78b
...@@ -183,7 +183,6 @@ ...@@ -183,7 +183,6 @@
</Transform> </Transform>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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. An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
...@@ -243,7 +242,9 @@ ...@@ -243,7 +242,9 @@
&lt;/X3D&gt; &lt;/X3D&gt;
</pre> </pre>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/terrain.html
View file @ 29cfa78b
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 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 @@ ...@@ -86,7 +85,9 @@
<box></box> <box></box>
</shape> </shape>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/toytown.html
View file @ 29cfa78b
...@@ -93,12 +93,13 @@ ...@@ -93,12 +93,13 @@
</Transform> </Transform>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <td width="50%" align="left" valign="top" scope="col">
DEF / USE DEF / USE
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/X3DOMTutorial/transform.html
View file @ 29cfa78b
...@@ -39,7 +39,6 @@ ...@@ -39,7 +39,6 @@
</Transform> </Transform>
</Scene> </Scene>
</X3D> </X3D>
</p>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 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 @@ ...@@ -80,7 +79,9 @@
<br> <br>
This example illustrates how to move shapes to another location. This example illustrates how to move shapes to another location.
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> </tr>
</table>
<script type="text/javascript" src="x3dom.js"></script>
</body> </body>
</html> </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
var transformTree = document.getElementById('root');
var transformTrunk = document.getElementById('trunk');
var geometryTrunk = document.getElementById('geometryTrunk');
var transformCrown = document.getElementById('crown');
var scaleCrown = document.getElementById('crown-s');
var geometryCrown = document.getElementById('geometryCrown');
// map input parameter to X3D model
// trunk
transformTrunk.setAttribute("translation", "0 " + ht / 2 + " 0");
geometryTrunk.setAttribute("radius", " " + dt / 2);
geometryTrunk.setAttribute("height", ht);
// crown
transformCrown.setAttribute("translation", "0 " + ht + " 0");
scaleCrown.setAttribute("scale", "1 " + (h - ht) / 2 + " 1");
geometryCrown.setAttribute("radius", dc / 2);
// position
transformTree.setAttribute("translation", x + " " + y + " " + z);
}
function changeSubDivisionTrunk() {
var trunk = document.getElementById("geometryTrunk");
var subdiv = document.getElementById("subdivTrunk").value;
trunk.setAttribute("subdivision", subdiv);
}
function changeSubDivisionCrown() {
var crown = document.getElementById("geometryCrown");
var subdiv = document.getElementById("subdivCrown").value;
crown.setAttribute("subdivision", subdiv);
}
</script>
</body>
</html>
\ No newline at end of file
public/X3DOMTutorial/treesdeciduous.html
View file @ 29cfa78b
...@@ -12,65 +12,105 @@ ...@@ -12,65 +12,105 @@
<table width="100%" height="85%" border="0"> <table width="100%" height="85%" border="0">
<tr> <tr>
<td width="50%" align="center" valign="top" scope="col"> <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 6.5 0'>
<Transform id="crown-s" scale='1 1.75 1'>
<Shape>
<Appearance>
<Material diffuseColor='0 1 0'></Material>
</Appearance>
<Sphere id="geometryCrown" radius="2.0" subdivision="8,8"></Sphere>
</Shape>
</Transform>
</Transform>
</transform>
</Scene>
</X3D>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <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 <img src="img/Abb-Laubbaum.png" alt="Abb-Laubbaum" width="259" height="398"
HTML document. class="alignnone size-full wp-image-252" /><br>
The &lt;X3D&gt; tag is interpreted by the x3dom.js Java Script library. You can either make a local copy of the Baum Parameter:<br>
library or use it Gesamth&ouml;he h= <input type="text" id="h" name="h" size="5" value="10" /> m<br>
from the server. It is recommended to use the library from the server to ensure that you always have the latest H&ouml;he Stamm ht= <input type="text" id="ht" name="ht" size="5" value="3" /> m<br>
version. Kronendurchmesser dc= <input type="text" id="dc" name="Kronendurchmesser" size="5" value="4" /> m<br>
A local copy of the library is useful for development, if you are not always connected. Stammdurchmesser dt=<input type="text" id="dt" name="Stammdurchmesser" size="5" value="0.4" /> m<br>
<br> Position:
<pre class="prettyprint"> <input type="text" id="pos_x" name="pos_x" size="5" value="0" />
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; <input type="text" id="pos_y" name="pos_y" size="5" value="0" />
&lt;Scene&gt; <input type="text" id="pos_z" name="pos_z" size="5" value="0" /><br>
&lt;background transparency='0' skyColor='1 0 0'&gt; &lt;/background&gt; <input type="button" value="DrawTree" onclick="drawTree()" /><br>
&lt;Shape id=box&gt; <b>Approximation Stamm</b><br>
&lt;Box&gt; &lt;/Box&gt; subdivision: 4 <input type="range" id="subdivTrunk" min="4" max="64" step="1" value="32"
&lt;/Shape&gt; onchange="changeSubDivisionTrunk()" />64<br>
&lt;/Scene&gt; <b>Approximation Krone</b><br>
&lt;/X3D&gt; subdivision: 4 <input type="range" id="subdivCrown" min="4" max="64" step="1" value="8"
</pre> onchange="changeSubDivisionCrown()" />64
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> </td>
</tr> </tr>
</table> </table>
<script type="text/javascript" src="x3dom.js"></script> <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
var transformTree = document.getElementById('root');
var transformTrunk = document.getElementById('trunk');
var geometryTrunk = document.getElementById('geometryTrunk');
var transformCrown = document.getElementById('crown');
var scaleCrown = document.getElementById('crown-s');
var geometryCrown = document.getElementById('geometryCrown');
// map input parameter to X3D model
// trunk
transformTrunk.setAttribute("translation", "0 " + ht / 2 + " 0");
geometryTrunk.setAttribute("radius", " " + dt / 2);
geometryTrunk.setAttribute("height", ht);
// crown
transformCrown.setAttribute("translation", "0 " + (h / 2 + ht / 2) + " 0");
scaleCrown.setAttribute("scale", "1 " + (h - ht) / dc + " 1");
geometryCrown.setAttribute("radius", dc / 2);
// position
transformTree.setAttribute("translation", x + " " + y + " " + z);
}
function changeSubDivisionTrunk() {
var trunk = document.getElementById("geometryTrunk");
var subdiv = document.getElementById("subdivTrunk").value;
trunk.setAttribute("subdivision", subdiv);
}
function changeSubDivisionTrunk() {
var trunk = document.getElementById("geometryTrunk");
var subdiv = document.getElementById("subdivTrunk").value;
trunk.setAttribute("subdivision", subdiv);
}
function changeSubDivisionCrown() {
var crown = document.getElementById("geometryCrown");
var subdiv = document.getElementById("subdivCrown").value;
crown.setAttribute("subdivision", subdiv + "," + subdiv);
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
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