HTML5-based WebGL technology to build 3D scene (i)

Today, we share the 3D pre-defined model of the 3D series.

The HT for WEB provides a variety of basic types for user modeling, unlike traditional 3D modeling, HT's modeling core is API-based interface, and is set up to build three-dimensional models with HT predefined primitive types and parametric interfaces. Let's talk about the predefined 3D models and parameter settings.

HT pre-defined 3D models are: box, sphere, cone, torus, cylinder, star, rect, roundrect, triangle, tighttriangle, parallelogram, and trapezoid These 12 kinds, then how are these 12 types set?

On 2D Graphics Graphview The network topology diagram, rendering various shapes is determined by the shape attribute in the style, and HT provides a Shape3d property on 3D with a predefined number of 3D shapes. The default value for the Shape3d property is undefined, and the entity is displayed as a six-faceted cubic shape, and when Shape3d specifies a value, it is displayed as a shape3d-specified shape, followed by a description of each form of the 3D model.

1. Box: Cube, different from the default six polygon, the cube type of six polygon color and map can only be the same, drawing performance than the default Hexahedral high;

As shown, the left side is shape3d set to box, the right side is the default six-face body, two nodes are mapped on the upper surface, but from the effect of the Shape3d set to box node directly ignores the map setting on the upper surface, which should also be documented above, box The color and map of type six polygons can only be the same for Shape3d.image and Shape3d.color, the following is the specific setup code:

New ht. Node (); Node.s3,node.s ({    ' shape3d ': ' Box '    ,' shape3d.image ': ' Img11 ',     ' shape3d.top.image ': ' img10 'new  ht. Node (); Node.s3(node.p3, 0, 0), node.s ({    ' all.image ': ' Img11 ',     ' top.image ': ' img10 ');d m.add (node);

2. Sphere: Sphere, can be divided into multiple pieces by shape3d.side, combined with shape3d.side.from and shape3d.side.to can form a hemispherical body, etc.

As shown, the ball is cut off a part of the cut of the two faces can be individually controlled, through the shape3d.from.* and shape3d.to.* two sets of parameters can be individually controlled on both sides of the display effect, in, I through the shape3d.to.visible to the face hidden, A new map is set from the from polygon through Shape3d.from.image, with the following code:

node.s ({    ' shape3d ': ' Sphere ',    ' shape3d.image ': ' img11 ',    ' shape3d.side ': ' Shape3d.side.from ': 0,    ' shape3d.side.to ': $,    '     Shape3d.from.image ': ' Img10 ',    false});

3. Cone: Cone, can be formed by shape3d.side Triangle Cone, Four Corners cone shape

As you can see, the larger the side value, the smoother the vertebral body can be compared to the cone. Specifically how to set up, let's take a look at the code:

[3, 4, 5, 6, ten, 100].foreach,function(side, index) {varx = ((INDEX/3) >> 0) * 100-100, y= index% 3 * 100-100; Node=Newht.    Node (); NODE.P3 (x,40, y); NODE.S3 (80, 80, 80); NODE.S ({' Shape3d ': ' Cone ',        ' Shape3d.image ': ' Img11 ',        ' Shape3d.side ': Side,' Note ': ' Side: ' +side,' Note.autorotate ':true,        ' Note.position ': 17,        ' Note.face ': ' Top ',        ' Note.background ': ' #979EAF '    }); Dm.add (node);});

Of course, the vertebral body can also be the same as the sphere, you can set the Shape3d.side.from and Shape3d.side.to parameters to control the cutting, but also through the shape3d.from.* and shape3d.to.* parameters to control the performance of two faces; shape3d.bottom.* style to control the performance of the surface of the vertebral body.

In the above code, you can see the note related settings, which is also introduced here, note.autorotate style is used to control the direction of the note, if set to true, then this note is always oriented toward the eye, no matter how the scene rotates.

4. Torus: Ring, can be divided into multiple pieces by shape3d.side, combined with shape3d.side.from and shape3d.side.to can form a half ring, etc.

In the can be seen, the ring is actually the same as the cone, it is also possible to set the number of edges, form the triangle ring, the four corners of the ring shape, when the number of sides reached a certain degree, the more the number of sides, the more smooth the ring.

In the note added a radius value of the print, this value corresponds to the style of the Shape3d.torus.radius, then what is the value of the role of what is it, I think it can be seen that the radius value is used to control the radius of the ring, but why Radius is 0.25 when the middle of the ring is filled, not like other rings in the middle of the leak? We can understand that a torus has two rings in diameter, then there are four circle radii, that is, as a percentage to calculate, a radius is the entire element width of 1/4, that is 0.25, so this Shape3d.torus.radius style value range is 0~0.25.

[3, 4, 5, 6, ten, 100].foreach,function(side, index) {varx = ((INDEX/3) >> 0) * 100-100, y= index% 3 * 100-100; Radius= (Math.random () * 0.25). toFixed (2); Node=Newht.    Node (); NODE.P3 (x,40, y); NODE.S3 (80, 80, 80); NODE.S ({' Shape3d ': ' Torus ',        ' Shape3d.image ': ' Img11 ',        ' Shape3d.side ': Side,' Shape3d.torus.radius ': Radius,' Note ': ' side: ' + side + ', radius: ' +radius,' Note.autorotate ':true,        ' Note.position ': 17,        ' Note.face ': ' Top ',        ' Note.background ': ' #979EAF '    }); Dm.add (node);});

5. Cylinder: cylinder, can be controlled by shape3d.top.* and shape3d.bottom.* parameters of the top and bottom surface

The parameters of the cylinder are the same as the parameters of the cone mentioned above except for the shape3d.top.*, because the cylinder is actually a polygon more than the cone.

[3, 4, 5, 6, ten, 100].foreach,function(side, index) {varx = ((INDEX/3) >> 0) * 100-100, y= index% 3 * 100-100; Node=Newht.    Node (); NODE.P3 (x,40, y); NODE.S3 (80, 80, 80); NODE.S ({' Shape3d ': ' Cylinder ',        ' Shape3d.image ': ' Img11 ',        ' Shape3d.side ': Side,' Note ': ' Side: ' +side,' Note.autorotate ':true,        ' Note.position ': 17,        ' Note.face ': ' Top ',        ' Note.background ': ' #979EAF '    }); Dm.add (node);});

