The following example will show you how to interactively modify the 3D scene. See X3D Material node definition for an explanation of the different color attributes.

ambientIntensity
ambientIntensity: 0 1

diffue color
red: 0 1
green: 0 1
blue: 0 1

emissive color
red: 0 1
green: 0 1
blue: 0 1

specular color
red: 0 1
green: 0 1
blue: 0 1

shininess
shininess: 0 1

transparency
transparency : 0 1



The diffuse color of a material will be interactively changed. A JavaScript RGB color picker is used and modified. If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to get the Material node first. This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.


<html> 
  <head> 
      <title>colorbrewer</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 id="material" diffuseColor="0.980, 0.502, 0.447"> </Material>
          </Appearance>
        <Sphere radius="2.0"> </Sphere>
      </Shape>
    </Scene>
    </X3D>
  </body> 
</html>     


For example, if the diffuse color should be set to red, the Material node is referenced by its id and the attribute diffuseColor is set to "1.0 0.0 0.0". The attribute value is always a string.
    var mat = document.getElementById("material");
    mat.setAttribute("diffuseColor", "1.0 0.0 0.0");      
    
In the example, the RGB value is fetched from the slider.
      var mat = document.getElementById("material");
      rgbstring = " "+ red + " " + green + " " + blue;
      mat.setAttribute("diffuseColor", rgbstring);