HT for Web Lighting Manual



Building the 3D scene, in addition to creating models, setting colors and tiles on models, requires a lighting effect to more realistically reflect real-world scenes. This manual will introduce headlight, point light, spotlight and directional light in depth such as the various configuration parameters of light source, as well as fog and other effects.


The HT is built with a headlight in default, the headlights equivalent to the eye position of graph3dView.getEye() has a point light, where the source of the light is changed with graph3dView.getEye(), so even if the user does not do any lighting settings, roaming to any location can experience the basic lighting effect.

Graph3dView controls the headlights through the following parameters:

Light Object

HT provides ht.Light type of data that inherits from ht.Node, by creating ht.Light type of data object, then add to the DataModel data model to achieve the effect of adding lights. The following light source types point light, spotlight and directional light are all controlled by ht.Light object, the following is the common style attribute of the lighting type:

Remove ht.Light object from DataModel, with the light.disabled property set to false can be turned off the lighting effect, but the delete operation is heavy from the DataModel, it is recommended that to delete it while in long time do not use it, if you want to achieve frequent changes in flicker and other effects, the proposed light.disabled control is more efficient.

Point Light

Light is emitted from all directions in its position, affecting all objects within its length range.


The spotlight is affected by objects within the specified fillet and length range, from where it is, to the position of the center point.

Directional Light

The directional light is in the infinite distance, in the direction specified to illuminate all objects in the scene, the sun is the application of such light.


HT provides an fog effect that renders the scene shrouded in atomization, and Graph3dView is controlled by the following parameters:

Welcome to contact us