5.1 3dhtml

  Download source    View color-coded source

Content of 3dhtml.js:
Point3D
A single point in 3-dimensional space. This is used to represent the models' points.


function Point3D(x, y, z, materialId)
Constructs a Point3D.

Parameters
    int x - the x position
    int y - the y position
    int z - the z position
    int materialId - the material id (reference to the material array of the parent model)
Returns
    Point3D - a new Point3D object


function duplicate()
Duplicates this Point3D.

Returns
    Point3D - The new Point3D


function setPosition(x, y, z)
Sets the position of this Point3D.

Parameters
    int x - the x position
    int y - the y position
    int z - the z position


function transform(matrix)
Transforms the point with the given matrix.

Parameters
    Matrix matrix - the matrix to transform the point with


function homogenize()
Homogenizes the point.


function refresh()
This handler is called when the point is drawn.


function toString()
Returns a string representation of the point.

Returns
    String - A string of the format (x, y, z, w)
Model
A collection of points that make up a model.


function Model(id, material)
Constructs a new model at (0,0,0) without any points.

Parameters
    String id - The name of the model
    Material material - The mandatory material (materialId = 0)
Returns
    Model - the new model object


function createPointCode()
Writes all layers into the document (and also stores references to the DIVs in the respective Point3D objects). The naming convention used for the DIV elements:
pnt + {model-ID} + {point-ID}

Implementation notes
The HTML is written directly within the method, preceeding the initialization of the corresponding points with their respective layer references. This is not left to the user.


function assignLayers()
Assigns layer references for all points of the model.


function transform(matrix)
Transforms the model with the given matrix.

Parameters
    Matrix matrix - the transformation matrix (e.g. a rotation matrix)


function draw()
Draws the points of the model (ie positioning the point layers on the screen).


function show()
Shows the model by setting all of its points visible.


function hide()
Hides the model by setting all of its points invisible.


function linkTo(parentModel, pointIndex)
Assigns a parent model to this model. Links this model as child to the parentModel to build a scene graph. All children will be drawn from their parent model.

Parameters
    Model parentModel - the model to link to
    int pointIndex - the index of the parent model's point that this model is linked to.
    NOTE: THE pointIndex PARAMETER IS NOT USED AT THE MOMENT


function setPoints(newPoints)
Sets the points array of the model.

Parameters
    Point3D[] newPoints - an array containing the new model points


function setPivot(pivot)
Sets the model's pivot.

Parameters
    Point3D pivot - the new pivot


function duplicate(newId)
Duplicates a model.

Parameters
    String newId - the id of the new model.
Returns
    Model - the dup model.


function copyPointsFrom(source)
Copies the points from the source model into this model. To preserve the layer reference this method just copies the position attributes.

Parameters
    Model source - The model to copy the points from


function storePointValues()
Stores the values of the points to restore them later.


function restorePointValues()
Restores the values of stored points.


function getPointInWorldCoordinates(pointIndex)
Returns one of the model's points (specified by pointIndex, the point number) in world coordinates. This does not alter the actual point.

Parameters
    int pointIndex - the index number of the point to convert
Returns
    Point3D - The point in world coordinates


function getCompleteSgMatrix()
LOREM IPSUM ########################

Returns
    Matrix - the scene graph matrix


function toString()
This returns a string of the format
{modelId}
@{pivot}
{list of materials}
{list of points}

Returns
    String - a string representation of the model.
Matrix
A matrix object used to define transformations.


function Matrix()
Constructs a 4x4 Matrix you will need to transform points.
Preconfigured as identity matrix, i.e.
    1 0 0 0
    0 1 0 0
    0 0 1 0
    0 0 0 1

Returns
    a new Matrix object


function rotateX(phi)
Rotates along the x-axis with phi degree.

Parameters
    float phi - the radiant value to rotate with


function rotateY(phi)
Rotates along the y-axis with phi degree.

Parameters
    float phi - the radiant value to rotate with


function rotateZ(phi)
Rotates along the z-axis with phi degree.

Parameters
    float phi - the radiant value to rotate with


function scale(sx, sy, sz)
Scale with the scale factors.

Parameters
    float sx - the x scale factor
    float sy - the y scale factor
    float sz - the z scale factor


function translate(dx, dy, dz)
Translate with the translation values.

Parameters
    float dx - the x value to translate with
    float dy - the y value to translate with
    float dz - the z value to translate with


function compose(m)
Composes this matrix with the given matrix m

Parameters
    Matrix m - the matrix to compose with


function setMatrixValues(sourceMatrix)
Sets the values of this matrix to the values of the sourceMatrix (so basically it copies them)

Parameters
    Matrix sourceMatrix - the matrix to copy the values from


function getCopy()
Copies the values of this matrix to a new one and returns it.

Returns
    Matrix - a new Matrix with values copied from this Matrix.


function toString()
Returns a string representation of the matrix, e.g.
    1 0 0 0
    0 1 0 0
    0 0 1 0
    0 0 0 1

Returns
    a string representation of the Matrix object.
Material
A material has a body, basically containing a string with HTML code (which will make up the content of a point's DIV). Additionally it has a JavaScript statement - the refresh() method - that is called when drawing the points, so the material appearance can be changed by changing what is happening in the DIV.


function Material(body, refresh)
Constructs a Material.

Parameters
    String body - an HTML snippet (e.g. '<font color=red>+</font>')
    Function refresh - the function to call if model was drawn
Returns
    Material - The new Material object


function toString()
Returns the string representation of this Material.

Returns
    String - the Material's body
Modulator
This is basically an object encapsulating a function of some sort. It can be used to influence parameters such as the scaling of a model, its movement or the color of a point.
For an example, see implementation of MouseModulator.js.


function Modulator()
Constructs a Modulator.

Returns
    Modulator - a new Modulator object


function getMatrix()
Returns the modulator's internal matrix.

Returns
    Matrix - the modulator's internal matrix


function animate()
The (empty) default implementation of the animate method, which is used in modulators to update their internal matrix.
Helper functions


function normalize(v, sMin, sMax, dMin, dMax)
Normalizes a value to project it to a given range, e.g.
    v=5, source=[1, 10], destination=[1, 5]
    result = 2.22

Parameters
    float v - the value to project (within source range)
    float sMin - the min value of the source range
    float sMax - the max value of the source range
    float dMin - the min value of the destination range
    float dMax - the max value of the destination range
Returns
    float - The normalized value


function degToRad(v)
Converts degree value to radiant value.

Parameters
    float v - The degree value
Returns
    float - The rad value


function radToDeg(v)
Converts radiant value to degree value.

Parameters
    float v - The rad value
Returns
    float - The degree value