To all of the basic models are introduced here, the following to introduce a few basic models have no side related attributes, it means that they will not have from and to the relevant parameters, no cutting function.

If you want to make the basic primitives that cannot be cut to the effect of cutting, or there are other solutions and methods, these, we will be introduced in the following chapters, but also hope to wait patiently.

6. Star: Stars with shape3d.top.* and shape3d.bottom.* to control the parameters of the top and bottom surfaces

7. Rect: Rectangular body with shape3d.top.* and shape3d.bottom.* to control the parameters of the top and bottom surfaces

8. RoundRect: Round rectangular body, can be controlled by shape3d.top.* and shape3d.bottom.* parameters of the top and bottom surface

9. Triangle: Triangular body, can be controlled by shape3d.top.* and shape3d.bottom.* parameters of the top and bottom surface

Righttriangle: Right triangle body with shape3d.top.* and shape3d.bottom.* to control the parameters of the top and bottom surfaces

Parallelogram: Parallelogram body with shape3d.top.* and shape3d.bottom.* to control the parameters of the top and bottom surfaces

Trapezoid: trapezoidal body with shape3d.top.* and shape3d.bottom.* to control the parameters of the top and bottom surfaces

is a few basic models that haven't been introduced yet.

[    ' star ', ' rect ', ' roundrect ', ' triangle ',    ' righttriangle ', ' parallelogram ', ' trapezoid ' ].foreach (shape, index) {    var x = index * 100-300;     New ht. Node ();     0);    NODE.S3 (a);    NODE.S ({        ' shape3d ': Shape,        ' shape3d.image ': ' Img11 '    });    Dm.add (node);});?

Looking closely, you will find that from the left, the second and fourth seem to have been seen in the previous example. Yes, the shape is the same, but there are some differences in performance, what is the difference, we look through the picture.

On the left is the basic model rect and triangle, the right side is the base model cylinder simulation of the Rect and triangle, the size of the four primitive settings are the same, the edge length is 80, you can find that the basic model rect and triangle in the performance than through Cylinder simulation of the Rect and triangle to the larger, the reason is very simple, through the cylinder simulation of the rect and triangle because of its nature or the cylinder, the side parameter is to make the shape closer to the circle, so the drawing will be Within a cylinder, which is the inscribed circle range of the surface of the RECT base model, that is, the diagonal of the surface on the rect that is simulated by the cylinder is the entity 80.

Here are the relevant code, you can try, through different angles of observation, may be better understand some.

node =Newht. Node (); NODE.S3 (80, 80, 80); NODE.P3 (-50, 40, 50); NODE.S ({' Shape3d ': ' Cylinder ',    ' Shape3d.side ': 4,    ' Shape3d.image ': ' Img11 '});d M.add (node);=Newht. Node (); NODE.S3 (80, 80, 80); NODE.P3 (50, 40, 50); NODE.S ({' Shape3d ': ' Cylinder ',    ' Shape3d.side ': 3,    ' Shape3d.image ': ' Img11 '});d M.add (node);=Newht. Node (); NODE.S3 (80, 80, 80); NODE.P3 (-50, 40,-50); NODE.S ({' Shape3d ': ' Rect ',    ' Shape3d.image ': ' Img11 '});d M.add (node);=Newht. Node (); NODE.S3 (80, 80, 80); NODE.P3 (50, 40, 50); NODE.S ({' Shape3d ': ' Triangle ',    ' Shape3d.image ': ' Img11 '});d M.add (node);

In this way, the 3D pre-defined model of HT is covered and can be read in conjunction with the official HT document (http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html), which may be better understood. In the next section, we will focus on the 3d Max design export model for HT applications.

HTML5-based WebGL technology to build 3D scene (i)