Canvas Library
 

HTML Material

If the 3D Model contains faces (with 4 corners) using a material named "HTML", then the HTML element associated with the transition is mapped on that face. There is nothing else but naming the material to be done to use this feature.

For example this scene contains a pin modeled by a cone and a sphere, a positioning plane named pos and a special plane shown in yellow having material HTML. The following examples show this scene. It is associated with an hidden HTML element named "pinned", which is subsequently mapped on the Plane.

<div id="pinned" style="position:absolute; left:0px; top:0px; visibility: hidden;
font-size:240px; width:900px; text-align:center; padding:80px">
Pinned Element
</div>
 
var to=taccgl.objFile().read('/objtest/taccgldocpin.obj',false);
var a=taccgl.actor("pinned",to.objs("Sphere|Cone|Plane")) .modFit("lbF","xy","Pos").dur(5);
a. bgColor("yellow").start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldocpin.obj',false);
var a=taccgl.actor("pinned",to.objs("Sphere|Cone|Plane")) .modFit("ltF","xy","Pos").dur(3);
a.flyToElement("ex4").rotateMiddle(0,1,0);
a. bgColor("yellow").start().cont().dur(2).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldocpin.obj',false);
var a=taccgl.a("ex4",to.objs("Sphere|Cone|Plane")) .modFit("ltF","xy","Pos").dur(3);
a.from(0,0,0).rotateMiddle(0,1,0);
a.mapActor("pinned").bgColor("yellow").start().cont().dur(2).start();
RUN
var to=taccgl.objFile().read('/objtest/taccgldocpin.obj',false);
var a=taccgl.a("ex4",to.objs("Sphere|Cone")) .modFit("ltF","xy","Pos").dur(3);
a.from(400,-2000,-2000) .vEnd(0,0,0) .start().cont().dur(2).start();
var b=taccgl.a("ex4",to.objs("Plane")).modFit("ltF","xy","Pos").dur(2);
b.from(0,0,0).vEnd(0,0,0);
b.mapActor("pinned").bgColor("yellow").start().cont().dur(3).start();
RUN

All the methods used for coloring and texturing like bgColor, blend, mapActor etc. become operational now and apply to the surfaces with HTML material. All other surfaces of the 3D Model keep colors and textures as defined in the 3D Model.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:UV Mapping
Previous Page: taccgl3DObject.opacity3D - Set opacity of 3D surfaces