HT for Web Modeling Manual

Index

Overview

The HT for 3D Web provides hexahedral, shape3d, etc., a variety of conventional 3D models, such as predefined spheres, cylinders, etc., ht.Shape type can achieve 3D model effects of wall, pipe and polygon, etc., this manual will introduce more flexible 3D model function to meet the modeling requirements of different industry equipment and different environment scenes.

The custom 3D model has the following advantages:

This manual describes some of the extended model library functions provided by the ht-modeling.js modeling extension package.

Model Basic

The 3D model is synthesized by the most basic triangular plane stitching, for example, 1 rectangle can be composed of 2 triangles, 1 cubes consist of 6, 12 triangles, and so on, more complex models can be synthesized by many small triangular combinations. So the 3D model is defined as the description of all triangles of the constructed model, and each triangle consists of three vertices Vertex, each vertex vertex determined by x, y, z three dimensional coordinates that HT uses the right-hand rule to determine the front of the three-vertex tectonic triangular surface.

The simplest 3D model description is described by a top-point group, such as p1-p2-p3, which is a three-point triangle that can be described as an array of [p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p3.x, p3.y, p3.z], more triangles are shown in the following illustration:

The above description format is simple and easy to understand, but more data to repeat, for example, the vertices 1, 2 and 3 are described in the triangle definitions of T1, T2 and T3 respectively, so the vertices and triangles can be separated in a way that describes the vertices with two arrays, an array describes vertex vertices, abbreviated as vs in HT, the other array describes the triangle corresponding vertex index indices, abbreviated as is in HT. The index described in the previous illustration is as follows:

From the geometric model angle above the definition is enough to build a complete 3D model, generally the interface renders also need to define the color or the tile determines the rendering effect, the use of tile rendering method needs to define its corresponding tiling location information, refer to UV Mapping hexahedral chapters, referred to briefly as uv in HT. This parameter is not defined if the model is rendered only with normal colors.

The effect of the 3D scene model also depends on the angle between the normal vector and the light of each triangle surface. Normal vector normal in the model of HT is represented by the abbreviation ns, generally HT can automatically calculate ns information according to the vertex, but some models to achieve special rendering effect, each vertex can pass ns specifies the corresponding normal vector value, which is understood by reference to Phong Shading.

The following definition models are used for reference in the xzy axis size of the 1 range, [0, 0, 0] corresponds to the central position of the data, if the xzy axis has an absolute value of more than 0.5, it means that it exceeds the size defined by the data size3d.

Model Register

Through ht.Default.setShape3dModel(name, model) function, can register custom 3D model:

To sum up, the process of customizing the model is:

Similar to 2D pictures do not require global registration, you can directly set the content of the data properties node.setImage('www.google.com/logo.png'), 3D also supports this simplified approach, to build 3D JSON model object is set to the data attribute: node.setStyle('shape3d', dragonModel), but this approach is detrimental to the DataModel serialization data export, which results in the same model's data repeating output 3D model information, and the 3D model information data volume is very large in general, do not recommend the DataModel of the overall model information together, we generally see 3D model information and picture information as peripheral resource information, proposed DataModel data model information separately storage management.

Modeling Function

The custom 3D model is very flexible, but for complex models, hand-written vertex workloads and difficulty are high, so HT abstracts several types of models, providing a convenient way to build the function API, with the following functions in addition to createFrameModel to introduce ht-modeling.js expansion pack, the rest has been provided by ht.js:

createBoxModel

ht.Default.createBoxModel() builds the hexahedral model, which displays the same colors and tiles on six sides of the model

createSphereModel

ht.Default.createSphereModel(side, sideFrom, sideTo, from, to, resolution) building sphere model:

createSmoothSphereModel

ht.Default.createSmoothSphereModel(hResolution, vResolution, hStart, hArc, vStart, vArc, radius) building the smooth sphere model:

createCylinderModel

ht.Default.createCylinderModel(side, sideFrom, sideTo, from, to, top, bottom) building the cylinder model:

