object3d CSS

Object3D.js

/**
 * Created by nico on 19/02/14.
 */

var Object3d = function( node, position, rotation )
{

    this.node = node;
    this.parent = null;

    this.mat = mat4.create();
    this.dirty = true;

    this.pos = vec3.create();
    if( position != null )
    {
        vec3.set( this.pos, position.x, position.y, position.z );
    }

    this.rot = vec3.create();
    if( rotation != null )
    {
        vec3.set( this.rot, rotation.x, rotation.y, rotation.z );
    }

	this.targetPosition = vec3.create();

	this.originPosition = vec3.create();

    this.targetRotation = vec3.create();

    this.originRotation = vec3.create();

	vec3.copy( this.targetPosition, this.pos );
	vec3.copy( this.originPosition, this.pos );
    vec3.copy( this.targetRotation, this.rot );
    vec3.copy( this.originRotation, this.rot );


};

Object3d.prototype =
{
	reset : function()
	{

		vec3.copy( this.targetPosition, this.originPosition );
		vec3.copy( this.targetRotation, this.originRotation );

	},

	update : function()
	{

		this.pos[ 0 ] += ( this.targetPosition[ 0 ] - this.pos[ 0 ] ) * .1;
		this.pos[ 1 ] += ( this.targetPosition[ 1 ] - this.pos[ 1 ] ) * .1;
		this.pos[ 2 ] += ( this.targetPosition[ 2 ] - this.pos[ 2 ] ) * .1;

		//limiter l'imprecision...
		if( nearEquals( this.pos, this.targetPosition, POSITION_EPSILON ) )
		{
			this.pos[ 0 ] = this.targetPosition[ 0 ];
			this.pos[ 1 ] = this.targetPosition[ 1 ];
			this.pos[ 2 ] = this.targetPosition[ 2 ];
		}

		this.rot[ 0 ] += ( this.targetRotation[ 0 ] - this.rot[ 0 ] ) * .1;
		this.rot[ 1 ] += ( this.targetRotation[ 1 ] - this.rot[ 1 ] ) * .1;
		this.rot[ 2 ] += ( this.targetRotation[ 2 ] - this.rot[ 2 ] ) * .1;

		//limiter l'imprecision...
		if( nearEquals( this.rot, this.targetRotation, ROTATION_EPSILON ) )
		{
			this.rot[ 0 ] = this.targetRotation[ 0 ];
			this.rot[ 1 ] = this.targetRotation[ 1 ];
			this.rot[ 2 ] = this.targetRotation[ 2 ];
		}

		this.transform();
	},

    clone : function()
    {

        var tmp = new Object3d( this.node, this.pos, this.rot );
        tmp.parent = this.parent;
        return tmp;

    },

    copy : function( other )
    {
        vec3.copy( this.pos, other.pos );
        vec3.copy( this.rot, other.rot );
        return this;
    },

    translate : function( tx, ty, tz )
    {
        tx = tx ||0;
        ty = ty ||0;
        tz = tz ||0;
        vec3.set(   this.pos,
                    this.pos[ 0 ] + tx,
                    this.pos[ 1 ] + ty,
                    this.pos[ 2 ] + tz      );
        this.dirty = true;
        return this;
    },

    translation : function( tx, ty, tz )
    {

        this.pos[ 0 ] = this.targetPosition[ 0 ] = tx ||0;
        this.pos[ 1 ] = this.targetPosition[ 1 ] = ty ||0;
        this.pos[ 2 ] = this.targetPosition[ 2 ] = tz ||0;
        this.dirty = true;
        return this;
    },

    rotate : function( rx, ry, rz )
    {

        rx = rx ||0;
        ry = ry ||0;
        rz = rz ||0;
        vec3.set(   this.rot,
                    this.rot[ 0 ] + rx,
                    this.rot[ 1 ] + ry,
                    this.rot[ 2 ] + rz      );
        this.dirty = true;
        return this;

    },
    rotation : function( rx, ry, rz )
    {

        this.rot[ 0 ] = this.targetRotation[ 0 ] = rx % PI2 || 0;
        this.rot[ 1 ] = this.targetRotation[ 1 ] = ry % PI2 || 0;
        this.rot[ 2 ] = this.targetRotation[ 2 ] = rz % PI2 || 0;
        this.dirty = true;
        return this;

    },

    transform : function()
    {

        mat4.identity( this.mat );

        if( this.parent != null )
        {

            this.parent.transform();
            mat4.multiply( this.mat, this.mat, this.parent.mat );
        }

        mat4.rotateX( this.mat, this.mat, this.rot[ 0 ] );
        mat4.rotateY( this.mat, this.mat, this.rot[ 1 ] );
        mat4.rotateZ( this.mat, this.mat, this.rot[ 2 ] );
        mat4.translate( this.mat, this.mat, this.pos );

        if( this.node != null )
        {

            var str = mat4.str( this.mat ).replace( "mat4", "matrix3d" );

            $( this.node ).css({    "-webkit- transform"    :    str   ,
                                       "-moz- transform"    :    str   ,
                                        "-ms- transform"    :    str   ,
                                         "-o- transform"    :    str   ,
                                             "transform"    :    str    } );

        }
        this.dirty = false;
        return this.mat;

    }

};