diff --git a/public/X3DOMTutorial/colorbrewer.html b/public/X3DOMTutorial/colorbrewer.html
index 709fdbc37a9969e1b319e91458b2da0eca48386d..ad116309961a05c5d216b8a4a6a787dbc8c45b8c 100644
--- a/public/X3DOMTutorial/colorbrewer.html
+++ b/public/X3DOMTutorial/colorbrewer.html
@@ -1,139 +1,152 @@
-<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>
- <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>
- </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>
- </td>
- </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
+<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>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+ <script>hljs.highlightAll();</script>
+</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 how 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>
+<code class="language-html">
+<html>
+ <head>
+ <title>colorbrewer</title>
+ <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
+ <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
+ </head>
+ <body>
+ <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>
+ </body>
+</html>
+</code>
+</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>
diff --git a/public/X3DOMTutorial/hellox3dom.html b/public/X3DOMTutorial/hellox3dom.html
index 7315716e53dc5b16e3c457de8b8d4ea0315dc7b1..6ac5bc0176f4f585de156c732e06e2acc6aa73c4 100644
--- a/public/X3DOMTutorial/hellox3dom.html
+++ b/public/X3DOMTutorial/hellox3dom.html
@@ -5,6 +5,9 @@
<title> Hello X3DOM </title>
<link rel="stylesheet" type="text/css" href="x3dom.css">
</link>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+ <script>hljs.highlightAll();</script>
</head>
<body>
@@ -23,6 +26,7 @@
</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 <X3D> tag in the
@@ -33,16 +37,30 @@
version.
A local copy of the library is useful for development, if you are not always connected.
<br>
- <pre class="prettyprint">
- <X3D id="shapedata" width="600px" height="600px" style="float:left">
- <Scene>
- <background transparency='0' skyColor='1 0 0'> </background>
- <Shape id=box>
- <Box> </Box>
- </Shape>
- </Scene>
- </X3D>
- </pre>
+<pre>
+<code class="language-html">
+ <html>
+ <head>
+ <title>My first X3DOM page</title>
+ <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
+ <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
+ </head>
+ <body>
+ <h1>Hello, X3DOM!</h1>
+ <p>
+ <X3D id="shapedata" width="600px" height="600px" style="float:left">
+ <Scene>
+ <background transparency='0' skyColor='0 0 1'> </background>
+ <Shape id=box>
+ <Box> </Box>
+ </Shape>
+ </Scene>
+ </X3D>
+ </p>
+ </body>
+ </html>
+</code>
+</pre>
The <X3D> 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>
@@ -56,31 +74,31 @@
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>
+ with arithmetic notation (0.0 to 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">
- <X3D id="shapedata" width="600px" height="600px" style="float:left">
- <Scene>
- <background transparency='0' skyColor='1 0 0'> </background>
- <Shape id=box>
- <appearance >
- <material diffuseColor='0 0 1'></material>
- </appearance>
- <Box> </Box>
- </Shape>
- </Scene>
- </X3D>
- </pre>
+ nodes that define that geometry's appearance. The following example draws a blue box.
+<pre>
+ <code class="language-html">
+ <X3D id="shapedata" width="600px" height="600px" style="float:left">
+ <Scene>
+ <background transparency='0' skyColor='1 0 0'> </background>
+ <Shape id=box>
+ <appearance >
+ <material diffuseColor='0 0 1'></material>
+ </appearance>
+ <Box> </Box>
+ </Shape>
+ </Scene>
+ </X3D>
+ </code>
+</pre>
<shape>
<box></box>
</shape>
</td>
- </tr>
- </table>
- <script type="text/javascript" src="x3dom.js"></script>
+ <script type="text/javascript" src="x3dom.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/X3DOMTutorial/transform.html b/public/X3DOMTutorial/transform.html
index da4f09551d16eb4678a87000b9948a988555974e..232ed0937db0e1efafdc61ebf2bc9d9cab0ef064 100644
--- a/public/X3DOMTutorial/transform.html
+++ b/public/X3DOMTutorial/transform.html
@@ -1,87 +1,100 @@
-<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>
- </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">
- <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>
- </pre>
- <br>
- This example illustrates how to move shapes to another location.
- </td>
- </tr>
- </table>
- <script type="text/javascript" src="x3dom.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+<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>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+ <script>hljs.highlightAll();</script>
+</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>
+<code class="language-html">
+<html>
+ <head>
+ <title> Transformation </title>
+ <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
+ <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
+ </head>
+ <body>
+ <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>
+ </body>
+</html>
+</code>
+</pre>
+ <br>
+ This example illustrates how to move shapes to another location.
+ </td>
+ <script type="text/javascript" src="x3dom.js"></script>
+</body>
+
+</html>