<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">
&lt;html&gt; 
&lt;head&gt; 
    &lt;title&gt;My first X3DOM page&lt;/title&gt; 			
    &lt;script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'&gt; &lt;/script&gt; 
    &lt;link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'&gt;&lt;/link&gt; 
&lt;/head&gt; 
&lt;body&gt; 
    &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
        &lt;Scene&gt;
        &lt;Shape&gt;
                &lt;Appearance&gt;
                    &lt;Material diffuseColor="0.5 0.5 0.5"&gt; &lt;/Material&gt;
                &lt;/Appearance&gt;
            &lt;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"&gt;
                &lt;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 " &gt; 
                &lt;/Coordinate&gt;
            &lt;/IndexedFaceSet&gt;
        &lt;/Shape&gt;
        &lt;/Scene&gt;
    &lt;/X3D&gt; 
&lt;/body&gt; 
&lt;/html&gt;  
</code>
</pre>    
			</td>
			<script type="text/javascript" src="x3dom.js"></script>
</body>

</html>