Canvas Library
 

HTML CSS UV Mapping on 3D Models - taccGL™ Tutorial

UV Mapping

If the 3D Model contains the HTML material discussed and in addition texture coordinates (UV coordinates), these are used. The example file uvsphere1.obj contains a sphere with an UV map. When used, the HTML element (in this case Layout, which means almost the complete page) is mapped on the sphere.

var to=taccgl. objFile().read('/objtest/uvsphere1.obj',false); to.mtl.ambientAdjust(0.4);
taccgl.a("Layout",to.objs("Sphere")) .paint() .modFit("mmm","xy") .rotateMiddle(0,0.7,0.7) .dur(5) .start();
RUN
var to=taccgl. objFile().read('/objtest/uvsphere1.obj',false); to.mtl.ambientAdjust(0.4);
taccgl.a("Layout",to.objs("Sphere")) .paint() .bgColor("white"). modFit("mmm","xy") .rotateMiddle(0,0.7,0.7) .dur(5) .start();
RUN
var to=taccgl. objFile().read('/objtest/uvsphere1.obj',false); to.mtl.ambientAdjust(0.4);
taccgl.a("ex4",to.objs("Sphere")) .mapActor("Layout") .modFit("mmm","xy").
flyOut(0,1200,-2500) .rotateMiddle(0,0.7,0.7) .dur(5) .start();
RUN
The second example uses the HTML element "ex4", which is the example box as placeholder element, to make the sphere smaller and appear in the right place. It however uses mapactor to again map the HTML element with id "Layout" on the sphere. Some more examples are in UV Mapping and some hints to create models with UV maps in UV Map Creation.

WebGL™ is a trademark of the Khronos Group Inc.