HTML5 Canvas 3D WebGL (TM) javaScript Library
 

modFit Library Method

Short Description: Align scene with HTML element

Signature: x.modFit ([align, [axis, [selObjects]]])
Class: taccgl3DObject Class
 

Per default the scene is resized to exaclty match the HTML element. The 3D Object is drawn directly in front of the element. Other ways of adjustment can be selected by supplying align and axis parameters.

To explain this in more detail we first need somemore background info: taccgl™ draws the 3D object in a (invisible) box (HTML element box) directly in front of the element. The HTML element forms the back plane of the box. The box has the width and height of the HTML element. The depth of the box defaults to the height of the element and can be set with depth. This link visualizes the Box. You can turn it with the mouse and terminate with a single click.

Per default the 3D scene (or the selected 3D objects) is stretched to exactly match the box, see Scene Torus, Cube, Sphere. Using the align parameter you can stretch the 3D model in a proportional way which keeps e.g. Spheres and Cubes like Scene Torus, Cube, Sphere. Using the align parameter you have various options of aligning e.g. putting the scene in the middle Scene Torus, Cube, Sphere, on the right/bottom Scene Torus, Cube, Sphere, or putting the scene in the middle of the x and y axis but right before Scene Torus, Cube, Sphere or or behind the HTML element Scene Torus, Cube, Sphere.

Before we explain the parameter in detail, the following examples show, how to use the method in general:

var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.actor("demopara",to.scene()).modFit("mmF","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.actor("ex1",to.objs('Torus')).modFit("mm","xyz").dur(5).start();
RUN

axis

If the axis parameter is given, modFit resizes the 3D model using a single scaling factor s used for each axis. It tries to show the 3D model as large as possible while making it fit into the box of the HTML element. axis="xyz" makes sure that the model fits into the box in x, y, and z direction. With axis="x" it only honors this constraint for the x axis. So in this case the 3D model can overflow the HTML element in y and z direction.

var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.actor("demopara2",to.objs('Torus')).modFit("mm","x").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.actor("demopara2",to.objs('Torus')).modFit("mm","y").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
taccgl.a("demopara2",to.objs('Cube')).depth(60).modFit("lm","xy").dur(5).start();
taccgl.a("demopara2",to.objs('Cube')).depth(60).modFit("rm","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
taccgl.a("demopara2",to.objs('Cylinder|Cone|Torus')) .depth(5) .modFit("mm","xy") .dur(5) .start();
RUN

align

The second parameter align is a string of 3 characters, the first giving the alignment w.r.t. the x-axis, the second w.r.t. the y-axis, and the third w.r.t. the z-axis. Individual letters mean :

AxisLetterMeaningExample(s)
x L align Left of HTML Element Sphere
x c align Center with left side of the HTML Element Box Sphere
x l align Left inside the HTML Element Sphere
x m align Middle inside the HTML Element Sphere
x r align Right inside the HTML Element Sphere
x C align Center with right side of the HTML Element Box Sphere
x R align Right of the HTML Element Sphere
x s scale in X direction to size of HTML Element Sphere
x S scale in X direction and align Left of the HTML Element Sphere
y T align Top of HTML Element Sphere
y c align Center with top side of the HTML Element Box Sphere
y t align top inside the HTML Element Sphere
y m align Middle inside the HTML Element Sphere
y b align bottom inside the HTML Element Sphere
y C align Center with right side of the HTML Element Box Sphere
y B align Below the HTML Element Sphere
y s scale in Y direction to size of HTML Element Sphere
y S scale in Y direction and align top of the HTML Element Sphere
Sample HTML Element
z F put in Front of the HTML Element Box Sphere
z c align Center with front side of the HTML Element Box Sphere
z f align front inside the HTML Element Box Sphere
z m align Middle inside the HTML Element Box Sphere
z b align back inside the HTML Element Box, i.e. directly in front of the element Sphere
z C align Center with the HTML Element Sphere
z B align Behind the HTML Element Sphere
z s scale in Z direction to size of HTML Element Sphere
z S scale in Z direction and align Front of the HTML Element Sphere

The following two examples illustrate the difference of "b" and "B" for the z-axis. "b" shows the 3D object in front of an element. Due to perspective projection the 3D object appears slightly bigger than the HTML element (because it is in front) and from a 2D view takes up slightly more space than the HTML element ( overlapping the bottom border). "B" instead, shows the 3D object are behind the HTML element.

var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.a("ex4",to.scene()).modFit("lbb","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.a("ex4",to.scene()).modFit("lbB","xyz").dur(5).start();
var b=taccgl.actor("ex4").bgColor("rgba(128,128,128,0.1)").dur(5).start();
RUN

"C" for the z-axis aligns the middle of the 3D model with the HTML element, so part of the model is in front and part behind:

var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.a("ex4",to.scene()).modFit("lbC","xyz").dur(5).start();
var b=taccgl.actor("ex4").bgColor("rgba(128,128,128,0.1)").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.a("ex4",to.scene()).modFit("lbC","xyz").dur(5).start();
var b=taccgl.actor("ex4").bgColor("white").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.a("ex4",to.scene()).modFit("lbC","xyz").dur(5).start();
var b=taccgl.actor("ex4").dur(5).start();
RUN

selObjects

The third parameter selObjects selects the 3D objects of the scene modFit considers. Normally it defaults to the set of objects actually displayed, i.e. the regex parameter of the taccglOBJFile.objs method used to create the transition, or the complete scene, if taccglOBJFile.scene was used. selObjects must be a regular expression, just as the regex parameter of the taccglOBJFile.objs method.

var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var a=taccgl.a("ex5",to.scene()).modFit("lbb","xyz","Torus").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
var b=taccgl.actor("ex5").bgColor("white").dur(5).start();
var a=taccgl.a("ex5",to.scene()).modFit("lbC","xy","Cube").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
taccgl.a("ex5",to.objs("Cube|Torus|Ico.*")) .modFit("lbb","xy",".*").dur(5).start();
taccgl.a("ex5",to.objs("Cylinder|Sphere")) .modFit("lbb","xy",".*") .rotateMiddle(1,1,1) .dur(5) .start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:taccgl3DObject.setModMat - Set model translation matrix
Previous Page: taccgl3DObject Class