Three.js to model multiple animations toggle display (FBX)

Source: 80087471

Brief introduction

The previous section wants to finish the animation chapter directly. The last thought, did not do the Model animation switch case. In this, add a chapter to the question of how to switch between multiple animations of a model.

Case implementation

Case View Address: http://www.wjceo.com/blog/threejs/2018-04-25/153.html

First, we need to first import the model, before the case has been told how to import, here do not repeat.

//加载模型

var New three. Fbxloader (); Loader.load (function  (mesh) {    + =    ); Scene.add (mesh);});

After importing the model, we need to look at the length of the animation of the current model, that is, the length, mesh.animations if there is only one length, representing only one animation, if there are more than one animation model. Then we need to iterate through mesh.animations the array, creating one for each animation action , called after:

New three. Animationmixer (mesh); var // all the animated arrays  for (var i=0; i<mesh.animations.length; i++) {    = mixer.clipaction (mesh.animations[i]);}

When switching animations, all we need to do is to pause all of the current ones except the one that needs to be played, so that the animation that needs to be played is action action called the play() event:

function () {    for (var j=0; j<actions.length; j + +) {        if(j = = = i) {            Actions[j].play ();        }         Else {            actions[j].stop ();        }    " Action "+i);

In this way, we have implemented an animated switch to the model.

Case code

<!    DOCTYPE html>html, body {margin:0; Height:100%;        } canvas {Display:block; }    </style>varrenderer, camera, scene, GUI, light, stats, controls, Meshhelper, mixer, Action,datgui; varClock =Newthree.    Clock (); functionInitrender () {renderer=NewThree. Webglrenderer ({antialias:true});        Renderer.setpixelratio (Window.devicepixelratio);        Renderer.setsize (Window.innerwidth, window.innerheight); Renderer.setclearcolor (0xeeeeee); Renderer.shadowMap.enabled=true; //tell the renderer that a shadow effect is requiredDocument.body.appendChild (renderer.domelement); }    functionInitcamera () {camera=NewThree. Perspectivecamera (Window.innerwidth/window.innerheight, 0.1, 2000); Camera.position.set (100, 200, 300 ); }    functionInitscene () {Scene=Newthree.        Scene (); Scene.background=NewThree. Color (0xa0a0a0 ); Scene.fog=NewThree. Fog (0XA0A0A0, 200, 1000 ); }    //initializes the DAT. GUI simplifies test flow    functionInitgui () {//declares an object that holds relevant data for a requirement modificationGUI ={helper:true //Model Guides        }; Datgui=Newdat.        GUI (); //Add the Settings property to the GUI, Gui.add (object, property, minimum, maximum)Datgui.add (GUI,"helper"). OnChange (function(e) {meshhelper.visible=e; })    }    functioninitlight () {Scene.add (NewThree. Ambientlight (0x444444)); Light=NewThree. DirectionalLight (0XFFFFFF); Light.position.set (0, 200, 100 ); Light.castshadow=true; Light.shadow.camera.top= 180; Light.shadow.camera.bottom=-100; Light.shadow.camera.left=-120; Light.shadow.camera.right= 120; //tell the parallel light to turn on the shadow projectionLight.castshadow =true;    Scene.add (light); }    functionInitmodel () {//Accessibility Tools        varHelper =NewThree. Axeshelper (50);        Scene.add (helper); //Flooring        varMesh =NewThree. Mesh (NewThree. Planebuffergeometry (2000, 2000),NewThree. Meshphongmaterial ({color:0xffffff, depthwrite:false } ) ); Mesh.rotation.x=-MATH.PI/2; Mesh.receiveshadow=true;        Scene.add (mesh); //Add a floor secant        varGrid =NewThree. Gridhelper (+, 0x000000, 0x000000 ); Grid.material.opacity= 0.2; Grid.material.transparent=true;        Scene.add (GRID); //Load Model        varLoader =Newthree.        Fbxloader (); Loader.load ("/LIB/MODELS/FBX/NARUTO.FBX",function(Mesh) {console.log (mesh); //Add bone AssistMeshhelper =Newthree.            Skeletonhelper (mesh);            Scene.add (Meshhelper); //each part of the setup model can be projectedMesh.traverse (function(child) {if(Child.ismesh) {Child.castshadow=true; Child.receiveshadow=true;            }            } ); //Animationmixer is the animation player for a particular object in the scene. When multiple objects in a scene are animated independently, you can use one animationmixer for each objectMixer = Mesh.mixer =Newthree.            Animationmixer (mesh); //Mixer.clipaction Returns a Animationaction object parameter that can control the animation requires a Animationclip object            //Animationaction.setduration Set the time required for a loop, which is currently set for one second            //tell Animationaction to start the action            //action = mixer.clipaction (Mesh.animations[0]);            //Action.play ();            varactions = [];//all the animated arrays            varAnimations = Datgui.addfolder ("animations");  for(vari=0; i<mesh.animations.length; i++) {createaction (i); }            functioncreateaction (i) {actions[i]=mixer.clipaction (Mesh.animations[i]); gui["Action" +i] =function () {                     for(varj=0; j<actions.length; J + +){                        if(J = =i)                        {Actions[j].play (); }                        Else{actions[j].stop ();                }                    }                }; Animations.add (GUI,"Action" +i); }            //Add a button that pauses all animationsGui.stop =function(){                 for(vari=0; i<actions.length; i++) {actions[i].stop ();            }            }; Datgui.add (GUI,"Stop"); MESH.POSITION.Y+ = 100;        Scene.add (mesh);    }); }    //initializing the performance plug-in    functioninitstats () {stats=NewStats ();    Document.body.appendChild (Stats.dom); }    functionInitcontrols () {Controls=Newthree.        Orbitcontrols (camera, renderer.domelement); //Set the center point of the controller        //controls.target.set (0, 0);        //If you are using the Animate method, remove this function        //controls.addeventlistener (' Change ', render);        //whether the damping or rotation means inertia when the animation is used in a loopControls.enabledamping =true; //Dynamic damping coefficient is the mouse dragging and dragging rotation sensitivity        //controls.dampingfactor = 0.25;        //Whether you can scaleControls.enablezoom =true; //whether to rotate automaticallyControls.autorotate =false; Controls.autorotatespeed= 0.5; //set the maximum distance from the camera distance from the origin pointControls.mindistance = 1; //set the maximum distance from the camera distance from the origin pointcontrols.maxdistance = 2000; //whether to open the right-click dragControls.enablepan =true; }    functionrender () {varTime =Clock.getdelta (); if(mixer) {mixer.update (time);    } controls.update (); }    //functions triggered by window changes    functiononwindowresize () {Camera.aspect= Window.innerwidth/Window.innerheight;        Camera.updateprojectionmatrix ();    Renderer.setsize (Window.innerwidth, window.innerheight); }    functionAnimate () {//Update Controllerrender (); //Update performance plug-insstats.update ();        Renderer.render (scene, camera);    Requestanimationframe (animate); }    functionDraw () {//Compatibility judgment        if(!Detector.webgl) detector.addgetwebglmessage ();        Initgui ();        Initrender ();        Initscene ();        Initcamera ();        Initlight ();        Initmodel ();        Initcontrols ();        Initstats ();        Animate (); Window.onresize=onwindowresize; }</script>
Three.js to model multiple animations toggle display (FBX)