The following example will show you how to interactively modify the 3D scene.











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. As the slider gives the RGB values between 0 and 255, they have to be transformed to arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string. 
      var mat = document.getElementById("material");
      rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
      mat.setAttribute("diffuseColor", rgbstring);