3D impeller rotation based on HT for web vector

In the previous article, " 2D impeller rotation based on the HT for web Vector " describes the application of impeller rotation in 2D , today we will talk about impeller rotation in 3D applications.

A variety of primitives can be created on a 3D topology , and some conventional 3D models are available in the HT for Web system, but for models that are more complex, such as cars, people, etc. Is it necessary to use such a model in the project? It's time to model with a professional 3DS max tool, then export the model to an obj file with the 3DS Max tool and then reference the exported obj file in the project, so you can successfully use the complex elements.

In the article "thedesign of HT graphic components (iv)", I mentioned the introduction of HT for Web introduction of obj files, here I do not repeat the introduction, we first look at today as a demonstration of the demo model looks like:

Hey, is not feeling today's model some overqualified, no way, strange only blame themselves do not understand 3ds max tools, can only use this familiar model to do demo demo.

First we need to have 3ds max tools to export the model to obj and MTL files, and then call HT for WEB ht. The Default.loadobj () method reads and parses the model file, after parsing is complete, by calling Ht. The Default.setshape3dmodel () method registers the model with the system so that it can be applied to the model in subsequent code, and the 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 smallerFinishfunc:function(Modelmap, array, rawS3) {if(MODELMAP) {ht. Default.setshape3dmodel (' Plane ', array); varPlane =Newht.            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, where we need a 3D topology to display this 3D entity, with the following creation code:

var New ht. Datamodel (); var New Ht.graph3d.Graph3dView (Datamodel); G3d.seteye (N.); g3d.setdashdisabled (false = ' #4C7BBB '; G3d.addtodom (); 

We made some simple property settings on the 3D topology to make the topology look more comfortable, so we can see what the model of the aircraft we've created looks like.

Well, creating a complex model doesn't seem to be as complicated as it seems (complicated things are done by the artist).

We look closely at the aircraft will find that the aircraft in front of the propeller color and the fuselage, at a glance it is not easy to notice its existence, it can change its color? We can check the following MTL file to see if the aircraft propeller separates the fuselage into a material independently, the contents of the MTL file are as follows:

NEWMTL Body Ns10.0000Ni1.5000D1.0000Tr0.0000Tf1.0000 1.0000 1.0000Illum2Ka0.3608 0.4353 0.2549Kd0.3608 0.4353 0.2549Ks0.0000 0.0000 0.0000Ke0.0000 0.0000 0.0000NEWMTL Propeller Ns10.0000Ni1.5000D1.0000Tr0.0000Tf1.0000 1.0000 1.0000Illum2Ka0.3608 0.4353 0.2549Kd0.3608 0.4353 0.2549Ks0.0000 0.0000 0.0000Ke0.0000 0.0000 0.0000

As we thought, the fuselage and propeller of the aircraft model are separated by two separate materials, and the propeller's material name is defined as propeller, so we can independently control the fuselage and propeller, then we will change the color of the propeller, in Loadobj () Add the following code to the Finishfunc callback function in the method:

MODELMAP.PROPELLER.S3 = [1, 1.2, 1.2= ' yellow ';

In the code, we have not only changed the color of the propeller, we have also scaled the propeller so that the width and length of the propeller become larger.

Here, the model is finished, the next thing to do is to let the propeller move, and 2D impeller rotation similar to the 3D model can also do data binding, in order to let the propeller rotation, we need to set the rotation property of the propeller, and 3D on the elements of the different is, Setting the Rotation property of a 3D entity requires setting an array that defines the rotation values in three directions on the three-dimensional.

Let's try to have the propeller rotate 45 degrees along the x-axis to try it out:

MODELMAP.PROPELLER.R3 = [Math.pi/4, 0, 0];

Sure enough, then we can do data binding for the rotation property of the propeller:

ModelMap.propeller.r3 = {    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, and we can make the propeller move along the x-axis by changing the value of the Angle property, then we will change the angle property dynamically by the timer, and see if the propeller can actually be moved:

Window.setinterval (function() {    var rotation = plane.a (' angle ') + MATH.PI/10;     if (Rotation > Math.PI * 2) {        -= Math.PI * 2;    }    Plane.a (' angle '40);

The propeller really moved up, this timer let the propeller do uniform motion, but the aircraft propeller in takeoff and landing when its rotational speed is not uniform, we want to simulate the aircraft takeoff and landing when the propeller rotation speed how to deal with it? This time we can consider using the HT for the Web animation To solve this problem, about the content of the animation is more complex, not in-depth discussion here, and so on, and then have the opportunity to share with you about the content of the animation, Today, we will start with the basic use of animation, simple implementation of the propeller simulation takeoff and landing effect, the specific code is as follows:

var params = {        20000, function(t) {              return (T *= 2) < 1? 0.5 * t * t:0.5 * (1-(--T) * (t-2));    },    function(V, t) {        plane.a (' Ang Le ', v*math.pi*120);    },    function() {        ht. Default.startanim (params);    }}; Ht. Default.startanim (params);

Let's analyze the code:

1. Delay property: Defines the pause time before the animation plays;

2. Duration properties: Defines the duration of the animation;

3. Easing function: Define animation easing function;

4. Action function: The action function must be provided to implement the property changes in the animation process, where the angle property is set;

5. Finishfunc function: The function called after the end of the animation, where the animation is started, so that the propeller constantly rotating.  

Run the code, you will find that the propeller in 1.5 seconds after the rotation, and the rotation speed from slow to fast, then slow to stop, and then after 1.5 seconds to continue to rotate, so the cycle.  

Well, today's content to the end of this, the entire demo running effect can be viewed through the following video, and finally attached to this demo of all the code.

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

<! DOCTYPE html> forweb-plane</title> <meta charset= "UTF-8" name= "viewport" content= "User-scalable=yes, width=600" > <script src= ". /.. /.. /build/ht-debug.js "></script> <script src=". /.. /.. /build/ht-obj-debug.js "></script> <script>functioninit () {varDatamodel =Newht.                Datamodel (); varG3d =NewHt.graph3d.Graph3dView (Datamodel); G3d.seteye (200, 50, 300); G3d.setdashdisabled (false); G3d.getview (). Style.background= ' #4C7BBB ';                                G3d.addtodom (); 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 smallerFinishfunc:function(Modelmap, array, rawS3) {if(modelmap) {MODELMAP.PROPELLER.R3={func:function(data) {return[Data.a (' angle '), 0, 0];                            }                            }; //Make propeller a litter biggerMODELMAP.PROPELLER.S3 = [1, 1.2, 1.2]; ModelMap.propeller.color= ' Yellow '; Ht. Default.setshape3dmodel (' Plane ', array); varPlane =Newht.                            Node ();                            PLANE.S3 (rawS3); PLANE.S ({' Shape3d ': ' Plane ',                                ' Shape3d.scaleable ':false,                                ' Wf.visible ':true,                                ' Wf.color ': ' White ',                                ' Wf.short ':true                            });                                            Datamodel.add (plane); varparams ={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); /*Window.setinterval (function () {var rotation = plane.a (' angle ') + MATH.PI/10;                                if (Rotation > Math.PI * 2) {rotation-= Math.PI * 2;                            } plane.a (' angle ', rotation); }, +);*/                        }                    }                }); }        </script> 
3D impeller rotation based on HT for web vector