Hundreds of examples of HTML5 learning HT graphics Components –3d Modeling

Http://www.hightopo.com/demo/pipeline/index.html

"Hundreds of HTML5 examples of learning HT graphics components –WEBGL 3D" mentioned in many cases HT does not require professional 3D modeling tools such as 3Ds Max and Blender to do many things, such as http://www.hightopo.com/g uide/guide/core/3d/examples/example_3droom.html this 3D telecom Room monitoring example is built through the APIs provided by HT:

However, the model in this example is quite regular, and the fire hydrant is made up of a ball + tact, and other graphics can be done with the basic Node and Shape object provided by HT:

But that doesn't mean the API can only do simple models, and the HT modeling plug-in introduced in the HT for WEB Modeling manual allows imaginative classmates to do all kinds of incredible things. Example of this dining chair: http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_custommodel.html

For this dining chair example, especially some irregular pots, glasses, Christmas trees and that love, many people wonder how we got out. In fact, it's quite simple to use the Createringmodel and Createextrusionmodel two build models in the HT for Web Modeling Manual, where Createringmodel, as the name implies, is used to build a ring model around a circle,  Createextrusionmodel is used to build a shape-based projection effect, the 3D models generated by these two functions are derived from the plane of 2D graphics, are built on the HT system in the construction of 2D irregular polygons using the Points and segments two array parameters are done, The meanings of Points and segments can be found in the HT for Web shapes guide:

can generate irregular 3D flooring: http://www.hightopo.com/guide/guide/core/shape/examples/example_floor.html

can generate irregular 3D pipelines: http://www.hightopo.com/guide/guide/core/shape/examples/example_polyline.html

So everyone should understand the principle, but the seats of the few irregular shape of the magic parameters are obtained, this is still the use of auxiliary tools: http://www.hightopo.com/demo/3dmodel/index.html,

This tool many years ago for writing examples at random, the code is very simple to see http://www.hightopo.com/demo/3dmodel/index.html source code can be, write relatively simple but very practical, how to export? Open the console and print out the sements and points parameters of the Shape object yourself, or wait until I have time to write a more complete example of import and export, or can you get up?

In fact, it is not only used for the modeling of node type object, but also can be used in the model to solve the connection, for example http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/ example_forcelayout3.html This 3D bomb example of Rio Tinto, a lot of people have been very cool, but I have been very uncomfortable with this rigid line of pipe connection, so the whim of a dog bone like two thick between the middle of the connection effect, the entire 3D The topology diagram example was suddenly tall on many:

Http://www.hightopo.com/demo/pipeline/index.html

The principle of this example is to set the edge of the connection to transparent invisible, and then for each Edge corresponding to a node node, the shape of the node is stretched and positioned to the line location instead of the line to display, and the node graph has not stretched before the following:

Here's another detail, by using the Creatematrix function, set a matrix coordinate transformation parameter to the two node position for each pipeline to the Mat property of the style, the matrix budget does not understand also does not matter, directly copy the example code, To make it easy for everyone to understand, I've got a two-node connection. A simpler example for reference:

Today is just a point, "the HT for Web Modeling Manual" also has a number of API functions, as long as the imagination can also toss out countless tricks, followed by the use of HT for Web-based WebGL 3D Custom Modeling features more practical examples.

Http://www.hightopo.com/demo/pipeline/index.html

