3D Impeller rotation and HT Impeller Based on ht for Web vector

3D Impeller rotation and HT Impeller Based on ht for Web vector

In the previous article "2D impeller rotation based on HT for Web vector", the application of impeller rotation in 2D is described. Today we will talk about the application of impeller rotation in 3D.

Various elements can be created on the 3D topology. Some conventional 3D models are provided in the HT for Web system, but for those complex models, for example, cars, people, and other models are powerless. Do you need to use such models in the project? In this case, you need to use a professional 3ds Max tool for modeling, and then use the 3ds Max tool to export the model to an obj file, and then reference the exported obj file in the project, in this way, the complex elements can be used successfully.

The introduction of introducing the obj file from HT for Web is mentioned in the article "design of HT graphical components (iv)". I will not repeat it here, let's take a look at what the Demo model today looks like:

 

Hey hey, do you feel that today's models are a little useless? No way, you can't blame yourself for not understanding the 3ds Max tool. Instead, you can use this familiar model for Demo demonstration.

First, we need a 3ds Max tool to export the model to obj and mtl files, and then call the HT for Web. default. the loadObj () method reads and parses the model file. After the parsing is complete, call the ht. default. the setShape3dModel () method registers the model to the system, so that the model can be applied in subsequent code. The specific code for reading and registering the model file is as follows:

ht.Default.loadObj('plane.obj', 'plane.mtl', {                        center: true,    r3: [0, -Math.PI/2, 0], // make plane face right    s3: [0.15, 0.15, 0.15], // make plane smaller    finishFunc: function(modelMap, array, rawS3){        if(modelMap){              ht.Default.setShape3dModel('plane', array);            var plane = new ht.Node();            plane.s3(rawS3);            plane.s({                'shape3d': 'plane',                'shape3d.scaleable': false,                'wf.visible': true,                'wf.color': 'white',                'wf.short': true            });            dataModel.add(plane);        }    }});

 

After registering the 3D model, we immediately created a 3D element and added it to the dataModel container. In this case, we need a 3D topology to display the 3D element, the specific creation code is as follows:

var dataModel = new ht.DataModel();var g3d = new ht.graph3d.Graph3dView(dataModel);g3d.setEye(200, 50, 300);g3d.setDashDisabled(false);g3d.getView().style.background = '#4C7BBB';g3d.addToDOM();

 

Some simple attribute settings are made on the 3D topology to make the topology look more comfortable, so we can see what the aircraft model we created looks like.

How about creating a complex model doesn't seem to be as complicated as you think (complicated things are done by the artist ).

When we carefully observe the plane, we will find that the propeller color in front of the plane is the same as that in the fuselage. It is not easy to notice its existence at a Glance. Can we change its color? We can check the mtl file to see whether the aircraft propeller is separated from the fuselage into a separate material. The mtl file contains the following content:

newmtl body    Ns 10.0000    Ni 1.5000    d 1.0000    Tr 0.0000    Tf 1.0000 1.0000 1.0000     illum 2    Ka 0.3608 0.4353 0.2549    Kd 0.3608 0.4353 0.2549    Ks 0.0000 0.0000 0.0000    Ke 0.0000 0.0000 0.0000newmtl propeller    Ns 10.0000    Ni 1.5000    d 1.0000    Tr 0.0000    Tf 1.0000 1.0000 1.0000     illum 2    Ka 0.3608 0.4353 0.2549    Kd 0.3608 0.4353 0.2549    Ks 0.0000 0.0000 0.0000    Ke 0.0000 0.0000 0.0000

 

As we think, the fuselage and propeller of the airplane model are separated by two independent materials, and the material of the propeller is defined as propeller. Therefore, we can independently control the fuselage and propeller, let's modify the propeller color. Add the following code to the finishFunc callback function in loadObj:

modelMap.propeller.s3 = [1, 1.2, 1.2];modelMap.propeller.color = ‘yellow';

 

In the code, we not only changed the color of the propeller, but also scaled the propeller to increase the width and length of the propeller.

Now, even if the model is complete, the next thing we need to do is to let the propeller move, similar to the 2D impeller rotation. We can also bind data on the 3D model. To make the propeller rotate, we need to set the rotation attribute of the propeller. Unlike the 3D element, setting the rotation attribute of the 3D element requires setting an array to define the rotation values in the three directions of 3D.

Let's first try to rotate the propeller 45 degrees along the X axis:

modelMap.propeller.r3 = [Math.PI / 4, 0, 0];

 

Sure enough, then we can bind data to the rotation attribute of the propeller:

modelMap.propeller.r3 = {    func: function(data){        return [data.a('angle'), 0, 0];    }};

 

We bind the Rotation angle on the X axis of the propeller to the angle custom attribute of the element. We can change the angle attribute value to make the propeller rotate along the X axis, next we will use the timer to dynamically change the angle attribute to see if the propeller can actually be moved:

window.setInterval(function() {    var rotation = plane.a('angle') + Math.PI / 10;    if (rotation > Math.PI * 2) {        rotation -= Math.PI * 2;    }    plane.a('angle', rotation);}, 40);

 

The propeller is moving. This timer allows the propeller to rotate at a constant speed, but the propeller of the airplane does not rotate at a constant speed when it starts and lands, what should we do if we want to simulate the rotation speed of the propeller when the plane starts and lands? At this time, we can consider using animations in the HT for Web to solve this problem. Due to the complexity of the animation content, we will not discuss it in depth here, I will have the opportunity to share with you the relevant content of the animation. Today I will discuss the basic usage of the animation, and briefly implement the effect of simulating the propeller to fly and land. The specific code is as follows:

var params = {    delay: 1500,    duration: 20000,    easing: function(t){        return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));    },    action: function(v, t){        plane.a('angle', v*Math.PI*120);    },    finishFunc: function(){        ht.Default.startAnim(params);    }};ht.Default.startAnim(params);

 

Let's analyze the Code:

1. delay attribute: defines the pause time before the animation is played;

2. duration Attribute: defines the animation duration;

3. easing function: defines the animation easing function;

4. action function: the action function must be provided to implement attribute changes during the animation process. Set the angle attribute here;

5. finishFunc function: the function called after the animation ends. Here, the animation is started to keep the propeller rotating.

Run the code and you will find that the propeller enters the rotation state after 1.5 seconds, and the rotation speed changes from slow to fast, then slows down until it stops, and then continues to rotate after 1.5 seconds.

Now, the content of today is over. You can view the running effect of the entire Demo in the video below, and then attach all the code of this Demo.

Http://v.youku.com/v_show/id_XMTI5NDI5MzYyOA==.html

 

<!DOCTYPE html>
 
 
 
 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.