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

HTML/CSS Textures on 3D Models - taccGL™ Tutorial

We have already described, how to map images of HTML elements on rectangles and cubes. This section is about reading in 3D models made with a modelling program like blender and how to map HTML elements such a model.

HTML Material

Pinned Element

Section Basic 3D Models and External 3D Models descibed how to read and display a 3D Model. The following example works just the same. The difference is the 3D Model itself which must use a material named "HTML" for a rectangular face. In this case, then taccGL maps the placeholder HTML element on all surfaces having that material (also see Manual section HTML Material).

var modelfile=taccgl. objFile().read('/objtest/taccgldocpin.obj',false);
taccgl.actor("pinned",modelfile.objs("Sphere|Cone|Plane")) .modFit("ltF","x","Pos") .dur(5).bgColor("yellow").start();
RUN
var modelfile=taccgl. objFile().read('/objtest/taccgldocpin.obj',false);
taccgl.actor("pinned",modelfile.objs("Sphere|Cone|Plane")) .modFit("ltF","x","Pos") .dur(5).rotateMiddle(0,1,0) .bgColor("yellow") .start();
RUN
var modelfile=taccgl. objFile().read('/objtest/roundcube/roundcube1.obj',false);
taccgl.actor("pinned",modelfile.scene()) .modFit("mmm","x") .dur(5).rotateMiddle(2,1,2) .bgColor("yellow") .start();
RUN
<div id="pinned" style="position:absolute; visibility: hidden;
font-size:120px; width:450px; text-align:center; padding:80px">
Pinned Element
</div>
 

Remapping Materials

It is also possible to remap any named material used in the 3D Model. The following example defines two taccgl™ materials, mGreen shows a green surface and mPinned shows the text "Pinned Element" (from the previous example) with yellow background. The code to show the 3D model is the same as on page Basic 3D Models, and in addition the method material is used.

material gets two parameters, the first is the name of a material in the 3D model and the second a previosly defined taccgl™ material. So the material named "top" (which is the one on the top face of the cube) and the material "left" gets the taccgl™ material mPinned, i.e. it gets the text "Pinned Element" with yellow background. In addition the "right" material is set to mGreen.

var modelfile=taccgl.objFile().read('/objtest/roundcube/roundcube1.obj',false);
var mGreen = taccgl.material().color("green");
var mPinned = taccgl.material().mapActor ("pinned").bgColor("yellow");
taccgl.useController(taccgl.transformController());
var tCube=taccgl.actor("div20",modelfile.scene()) . color('blue') .modFit("mmm") .useTM() . perm() .
controllerRotationCenter ({rx:0.5, ry:0.5, z:160}) .
material("left",mPinned) . material ("top", mPinned). material ("right", mGreen) . start();
taccgl.controller.onTerm = function () {taccgl.stop();}
RUN

WebGL™ is a trademark of the Khronos Group Inc.