<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>