HTML5+CSS on Canvas 3D WebGL (TM) Library
 

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.

Next Page:JavaScript Embedding
Previous Page: Continuations
Please Add a Comment or Question, click here!