[SOLVED] unable to color faces using indexedfaceSet in x3dom

unable to color faces using indexedfaceSet in x3dom

I am looking for a way to display some meshes with color mapping in Chrome browser, so I have tried x3dom and indexedFaceSet. I assume there is a way to assign colors to vertices so that the color of the face is interpolated or at least I should be able to assign different constant color to each face. It seems that no matter what I try, I can only display lines of the faces and defined colors have no effect. Currently, I have this html code:

<html>
<head>
<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 width='600px' height='400px' showLog='true'>
        <Scene>
            <Shape>
                <IndexedFaceSet coordIndex='0 1 2 -1, 1 2 3 -1' colorPerVertex='true' solid='false'>
                    <Coordinate point='0 0 0, 1 0 0, 0 1 0, 1 1 0'/>
                    <Color color='0 1 0, 1 0 0, 0 0 1, 0 1 0'/>
                </IndexedFaceSet>
            </Shape>
        </Scene>
    </X3D>
</body>
</html>

I suppose, I am either missing something very simple or x3dom does not work properly on my machine.

Solution

Possible solution is in using .xhtml format (rather than .html) with following content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <link rel='stylesheet' type='text/css' href='x3dom.css'/>
  </head>
  <body>
    <X3D width='600px' height='526px'>
      <Scene>
        <Transform>
          <Shape>
            <IndexedFaceSet solid='false' coordIndex='0 1 2 -1'>
              <Coordinate point='1 0 0 0 2 0 0 0 3'/>
              <Color color='1 0 0 0 1 0 0 0 1'/>
            </IndexedFaceSet>
          </Shape>
        </Transform>
      </Scene>
    </X3D>
  <script type="text/javascript" src='http://www.x3dom.org/download/x3dom.js'></script>
  </body>
</html>

This solution was created reducing this example to a "minimum example" of what I was trying to accomplish.