Today, 3D models are used in a variety of different fields. They are used in the medical industry to make accurate models of organs; The film industry uses them for moving people, objects and realistic movies; The video game industry uses them as resources for computers and video games; They are used in science as precise models of compounds; The construction industry uses them to show proposed buildings or landscapes; Engineering uses them to design new devices, vehicles, structures and other applications. In recent decades, 3-d geological models have begun to be constructed in the earth sciences, and 3-d models are often animated, for example, in feature films and computer and video games. They can be used in 3d modeling tools or by themselves. In order to make it easy to animate, some extra data is often added to the model. For example, some 3d models of humans or animals have complete skeletal systems so that the movement looks more realistic and can be controlled through joints and bones.

All of these make us front-end developers feel that if we can achieve 3D effects without learning Unity3D or other game development tools, and can accurately control the movement or direction by code… Therefore, I made use of 3D components in HT For Web to realize a small example, using most of the functions of 3D components in HT. The purpose of making this example is to have a good grasp of 3D components and try to put them into an example, so that others can refer to them when they need. However, since 3D effects have never been realized before, Plus the manual is not complete, so this example is still a little difficult for me.

This example location: www.hightopo.com/demo/3DTopo…

Let’s take a look at the overall implementation:

With HT for Web, the existing 3D template is not a problem to create a three-layer backplane, the problem is how to put the “computer” and “cabinet components” of the first layer in the picture on it? I went down the file in OBJ format on the Internet, and then I used the function HT.default. loadObj(objUrl, mtlUrl, params) in HT to load the model into it. Params part can refer to www.hightopo.com/guide/guide… , the code is as follows:

Ht.default. loadObj('obj/ cabinet component 1.obj', 'obj/ cabinet component 1. MTL ', { cube:true, center:true, shape3d:'box', finishFunc:function(modelMap, array, rawS3){ window.rawS3=rawS3;if(modelMap) {device2= createNode('box', floor1); device2.p3([x1-120, y1+13, z1+60]); Device2. S3 (rawS3); CreateEdge (device1 device2); device3= createNode('box', floor1); Device3. S3 (rawS3); device3.p3([x1+120, y1+13, z1+60]); CreateEdge (device1 device3); }}});Copy the code

“Computer” of a red can rotating above the “warning”, is relying on the ht. The Default. The setShape3dModel function (ht) for Web modeling manual registered a 3 d model, in ht, encapsulated modeling function has a lot of, is the basis of is a sphere, cylinder, cube, etc. So what I’m doing here is creating the circle method createRingModel to generate the outer ring of the warning, and the top part of the exclamation mark is the sphere created with createSmoothSphereModel, The lower part of the exclamation point is to use createSmoothCylinderModel to construct the cylinder. I started using the 3 d model directly encapsulation of good function, lead to later don’t know what parameter is used in the function for, but also don’t understand is how to form a 3 d model, and then again to see themselves in front of the “model”, just know originally a surface that is used by the 3 d model is the most basic triangle face, Later, the complex surface is also formed by multiple triangular surfaces, which are rotated around a specific axis. Of course, this axis is up to you. Different axes can generate different shapes. As for how to rotate the 3D model, addScheduleTask(Task) method is packaged in HT. I called setRotation, a rotation function packaged in HT, in the third-layer Task to set the rotation sequence and direction, and specify the rotation object. Here’s how to customize the “warning” 3D model (note: since the model in this example is a custom combination, use the “all.blend” style property to set the color of the whole model) :

var ringModel = ht.Default.createRingModel([8, 1, 10, 1, 10, -1, 8, -1, 8, 1], null.null.false.false, 100,);  
var sphereModel = ht.Default.createSmoothSphereModel(8, 8, 0, Math.PI*2, 0, Math.PI, 2);  
var cylinderModel = ht.Default.createSmoothCylinderModel(8, true.true, 1, 2, 0, Math.PI*2, 8);  
var arr =[ { r3: [Math.PI/2, 0, 0],  
        color: 'red'},{ shape3d: sphereModel, t3: [0, 4, 0], color:'red'},{ shape3d: cylinderModel, t3: [0, 3, 0], color:'red'}]; ht.Default.setShape3dModel('alarm', { shape3d: arr });Copy the code

