HTML5 Canvas 2D Library

Basic External 3D Models - taccGL Tutorial

taccgl™ can be used to show and animate 3D Models created with a 3D modelling program. It reads OBJ and MTL files which are created by many such programs, e.g. Blender.

var modelfile=taccgl. objFile().read('/objtest/taccgldoc.obj',false);"testimg",modelfile.scene()). color('yellow') .modFit() .duration(10) .start();
The actor method takes an external 3D model as second parameter. If used it shows/animates the 3D model instead of an HTML/CSS element. actor takes an HTML element as first parameter which is taken as placeholder for the 3D model. The 3D model appears at the position of the placeholder HTML element. In the above example testimg (which is the big image on top of the page) is used as placeholder element.

Before using a 3D model it first must be downloaded, in the example by var modelfile = taccgl.objFile() .read('/objtest/taccgldoc.obj' ,false). This assigns the model to the variable named "modelfile". Using the modelfile.scene() method the scene of the modelfile is taken and passed on to actor.

The method modFit is used to make the 3D model fit into the space of the HTML Element. As used in the example above, it shrinks the 3D model as needed to completely fill the HTML element. When experimenting we first recommend to use modFit as shown in the example, otherwise it often happens that the 3D model appears too small or too big so that it is sometimes not even visible.

Mouse Control

The following sequence of examples explains, how to display a 3D model that can be turned and moved with the mouse. In the first example we add .useTM() which marks those transitions that should be movable with the mouse. The last line activates the mouse controller, which captures all mouse events and lets you turn (left mouse button) and move (right mouse button) objects with the mouse.

var modelfile=taccgl.objFile().read('/objtest/taccgldoc.obj',false);"ex20",modelfile.scene()). color('yellow') .modFit().useTM() .duration(20) .start();

Note that this first example uses duration(20) and so terminates exactly after 20 seconds. Also the rotation probably does not work as expected. We will address both issues further down.

You probably noticed that while the mouse controller is active the curser turns into a crosshair and all mouse events are captured by the controller, so that it is not possible to click on links or buttons. After a single left click, the controller terminates (independently of the animation itself) and normal mouse function return.

almost empty div element with id="ex20"

The next version of the example uses perm() instead of duration, which makes the animation run until explicitely stopped. The third line added makes the animation stop whenenver the mouse control is stopped with a single left click.

var modelfile=taccgl.objFile().read('/objtest/taccgldoc.obj',false);"ex20",modelfile.scene()). color('yellow') .modFit().useTM() . perm() .start();
taccgl.controller.onTerm = function () {taccgl.stop();}

The final version of this example sets to rotation center using controllerRotationCenter ({rx:0.5, ry:0.5, z:160}). Rotation with the mouse rotates the complete scene around this rotation center point. To inspect an object from all sides, it makes sense to put this rotation center point in the middle of the object. The example uses relative coordinates rx and ry to use the center point of the HTML div element (shown as empty box above) and z-coordinate 160px.

var modelfile=taccgl.objFile().read('/objtest/taccgldoc.obj',false);
taccgl.useController(taccgl.transformController());"ex20",modelfile.scene()). color('yellow') .modFit().useTM() . perm() .
controllerRotationCenter ({rx:0.5, ry:0.5, z:160}).start();;
taccgl.controller.onTerm = function () {taccgl.stop();}

Multiple Scenes and Objects

Although these introductionary examples just show a single scene at a single place in a web page, you can in fact simultaneously or sequentially show multiple scenes in various places of a web page and you can seemlessly combine them with other shapes as for example discussed in Basic Shapes.

Further Reading

  • Before you experiment with OBJ and MTL files reading section Providing OBJ and MTL Files is recommended, which explains how to put model files on your web server.
  • Section Creating OBJ and MTL Files explains how to export model files from external programs, e.g. blender, in a way suitable for taccgl™
  • Tutorial section External 3D Models contains
    • Selecting Parts of a Scene
    • Scaling and Aligning 3D Models with HTML Elements (modFit)
  • Section Loading Model Files explains asynchronous loading of model files.
  • Section
  • Section HTML Textures on 3D Models Describes how to map HTML elements on retangular surfaces in external 3D models.
  • Section HTML CSS UV Mapping on 3D Models Describes how to map HTML elements on non-retangular surfaces in external 3D models.
Next Page:Basic Animations
Previous Page: Basic Shapes