Ht. Default.setshape3dmodel (' Custom ', Ht. Default.createringmodel ([0.5, 0.5,-0.2, 0, 0.5,-0.5], [1, 3]) var colorlist = [' #FFAFA4 ', ' #B887C5 ', ' #B9EA9C ', ' #CFD9E7 ', ' #4590B8 ', ' #FF9C30 '], Colorlen =Colorlist.length;var Randomcolor = function() {var ran = math.random () *Colorlen; ReturnColorlist[math.floor (RAN)];}; var init = function() {var dm = newHt. Datamodel (), g3d = Window.g3d = newHt.graph3d.Graph3dView (DM); g3d.getbrightness = function () {return null; }; g3d.ismovable = function (node) {return node.s (' Shape3d ')!== ' custom '; }; G3d.addtodom (); var edgelist =Initdatamodel (DM), forcelayout = newHt.layout.Force3dLayout (G3D); forcelayout.onrelaxed = function() {Edgelist.foreach (updatepipeline);}; Forcelayout.start (); Initformpane (g3d);}; var Initdatamodel = function(DM) {var root =CreateNode (DM), INode, JNode, j, edgelist =[]; for (var i = 0; i < 3; i++) {INode =CreateNode (DM); Edgelist.push (Createedge (DM, Root, INode)); for (j = 0; J < 3; J + +) {JNode =CreateNode (DM); Edgelist.push (Createedge (DM, INode, JNode)); }} returnEdgelist;}; var createnode = function(DM) {var node = newHt. Node (); NODE.S ({' Shape3d ': ' Sphere ', ' Shape3d.color ': Randomcolor ()}); NODE.S3 (40, 40, 40); Dm.add (node); Returnnode;}; var Createedge = function(DM, Node1, Node2) {var node = newHt. Node (); NODE.S ({' Shape3d ': ' Custom ', ' Shape3d.color ': ' #ECE0D4 ', ' layoutable ': false}); Dm.add (node); var edge = newHt. Edge (Node1, Node2); Edge.a (' Pipeline ', node); EDGE.S (' Edge.color ', ' rgba (0, 0, 0, 0) '); Dm.add (Edge); ReturnEdge;}; var updatepipeline = function(Edge) {var pipeline = Edge.a (' Pipeline ')); PIPELINE.S3 (1, 1, 1); PIPELINE.P3 (0, 0, 0); var Node1 =Edge.getsourceagent (), Node2 =Edge.gettargetagent (); PIPELINE.S (' Mat ', Creatematrix (NODE1.P3 (), NODE2.P3 (), 20));}; var Creatematrix = function(P1, p2, width) {var VEC = [p2[0]-p1[0], p2[1]-p1[1], p2[2]-p1[2]], dist =Ht. Default.getdistance (P1, p2); ReturnHt. Default.creatematrix ({s3: [Width, dist, width], R3: [MATH.PI/2-Math.asin (vec[1]/dist), Math.atan2 (Vec[0], vec[2]), 0], Rotationmode: ' XYZ ', T3: [(P1[0]+p2[0])/2, (P1[1]+p2[1])/2, (p1[2]+p2[2])/2]});}; var Initformpane = function(G3D) {var formpane = newHt.widget.FormPane (); Formpane.setwidth (230); Formpane.setheight (125); Formpane.addtodom (); var view =Formpane.getview (); View.style.background = ' Rgba (186, 186, 186, 0.7) '; View.style.top = ' 10px '; View.style.left = ' Auto '; View.style.right = ' 7px '; Formpane.addrow ([{element: ' Headlight: ', font: ' Bold 12px Arial, Sans-serif '}, {id: ' Disable ', CheckBox: {label: ' Disable ', value:g3d.isHeadlightDisabled (), onvaluechanged:function< c3> (OV, NV) {g3d.setheadlightdisabled (nv);}} }], [0.1]); Formpane.addrow ([], [0.1], 1.01, {background: ' #43AFF1 '}); [' Color ', ' Range ', ' Intensity '].foreach (function(name) {var obj = {Id:name}, func = function(OV, NV) {g3d [' setheadlight ' + name] (NV);}; if (name = = = ' Color ') Obj.colorpicker = {instant:true, value:g3d[' getheadlight ' + Name] (), ONVALUEC Hanged:func}; else Obj.slider = {min:0, max:name = = = ' Range '? 20000:3, step:0.1, value:g3d[' Getheadligh T ' + Name] (), onvaluechanged:func}; Formpane.addrow ([name, obj], [0.1 ])           ;}; 

Hundreds of HTML5 example learning HT Graphics Component –3d Modeling article