5.5 Materials

  Download source    View color-coded source

Content of materials.js: This is a collection of different materials you can use to draw 3D points. To understand how materials are handled in 3dhtml, refer to the Material API reference 5.1 3dhtml # Material and the accompanying tutorial, 4.3 Molecule3D.

ColorRectMaterial
Rectangle with color and size depending on depth (z value).


function createColorRectMaterial(colorFrom, colorTo, spacerImage)
This factory function creates and returns a new instance of the material ColorRectMaterial.

The Builder pattern is used here: Within 3dhtml, models use the Material class. To obtain a concrete instance of a material, you can call new Material() and define your own material attributes.
To use more complex materials such as ColorRectMaterial, you don't instantiate the object yourself, instead, ask createColorRectMaterial to create a new one for you - it will define and assign the HTML body and the refresh method.

Parameters
    Color colorFrom - color to blend from
    Color colorTo - color to blend to
    String spacerImage - path + filename of spacer image (recommended to avoid layer errors)
Returns
    Material - A new preconfigured Material
Requires
    ColorUtil.js - ColorBlend object


function colorRectMaterialRefresh(p)
Blends the color of a single Point3D depending on the point's z-value, its depth. This refresh method is called whenever the point is drawn.

Parameters
    Point3D p - the point to refresh
ClipButtonMaterial
A ClipButton (5.3 ClipButton) which state depends on depth (z value).


function createClipButtonMaterial(image, imageWidth, imageHeight, clipWidth, clipHeight, maxState)
This factory function creates and returns a new instance of the material ColorRectMaterial. See createClipRectMaterial above for more information.

Parameters
    String image - path + filename of image to use as ClipButton
    int imageWidth - the width of the image
    int imageHeight - the height of the image
    int clipWidth - the width of the clipping area
    int clipHeight - the height of the clipping area
    int maxState - the number of states
Returns
    Material - A new preconfigured Material.
Requires
    ClipButton.js - ClipButton object


function clipButtonRefresh(p)
Changes the state of the ClipButton of a single Point3D. This refresh method is called whenever the point is drawn.

Parameters
    Point3D p - the point to refresh