createSmoothCylinderModel

ht.Default.createSmoothCylinderModel(resolution, top, bottom, topRadius, bottomRadius, start, arc, height) building the smooth cylinder model:

createConeModel

ht.Default.createConeModel(side, sideFrom, sideTo, from, to, bottom) building the cone model:

createSmoothConeModel

ht.Default.createSmoothConeModel(bottom, resolution, start, arc, radius) building the smooth cone model:

createTorusModel

ht.Default.createTorusModel(side, sideFrom, sideTo, from, to, radius, resolution) build the torus model:

createSmoothTorusModel

ht.Default.createSmoothTorusModel(radius, tubeRadius, hResolution, vResolution, start, arc) building the smooth torus model:

createRoundRectModel

ht.Default.createRoundRectModel(top, bottom) build the round rectangle model:

createStarModel

ht.Default.createStarModel(top, bottom) building the star model:

createRectModel

ht.Default.createRectModel(top, bottom) building the rectangle model:

createTriangleModel

ht.Default.createTriangleModel(top, bottom) build the triangle model:

createRightTriangleModel

ht.Default.createRightTriangleModel(top, bottom) building the right triangle model:

createParallelogramModel

ht.Default.createParallelogramModel(top, bottom) build the parallelogram model:

createTrapezoidModel

ht.Default.createTrapezoidModel(top, bottom) building the trapezoid model:

createExtrusionModel

ht.Default.createExtrusionModel(array, segments, top, bottom, resolution, repeatUVLength, tall, elevation) according to the xz planar polygon, squeeze to a 3D model.

createRingModel

ht.Default.createRingModel(array, segments, resolution, top, bottom, side, sideFrom, sideTo, from, to) according to the curve of the xy plane, around a week to a 3D model.

createSmoothRingModel

ht.Default.createSmoothRingModel(array, segments, vResolution, start, arc, hResolution) according to the curve of the xy plane, around a week to a smooth 3D model.

createFrameModel

ht.Default.createFrameModel(dx, dy, dz, params) building a framework body model

Model Attribute

In addition to the underlying properties associated with building model vertices described in the Model Basics section, model JSON objects can also define the following properties:

The following property values are default to style corresponding to shape3d, if set on the model, the definition on the model has a higher priority:

Model Group

More complex models often need a combination of small models, using the current knowledge can set different parts of the model shape3d property separately through numbers of Node datas, if the effect of multiple parts to stick together, you can adsorbed these Node datas together to each other in rings through Node#setHost function. But such a solution would result in inconvenient object management, for example, a chair can be composed of four legs and a plane, but from an object management perspective or user perspective, we hope that the whole chair is a Node object, there is only one node in the TreeView view, this is the best occasion to use the model composition feature.

The definition of a composite model is very simple and flexible, and multiple models can be combined in an Array array

ht.Default.setShape3dModel('A', modelA);
ht.Default.setShape3dModel('B', modelB);
ht.Default.setShape3dModel('C', ['A', 'B']);

The above code defines the A, B and C three models, in which the model C is a combination of the A and B models.

ht.Default.setShape3dModel('E', ['A', 'B', 'sphere', modelD])

The array elements of the composite model can not only be the newly defined model names, also can be predefined model names, as well as model JSON objects directly, the above code defines the new model E, which is defined by a custom A and B model, predefined sphere spheres, and modelD combination of the four models.

ht.Default.setShape3dModel('F', [
    {
        shape3d: 'box',                        
        color: 'yellow'                 
    },
    {
        shape3d: 'box',
        s3: [0.5, 0.5, 1.1],                        
        color: 'red'
    }
]);

The attributes of the chapter Model Properties can be set not only on the JSON object of the model, you can also set on a new element object in a composite model array, which defines the new model F, which is composed of two box models, the model type is defined by the shape3d element attribute, you can also set model parameters such as color and s3.

