3D Boxes - taccGL™ Canvas Library Tutorial
actor has an optional second parameter to specify shape.
taccgl.dddBox draws a 3D box. It initially gets the width and height
of the specified HTML element. The depth needs to be specified explicitly using depth.
Initially the HTML element is mapped on each of the 6 surfaces of the box.
The first example below creates boxes of the "testimg" element and sets its
depth to 243 (the height of the image). The resulting box is moved using to
(see Basic Animations) and rotated using rotateMiddle
(see Simple Rotation). The second example does almost the same
but instead of the image element with this text paragraph.
taccgl.actor("testimg",taccgl.dddBox).depth(243).to(20,300,1599). rotateMiddle(0,1,0).rotatePart(0,Math.PI/3).start() | RUN |
taccgl.actor("para1",taccgl.dddBox).depth(243).to(20,300,1599). rotateMiddle(0,1,0).rotatePart(0,Math.PI/3).start() | RUN |
You will probably have noticed, that the box undergoes full lighting calculations and
so faces that turn away from a virtual light source are shown darker. Also the shadow of the box
is automatically calculated (although it is not visible on all graphic cards).
Using the selLeft, selFront, ... methods a surface can be selected
and another HTML element or a color can be mapped:
taccgl.actor("testimg",taccgl.dddBox).depth(243) .selFront().mapActor("ex1").bgColor("white") .selBack().mapActor("logoimg").bgColor("yellow") .selLeft().color("brown") .to(20,300,1599). rotateMiddle(0.7,0.7,0).rotatePart(0,Math.PI*2.1).dur(4).start() | RUN |
mapActor is used to map the HTML element with the given id onto the selected surface.
bgColor selects a background color.
Now the following example should actually be self-explaining, please leave a comment, if it isn't
taccgl.actor("test",taccgl.dddBox). depth(15). bgColor("white") .selLeft().color("brown") .selRight().color("brown") .selTop().color("brown") .selBottom().color("brown") .selBack().mapActor("logoimg").bgColor("white") .selFront().bgColor("white") .rotateMiddle(0,1,0).rotatePart(0,Math.PI/5).start() .cont().rotateMiddle(0,0,1).dur(4).start() .cont().rotateMiddle(0,1,0).dur(4).start() .cont().rotateMiddle(1,0,0).dur(4).start(); | RUN |
When trying out these examples yourself
you might want to consult JavaScript Embedding page first to simplify typing.
Also when trying to map your own content on each of the individual faces,
remember that you can map hidden elements on each of the faces but need
to make sure that these elements do not overlap, see Integration of HTML and WebGL.
You possibly have noticed, that the above animation does not look
correct, because when the box starts turning around the y axis, the right part
of the box actually rotates behind the white background. This is because the
animation plays in the foreground and the rest of the HTML page stays in the
background. This however, can easily be changed, by incorporating most
of the HTML page in the animation! The following example is almost identical
and in addition uses actor("Layout") at the end.
Layout
is the id of an HTML element covering most of the page content.
No motion or other action is applied to it, so it just stays at its original position
throughout the complete animation. The fourth parameter ,null,null,2 is just a way
to get around the overlapping elements problem, see HTML Elements on Canvas. By incorporating
this element into the animation, the canvas 3D / WebGL™ depth handling applies to it and everything
is shown correctly.
taccgl.a("Layout").shadowOnly().color("white").dur(13).start(); taccgl.actor("test2",taccgl.dddBox) .depth(15) .selLeft().color("brown") .selRight().color("brown") .selTop().color("brown") .selBottom().color("brown") .selBack().mapActor("logoimg").bgColor("white") .selFront().bgColor("white") .rotateMiddle(0,1,0).rotatePart(0,Math.PI/5).start() .cont() .rotateMiddle(0,0,1).dur(4).start() .cont().rotateMiddle(0,1,0).dur(4).start() .cont().rotateMiddle(1,0,0).dur(4).start(); | RUN |
WebGL™ is a trademark of the Khronos Group Inc.
|
3D Animation
