HT for Web Shape Manual



ht.Shape provided by HT is an extremely powerful type of data that can be displayed on both the GraphView and Graph3dView components, with its expanded subclass ht.Polyline can realize the function of 3D spatial pipeline, and the expand subclass ht.CSGShape can realize hollow function effect, this manual will be introduced in detail.


Basic Attribute

ht.Shape type is used on the GraphView component to render a polygon data, whose shape is mainly described by the properties of points and segments: points is the vertex information in ht.List type array, vertex is the object whose format is like{x:100, y:200}; segments is the segment array information in ht.List type, the line segment is integer with scale of 1 to 5, representing different vertex connection methods.

If segments is empty, the vertices in the points array are connected sequentially in array order, so the type of the line segment does not need to set the segments argument. segments is mainly used to draw a curve, or there is a jump breakpoint, its 1~5 value meaning is described as follows:

ht.Shape's main property function:

ht.Shape type of points value and width, height and position these three size and position information exist correlation, that means modifying points will affect width, height and position corresponding value, the same changes to width, height and position values also affect points information.

Style Attribute

ht.Shape related style properties:


ht.Polyline type inherits from ht.Shape, its express more similar line features with ht.Edge, so the label, note and icons, etc., attached parts position and direction similar to line type will consider the angle of polyline, from the following examples can only see the differences between the two accessories placed.

From the example above we can find ht.Polyline turn off the rotation function setRotation, see more differences in Spatial Pipeline chapter


ht.Node datas can be adsorbed onto another data through setHost(host), so that the host datas move and rotate and the attach adsorption datas will be driven. When host data is ht.Shape type, if the attach data is set to attach.* related properties, the data can be adsorbed to the ht.Shape at the specified segment position.

Adsorbed to ht.Shape segment function does not currently support segments be set to curve, nor does it consider ht.Shape sets the factor of rotation value rotation, when the data is adsorbed to ht.Shape segment, its rotation and position positions will be based on ht.Shape automatically changes in sync; if the attach.thickness value is set, the height of the data is automatically adjusted according to the host thickness value, which does not require user settings in common.


Floor Type

ht.Shape datas when thickness properties are less than 0 often used to render the floor effect of the polygon model, this type of tall property determines the thickness of the floor, generally through floor.setElevation(floor.getTall()/2); to set the floor on the sea level.

The floor type is controlled the top parameters by the*, shape3d.bottom.* control of the bottom surface parameters, shape3d.* control of the thickness around the parameters. For situations where only needs the plane and does not requires a stereo effect, you can set the bottom and surround visible parameters of shape3d.bottom.visible and shape3d.visible to false implementations.

GraphView on the 2D ht.Shape realizes tile map can be set through shape.repeat.image property, Graph3dView 3D tiles are controlled by and, but in this way if the floor size changes, it is generally necessary to set the parameters again so it is not convenient, HT provides the repeat.uv.length parameter to resolve this problem, and by setting this parameter, the tile will automatically adjusts the number of tiles based on the size of the graphic, and also with and parameters are superimposed, and of course, in most cases, if repeat.uv.length is set, you do not need to set and parameter.

Floor Type

ht.Shape datas when the value of thickness property is more than 0 often used to render a wall effect of the polygon model, this type of tall attribute determines the height of the wall, thickness represents wall thickness, usually set the wall on the sea level through wall.setElevation(wall.getTall()/2).

In a wall type, the model is equivalent to a linear of hexahedron, so it can be controlled by the all.*, left.* or right.*, etc. parameters of hexahedron, refer to 3D Manual Cube Chapeter

Pipeline Type

ht.Shape data is presented as the model effect of the cylinder pipe when the shape3d attribute is cylinder, tall and thickness determine the width and height value of the cylinder section, and when the tall and thickness values are presented as rounded slices, the direction of the pipeline is determined by points and segments.

The pipeline is controlled the top parameters by*, shape3d.bottom.* controls the bottom surface parameters, shape3d.* to control the middle part of the pipeline's direction. The effect of a hollow pipe can be achieved by setting and shape3d.bottom.visible to false.

Spatial Pipeline

The types described above are based on the 2D point information of {x: 10, y: 20} to describe the graphic trend, ht.Polyline inherits from ht.Shape, support {x: 10, y: 20, e: 30} format of 3D space point description, if e value is empty then take elevation elevation value, modify ht.Polyline elevation and tall values will automatically adjust the e value in the points of vertex, and the same points vertex information changes are synchronized with the ht.Polyline elevation and tall values.

ht.Polyline also supports the segments parameters introduced in the Basic Properties section, which extends from 2D planar curves to 3D spatial curve effects. ht.Polyline closes the function of setRotationX, setRotationY, setRotationZ and setClosePath.

ht.Edge and ht.Polyline is very similar in showing effect, but ht.Edge start and end points come from the source and target nodes, while ht.Edge edge.type attribute is points, edge.points and edge.segments correspond to ht.Polyline points and segments attributes, the vertex information of edge.points can also be a 3D vertex format for {x: 10, y: *, e: 30}, where the e value is null to represent 0.

ht.Edge and ht.Polyline has two ways of showing, the default display as a normal wireframe effect, when shape3d set to cylinder is displayed as the effect of the 3D pipeline, HT through the differential segment to achieve the curve, so to achieve a higher equalization curve effect, both ways can be passed shape3d.resolution control curve differential segment number.

Edge and Polyline in the ordinary wireframe effect can realize the function of dashed line, there are two kinds of dashed effect:

Graph3dView closes the dashed line by default, if you to start the dashed line drawing function through graph3dView.setDashDisabled(false).

Hollow Wall

Host section describes ht.Node can be adsorbed to ht.Shape type segment, when introducing ht-modeling.js after the modeling expansion package is inherited, through the ht.Node CSGNode, and inherits from ht.Shape ht.CSGShape, can realize the effect that the polygon been hollowed.

The above example will attach.thickness set to 1.001, the height is set to setTall(80.001), where the mantissa 0.001 is the size reserved for avoiding the error of the js floating-point operation.

CSGNode attach.operation property defaults to subtract, which represents the hollow of the CSGNode and CSGShape type of host datas, in the example by setting 3d.visible to false hides the CSGNode for hollowing out, but for the type of doors and windows, in addition to the use of windows and doors model hollowed out, but also need to retain the model of doors and windows, and doors and windows are generally thicker than the wall, but if attach.thickness is less than 1, you cannot chisel through the wall thickness, for this Modeling Expansion Pack also provides an DoorWindow type of data that facilitates users to build models of door and window types, and DoorWindow type datas provide dw.s3 parameter, which defaults to [0.999, 0.999, 0.5], represents a model that is actually displayed on the 3D interface and then zooms in on the size of the dw.s3 again, so that attach.thickness continues to keep the 1.001 that can be worn.


The above mentioned Floor Type, Wall Type and Pipe Type three types are described by the 2D point information of {x: 10, y: 20}, and 2D y coordinates are mapped to 3D z coordinates the conversion relationship can refer to 3D Manual. But all three types support ht.Shape rotationX, rotationY and rotationZ space rotation function, by setting the rotation parameter can achieve the erection effect.

The above example can realize the special effect of the horizontal flow of the pipe and the rotation of cross-section direction by changing the shape3d.uv.offset parameter.

Welcome to contact us