diff --git a/public/X3DOMTutorial/indexedfaceset2.html b/public/X3DOMTutorial/indexedfaceset2.html
index a1ba27246c1393b1fc5ea06e81146149ddb64128..04a7be2fa4754a4f954e50c28bc3b4200e9faa8a 100644
--- a/public/X3DOMTutorial/indexedfaceset2.html
+++ b/public/X3DOMTutorial/indexedfaceset2.html
@@ -1,250 +1,263 @@
-<html>
-
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> Indexed Face Set</title>
- <link rel="stylesheet" type="text/css" href="x3dom.css">
- </link>
-</head>
-
-<body>
- <h1> Indexed Face Set </h1>
- <table width="100%" height="85%" border="0">
- <tr>
- <td width="50%" align="center" valign="top" scope="col">
- <X3D id="shapedata" width="600px" height="600px" style="float:left">
- <Scene>
- <Shape>
- <Appearance>
- <Material diffuseColor="0.5 0.5 0.5"> </Material>
- </Appearance>
- <IndexedFaceSet solid="false" ccw="true" coordIndex=" 0 4 5 1 -1 1 2 6 5 -1 2 3 7 6 -1
- 3 0 4 7 -1 0 1 2 3 -1 7 4 8 -1
- 4 5 8 -1 5 6 8 -1 6 7 8 -1
- 9 13 14 10 -1 10 11 15 14 -1 11 12 16 15 -1
- 12 9 13 16 -1 9 10 11 12 -1 16 13 17 -1
- 13 14 17 -1 14 15 17 -1 15 16 17 -1">
- <Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
- -1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0,
- 2 0 1, 4 0 1, 4 0 -1, 2 0 -1,
- 2 2 1, 4 2 1, 4 2 -1, 2 2 -1, 3 3 0 ">
- </Coordinate>
- </IndexedFaceSet>
- </Shape>
- <!-- add points (as spheres) and labels -->
- <!-- P0 -->
- <Transform translation='-1 0 1'>
- <Shape DEF='Point'>
- <Appearance DEF='Green'>
- <Material diffuseColor='0 1 0'> </Material>
- </Appearance>
- <Sphere radius="0.1"> </Sphere>
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance DEF='LABEL_APPEARANCE'>
- <Material diffuseColor='0 0 0'> </Material>
- </Appearance>
- <Text string='"P0"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P1 -->
- <Transform translation='1 0 1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P1"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P2 -->
- <Transform translation='1 0 -1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P2"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P3 -->
- <Transform translation='-1 0 -1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P3"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P4 -->
- <Transform translation='-1 2 1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P4"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P5 -->
- <Transform translation='1 2 1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P5"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P6 -->
- <Transform translation='1 2 -1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P6"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P7 -->
- <Transform translation='-1 2 -1'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 -0.75 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P7"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- <!-- P8 -->
- <Transform translation='0 3 0'>
- <Shape USE="Point">
- </Shape>
- <Transform translation='0 0.0 0'>
- <Billboard>
- <Shape>
- <Appearance USE='LABEL_APPEARANCE'>
- </Appearance>
- <Text string='"P8"'>
- <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
- </Text>
- </Shape>
- </Billboard>
- </Transform>
- </Transform>
- </Scene>
- </X3D>
- </td>
- <td width="50%" align="left" valign="top" scope="col">
- An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
- The building geometry is given by a set of points P={P0, P1, ..., Pn}
- and a set of polygons F={F0, F1, ..., Fm}. Each point Pi is given by its coordinates Pi=(xi,yi,zi).
- Each polygon Fi is defined by a list of m coplanar points (m >=3) given in counterclockwise order:
- Fi=(Pi0, Pi1, ... Pim)
- <pre>
- Example:
- P = {P0, P1, P2, P3, P4, P5, P6, P7, P8}
- with
- P0 = (-1.0, 0.0, 1.0)
- P1 = ( 1.0, 0.0, 1.0)
- P2 = ( 1.0, 0.0, -1.0)
- P3 = (-1.0, 0.0, -1.0)
- P4 = (-1.0, 2.0, 1.0)
- P5 = ( 1.0, 2.0, 1.0)
- P6 = ( 1.0, 2.0, -1.0)
- P7 = (-1.0, 2.0, -1.0)
- P8 = ( 0.0, 3.0, 0.0)
- F = {F0, F1, F2, F3, F4, F5, F6, F7, F8}
- wall:
- F0 = (P0, P1, P5, P4)
- F1 = (P1, P2, P6, P5)
- F2 = (P2, P3, P7, P6)
- F3 = (P3, P0, P4, P7)
- ground:
- F4 = (P0, P3, P2, P1)
- roof:
- F5 = (P7, P4, P8)
- F6 = (P4, P5, P8)
- F7 = (P5, P6, P8)
- F8 = (P6, P7, P8)
- </pre>
- <br>
- In the IndexedFaceSet the point set P is defined in the Coordinate node.
- The set of polygons F is defined in the attribute coordIndex. Each polygon is given by a list of point indices
- followed by -1 to indicate the end of a polygon and the beginning of a new one.
- <br>
- <pre class="prettyprint">
- <X3D id="shapedata" width="600px" height="600px" style="float:left">
- <Scene>
- <Shape>
- <Appearance>
- <Material diffuseColor="0.5 0.5 0.5"> </Material>
- </Appearance>
- <IndexedFaceSet solid="true" ccw ="true"
- coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
- 3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
- 4 5 8 -1 5 6 8 -1 6 7 8 -1">
- <Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
- -1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 " >
- </Coordinate>
- </IndexedFaceSet>
- </Shape>
- </Scene>
- </X3D>
- </pre>
- </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> Indexed Face Set</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> Indexed Face Set </h1>
+ <table width="100%" height="85%" border="0">
+ <tr>
+ <td width="50%" align="center" valign="top" scope="col">
+ <X3D id="shapedata" width="600px" height="600px" style="float:left">
+ <Scene>
+ <Shape>
+ <Appearance>
+ <Material diffuseColor="0.5 0.5 0.5"> </Material>
+ </Appearance>
+ <IndexedFaceSet solid="false" ccw="true" coordIndex=" 0 4 5 1 -1 1 2 6 5 -1 2 3 7 6 -1
+ 3 0 4 7 -1 0 1 2 3 -1 7 4 8 -1
+ 4 5 8 -1 5 6 8 -1 6 7 8 -1
+ 9 13 14 10 -1 10 11 15 14 -1 11 12 16 15 -1
+ 12 9 13 16 -1 9 10 11 12 -1 16 13 17 -1
+ 13 14 17 -1 14 15 17 -1 15 16 17 -1">
+ <Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
+ -1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0,
+ 2 0 1, 4 0 1, 4 0 -1, 2 0 -1,
+ 2 2 1, 4 2 1, 4 2 -1, 2 2 -1, 3 3 0 ">
+ </Coordinate>
+ </IndexedFaceSet>
+ </Shape>
+ <!-- add points (as spheres) and labels -->
+ <!-- P0 -->
+ <Transform translation='-1 0 1'>
+ <Shape DEF='Point'>
+ <Appearance DEF='Green'>
+ <Material diffuseColor='0 1 0'> </Material>
+ </Appearance>
+ <Sphere radius="0.1"> </Sphere>
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance DEF='LABEL_APPEARANCE'>
+ <Material diffuseColor='0 0 0'> </Material>
+ </Appearance>
+ <Text string='"P0"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P1 -->
+ <Transform translation='1 0 1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P1"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P2 -->
+ <Transform translation='1 0 -1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P2"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P3 -->
+ <Transform translation='-1 0 -1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P3"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P4 -->
+ <Transform translation='-1 2 1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P4"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P5 -->
+ <Transform translation='1 2 1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P5"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P6 -->
+ <Transform translation='1 2 -1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P6"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P7 -->
+ <Transform translation='-1 2 -1'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 -0.75 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P7"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ <!-- P8 -->
+ <Transform translation='0 3 0'>
+ <Shape USE="Point">
+ </Shape>
+ <Transform translation='0 0.0 0'>
+ <Billboard>
+ <Shape>
+ <Appearance USE='LABEL_APPEARANCE'>
+ </Appearance>
+ <Text string='"P8"'>
+ <FontStyle DEF='LABEL_FONT' family='"SANS"' justify='"MIDDLE" "MIDDLE"' size='.2'> </FontStyle>
+ </Text>
+ </Shape>
+ </Billboard>
+ </Transform>
+ </Transform>
+ </Scene>
+ </X3D>
+ </p>
+ </td>
+ <td width="50%" align="left" valign="top" scope="col">
+ An IndexedFaceSet is used to define a polygonal shape. For example, it can be used to model a building.
+ The building geometry is given by a set of points P={P0, P1, ..., Pn}
+ and a set of polygons F={F0, F1, ..., Fm}. Each point Pi is given by its coordinates Pi=(xi,yi,zi).
+ Each polygon Fi is defined by a list of m coplanar points (m >=3) given in counterclockwise order:
+ Fi=(Pi0, Pi1, ... Pim)
+ <pre>
+ Example:
+ P = {P0, P1, P2, P3, P4, P5, P6, P7, P8}
+ with
+ P0 = (-1.0, 0.0, 1.0)
+ P1 = ( 1.0, 0.0, 1.0)
+ P2 = ( 1.0, 0.0, -1.0)
+ P3 = (-1.0, 0.0, -1.0)
+ P4 = (-1.0, 2.0, 1.0)
+ P5 = ( 1.0, 2.0, 1.0)
+ P6 = ( 1.0, 2.0, -1.0)
+ P7 = (-1.0, 2.0, -1.0)
+ P8 = ( 0.0, 3.0, 0.0)
+ F = {F0, F1, F2, F3, F4, F5, F6, F7, F8}
+ wall:
+ F0 = (P0, P1, P5, P4)
+ F1 = (P1, P2, P6, P5)
+ F2 = (P2, P3, P7, P6)
+ F3 = (P3, P0, P4, P7)
+ ground:
+ F4 = (P0, P3, P2, P1)
+ roof:
+ F5 = (P7, P4, P8)
+ F6 = (P4, P5, P8)
+ F7 = (P5, P6, P8)
+ F8 = (P6, P7, P8)
+ </pre>
+ <br>
+ In the IndexedFaceSet the point set P is defined in the Coordinate node.
+ The set of polygons F is defined in the attribute coordIndex. Each polygon is given by a list of point indices
+ followed by -1 to indicate the end of a polygon and the beginning of a new one.
+ <br>
+ <pre>
+ <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>
+ <X3D id="shapedata" width="600px" height="600px" style="float:left">
+ <Scene>
+ <Shape>
+ <Appearance>
+ <Material diffuseColor="0.5 0.5 0.5"> </Material>
+ </Appearance>
+ <IndexedFaceSet solid="true" ccw ="true"
+ coordIndex=" 0 1 5 4 -1 1 2 6 5 -1 2 3 7 6 -1
+ 3 0 4 7 -1 0 3 2 1 -1 7 4 8 -1
+ 4 5 8 -1 5 6 8 -1 6 7 8 -1">
+ <Coordinate point="-1 0 1, 1 0 1, 1 0 -1, -1 0 -1,
+ -1 2 1, 1 2 1, 1 2 -1, -1 2 -1, 0 3 0 " >
+ </Coordinate>
+ </IndexedFaceSet>
+ </Shape>
+ </Scene>
+ </X3D>
+</body>
+</html>
+</code>
+</pre>
+ </td>
+ <script type="text/javascript" src="x3dom.js"></script>
+</body>
+
+</html>