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.

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.

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.

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.

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.

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.