To achieve the 3D interface to display 2D images, just follow the usual path, because the root of ht Graph3dView and other components are divs. To generate images on div, we use native JS, new Image(), and then assign the SRC and size of the Image and add them to the 3D panel. Notice that this is added to the underlying DIV of 3d with g3d.getView().appendChild. We can also see the dotted line flow on the pipe. This is done by changing the “shape3d.uv.offset” parameter to make the pipe flow special. Please refer to the HT for Web shape manual for details.

To move a 2D image on a 3D pipeline, use g3d.toviewPosition to obtain the 2D coordinates of the 3D model. The parameters in this function are the 3D coordinates of the 3D model. We can directly pass the points on the Polyline pipeline into the toViewPosition function. The three functions getLineCacheInfo, getLineLength and getLineOffset have been encapsulated in HT. In this way, two-dimensional coordinates can be directly obtained, and then the img coordinates can be set. The following is the code for moving the IMG image on the pipeline:

var delta = 10; params={ frames: Infinity, interval:50, action:function(v, t){  
        var length = (polyline.a('total') || 0) % polyline.a('length') + delta;  
        var cache = ht.Default.getLineCacheInfo(polyline.getPoints(), polyline.getSegments());  
        var lineLength = ht.Default.getLineLength(cache);  
        var offset =ht.Default.getLineOffset(cache, length); arr= [offset.point.x, offset.point.y, offset.point.z];  
        var position =g3d.toViewPosition(arr); img.style.left= (position.x - 5) + 'px'; img.style.top= (position.y - 5) + 'px'; polyline.a('total', length); }}; anim= ht.Default.startAnim(params);  Copy the code

You can see the words “SDH” on the second cube in the image. I did this by setting shape3d.top.img: ImgURL is the relative path of the image, the name of the img declared in HT (hT.default. setImage), or the image constructed in JSON format. In HT, when 2D text is displayed on 3D, “jagged” will appear around the font. In this case, just set label.transparent: true.

We can also see that there are two special polygons “parallelogram” and “trapezoid” on the second layer, because I don’t know how to use createExtrusionModel (HT for Web modeling manual). The parallelogram depends on the createParallelogramModel function, which is a simpler function, CreateExtrusionModel (array, segments, top, bottom, Resolution, repeatUVLength, tall, elevation) Segments refer to the HT for Web shape manual. Top and bottom allow you to choose whether there is a top or a bottom. The resolution differential is the number of segments. When we draw a curve, we may only need to confirm several individual points and divide it into multiple segments on the line between each two points, so that the line segment will become smooth. Ht encapsulates this parameter for users to operate these lines easily, and repeatUVLength is blank by default. After setting the value, the top and bottom maps will be repeated according to the specified length value. The height of the TALL model is 5 by default, and the Y-axis position of the center of the Elevation model is 0 by default. Setting this value can make the plane on Xz rotate around the Y-axis.

The effect of a ring at the bottom is realized by an algorithm. The ring has to confirm how many elements there are on the ring, and then calculate the Angle between each two. The position of each element is calculated by sine and cosine, and the following code is obtained:

Equipment names = [' equipment 2 ', '3', 4 ' 'equipment,' equipment 5 ', 6 ', 'equipment' equipment 7 ', 'equipment, 8', 'equipment 9']; names.forEach(function(the name, the index) {x= 400, y = 200, angle = 45, r = 120; x= x3 + Math.sin((2 * Math.PI / 360) * angle * index) *r; y= z3 + Math.cos((2 * Math.PI / 360) * angle * index) *r; device= createRect ([x, y3 + 15, y], [w * 0.1, 15, h * 0.1], ' ', ' 'The floor3); createEdge(device5, device); });Copy the code