3D impeller rotation based on HT for web vector

Tag: Professional title Ima Sha performs color--show article

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, and so on, what do you need to do with this model in the project? This is the time to model with a professional 3ds Max Tool. The model is then exported to an obj file through the 3ds Max Tool. The exported obj file is then referenced in the project so that the complex elements can be used Successfully.

In the article "the design 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 is a bit overqualified, no way. Blame only blame oneself do not understand 3ds Max tool, only can first 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. The Ht.Default.loadObj () method of the HT for Web is then called to read and parse the model file, after parsing is complete, by calling Ht. The Default.setshape3dmodel () method applies the model to the system, so that the line is applied to the model in the code that might be used, and the detailed code for the read and register of 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 completing the 3D model, we immediately created a 3D element. and add it to the Datamodel container, we need a 3D topology to display this 3D Element. The detailed creation code is as Follows:

var Datamodel = new Ht. Datamodel (); var g3d = new Ht.graph3d.Graph3dView (datamodel); g3d.seteye (n.); g3d.setdashdisabled (false); G3d.getview (). style.background = ' #4C7BBB '; g3d.addtodom ();

With a few simple property settings on the 3D topology to make the topology look comfortable, 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).

Our careful observation of the aircraft will find that the aircraft in front of the propeller color and fuselage, at a glance not too easy to notice its existence. Is it possible to get rid of the color? We are able to view the following MTL file to see if the aircraft propeller separates the fuselage into a single material, the contents of the MTL file such as the Following:

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 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 () The Finishfunc callback function in the method is added to the following code, for Example:

MODELMAP.PROPELLER.S3 = [1, 1.2, 1.2];modelmap.propeller.color = ' 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 make the propeller move up. Similar to the 2D impeller Rotation. Data binding can also be done on 3D models. To make the propeller spin, we need to set the rotation property of the propeller, which is different from the elements on the 3D. 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 to. Then we will be able to do data binding for the rotation properties 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 element's angle own definition property, We can change the angle property value to make the propeller rotate along the x axis, then we will change the angle property dynamically by the timer, and see if the propeller is really able to move:

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 really moving up. This timer makes the propeller do uniform Motion. however, when the propeller of the aircraft is taking off and landing, its rotational speed is not uniform, we have 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 Web animation to solve the Problem. About the content of the animation because more complex, not in-depth discussion here, and so on later have the opportunity to share with you the relevant content of the Animation. today, we will start with the basic use of animation, simple implementation of the propeller simulation takeoff and landing effect, detailed code such as the Following:

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 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 starts Again. Keep the propeller spinning.

Executing the code, you will find that the propeller is rotated in 1.5 seconds, and the rotation speed is slower and faster, then slows down until it stops, and then rotates again after 1.5 seconds. So the Cycle.

All right. Today's content ends here, and the entire demo can be viewed in the following video. finally, we enclose all the code of this demo.

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

<! DOCTYPE html>
 
 
 0.5 * t * t:0.5 * (1-(--t) * (t-2)); }, action:function (v, t) {plane.a (' angle ', v*math.pi*12                                0); }, 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);            }, 40); */}}); } </script> 

3D impeller rotation based on HT for web vector