ht.Default.setShape3dModel('G', [
    {
        shape3d: ['cylinder', {shape3d: 'cone', color: 'green', t3: [1, 0, 0]}],                      
        color: 'yellow',
        t3: [-0.5, 0, -1]
    },
    {
        shape3d: 'box',
        s3: [0.3, 0.3, 0.3],                   
        color: 'red'
    }
]);

The shape3d property values of a group element object, also can be an array type to achieve infinite recursive combination hierarchy nesting, the above code definition of the G model rendering effect as follows:

Data Binding

Refer to Databinding Manual

Extend Type

HT provides a number of primitive types of primitives, but in order to quickly build a room building, a variety of scene decorations, the modeling expansion pack adds more primitive types, facilitating users to quickly build project scenes with APIs or visual editing tools.

Symbol

ht.Symbol inherits from ht.Node, often used to display flower pots, billboards and other decorative pictures of the plane, its default setting of all.visible to false, overloaded with setIcon function, in the setting icon of the same time through addStyleIcon will also be used to display pictures in Graph3dView. Generally using Symbol requires only the constructor or the setIcon to input the parameter, then the p3 position can be set.

The setIcon function returns the registered json object, which can be used to set additional parameters, see the 3D Manual Icon Chapter

CSGNode

CSG is the abbreviation of Constructive Solid Geometry modeling technology, by tailoring subtract, fusion union and intersection intersect operations combine complex model effects, HT encapsulates ht.CSGNode and ht.CSGShape and other data types to support the combination of CSG, often used in the wall of doors and windows hollowed out the application scene.

'ht.CSGNode inherits from ht.Node, when the style of the shape3d attribute is shown to be null show the cube effect, if the CSGNode adsorbed to the host CSGNode or CSGShape by sethost, the host CSGNode or CSGShape can be combined with the adsorption of CSGNode datas for CSG modeling.

When the host CSGNode or CSGShape is combined to generate the new model part of the rendering by the csg.* parameters to control, is the same control mode with all.* and other facets of the six-face body, refer to 3D Manual of the Cube Chapter.

Note that there is no csg.uv, csg.uv.scale and csg.uv.offset, etc., tile-related parameters, csg related surface of the uv value is determined by the adsorption of the cube tile parameters, only the tile picture parameters determined by host csg.image parameter.

We can understand the CSG.* as the seventh face except left/rigth/top/bottom/front/back

CSGBox

ht.CSGBox inherits from ht.CSGNode, in addition to having the knocked out function of CSGNode of the parent class, can also be rotated and expand and closed on six surfaces, so the following related style attribute is added, the following is only described as front because of the identical parameters of six sides:

These two parameters of front.expanded and front.angle are generally not operated by the user, ht.CSGBox` provides the following function encapsulation, refer to Form Manual Example Unboxing

Note that there is no all.* corresponding to the six-plane uniform parameters, CSGBox related surface parameters can only be set independently of each surface

DoorWindow

ht.DoorWindow inherits from ht.CSGNode, in addition to having the function of ht.CSGNode of father class, can also carry out the whole rotation to expand and close operation, often used as the business object of the door or window, adsorbed in CSGNode or CSGShape host as the wall of the data, DoorWindow adds the following style parameters to the control, where dw is the abbreviation of DoorWindow:

DoorWindow type can also be combined with the OBJ format 3D model to show more realistic windows and doors effects, see Obj Manual windows and doors application example

CSGShape

ht.CSGShape inherits from ht.Shape, currently only supports the not ignoring the segments parameters of the line wall effect, CSGNode if through setHost adsorption to the host CSGShape, CSGShape can be with the adsorbed CSGNode datas to CSG modeling.

When the style parameter is set by the adsorbent CSGNode, it will automatically adjusts its size, position, and rotation angle so that it remains positioned on the Shape corresponding segment, and this function applies not only to ht.CSGShape, also applies to ht.Sha pe's parent data, note that the adsorption function on this segment does not take into account the Shape type of rotation.

CSGShape type to ht.Shape has been simplified, and the setRotation, setRotationX and setRotationZ rotation functions are not supported except for segments parameters.

Welcome to contact us service@hightopo.com