indexed face set and material

One shape has only ony appearance. If different colors for the building elements roof, wall and ground surfaces shall be used, we need to have different shape for these elements. However, they can share the same point set. The following example uses different Material for roof, wall, and ground surfaces.

				
<html> 
<head>
<title> indexed face set and material </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>
	      <!-- roof -->
   	      <Appearance>
     	        <Material diffuseColor="0.980, 0.502, 0.447"> </Material>
   	      </Appearance>
  	      <IndexedFaceSet solid="true" ccw ="true" 
   	        coordIndex="  7 4 8 -1 4 5 8 -1 5 6 8 -1 6 7 8 -1">
   	        <Coordinate DEF="pointset" 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>
	    <Shape>
	      <!-- wall -->
   	      <Appearance>
     	        <Material diffuseColor="0.753, 0.753, 0.753"> </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">
   	        <Coordinate USE="pointset" > 
   	        </Coordinate>
	      </IndexedFaceSet>
	    </Shape>
	    <Shape>
	      <!-- ground -->
   	      <Appearance>
     	        <Material diffuseColor="0.180, 0.280, 0.230"> </Material>
   	      </Appearance>
  	      <IndexedFaceSet solid="true" ccw ="true" 
   	        coordIndex=" 0 3 2 1 -1 ">
   	        <Coordinate USE="pointset" > 
   	        </Coordinate>
	      </IndexedFaceSet>
	    </Shape>
	  </Scene>
	</X3D>
</body> 
</html>