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. Other ways of adjustment can be selected by supplying align and axis parameters. To explain this in more detail we first need to discuss some background information about how taccGL sees HTML elements: An HTML element viewn as a 3D box of that, initially only the front plane is visible. The normal view of the HTML element is mapped on this front plane. The front plane is in the z=0 plane. Front plane and box have the width and heigth of the HTML element and the left and top pixel coordinates of the HTML element give the x and y coordinates of the top left vertex of the Box. Click on the link to see the box, it has a colored top, back, left, and right face to make it visible. Per default the depth of the box is equal to the height of the element (in case of a taccgl3DObject).

Per default the 3D scene (or the selected 3D objects) are stretched to exactly match the box, see Scene Torus, Cube, Sphere. Using the align parameter you can strech 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 behind the HTML element Scene Torus, Cube, Sphere or putting the scene in the middle of the x and y axis but right before 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); to.mtl.ambientAdjust(0.4);
var a=taccgl.actor("Layout",to.scene()).modFit("mmF","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.actor("ex1",to.objs('Torus')).modFit("mm","xyz").dur(5).start();
RUN

If the axis parameter is given, modFit resizes the 3D model using a single 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); to.mtl.ambientAdjust(0.4);
var a=taccgl.actor("ex1",to.objs('Torus')).modFit("mm","x").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.actor("ex1",to.objs('Torus')).modFit("mm","y").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.actor("ex2",to.objs('Cube')).depth(60).modFit("lm","xy").dur(5).start();
var a=taccgl.actor("ex2",to.objs('Cube')).depth(60).modFit("rm","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.actor("ex1",to.objs('Cylinder|Cone|Torus')).depth(5).modFit("mm","xy").dur(5).start();
RUN

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
z F put in Front of the HTML Element 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 Sphere
z b align back inside the HTML Element Sphere
z C align Center with right side of the HTML Element Box 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 "F" and "f". "F" shows the 3D objects on in front of an element. Note that due to perspective projection the 3D objects appear slightly bigger than the HTML element (because they are before it) and from a 2D view take up slightly more space than the HTML element (they overlap the bottom border). If you use "f" instead, the 3D objects are behind the HTML element. However, if the HTML element is not animated with taccgl™ but is just left alone, it always appears in the back and the 3D objects just have the position as if they were behing the HTML element. the third example illustrates this by showing the HTML element transparently.

var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.a("ex4",to.scene()).modFit("lbF","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.a("ex4",to.scene()).modFit("lbf","xyz").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.a("ex4",to.scene()).modFit("lbf","xyz").dur(5).start();
var c=taccgl.actor("Layout").blend(0,0).dur(5).start();
var b=taccgl.actor("ex4").blend(0,0).color("rgba(128,128,128,0.1)").dur(5).start();
RUN

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); to.mtl.ambientAdjust(0.4);
var a=taccgl.a("ex4",to.scene()).modFit("lbF","xyz","Torus").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.a("ex4",to.scene()).modFit("lbc","xy","Cube").dur(5).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldoc.obj',false); to.mtl.ambientAdjust(0.4);
var a=taccgl.a("ex4",to.scene()).modFit("lbc","xy","Cube").dur(5).start();
var c=taccgl.actor("Layout").blend(0,0).dur(5).start();
var b=taccgl.actor("ex4").blend(0,0).color("rgba(128,128,128,0.1)").dur(5).start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:taccgl3DObject.opacity3D - Set opacity of 3D surfaces
Previous Page: taccgl3DObject Class
Please Add a Comment or Question, click here!