当前位置：网站首页>Three. JS introductory learning notes 15: threejs frame animation module

Three. JS introductory learning notes 15: threejs frame animation module

2022-07-07 15:49:00 【Jiang Duoduo_ Mostly Harmless 】

Reference learning
http://www.webgl3d.cn/Three.js/

Edit keys and parse playback

Threejs It provides a series of methods for users to edit and play key frame animation API, For example, keyframes KeyframeTrack、 clip AnimationClip、 operation AnimationAction、 Mixer AnimationMixer.

Insert picture description here

Edit keyframe ：

Keyframe animation is through keyframes KeyframeTrack And editing AnimationClip Two API To complete , In actual development, if you need to make a frame animation of a complex 3D model , For example, walking alone 、 Running and other actions , Generally, art passes 3dmax、blender Wait for the software to edit , There is no need for programmers to implement .

Play keys

By manipulating the AnimationAction And mixers AnimationMixer Two API Play the existing frame animation data .

Mixer THREE.AnimationMixer() The parameter of is the parent object of the two grid models written in the case code group, Parameters in actual development Group You can also load the model object returned by the external model .

When playing keyframe animation , Notice in the rendering function render() In the implementation of mixer.update( Render interval ) Tell the frame animation system Threejs Time interval between two renderings , The time interval can be obtained by Threejs A clock class provided Clock Realization .

summary

1. Need a parent group , Add mesh objects to it , Name the mesh object
2. Edit keyframe
(1) Application KeyframeTrack And editing AnimationClip Two API
(2) new THREE.KeyframeTrack You can set the position in the key frame , Color , Zoom and other properties , Use time points and changing values
(3) Set playback time duration
(4) Create clip clip object , name , The duration of the , Keyframes .
3. Play keys
operation AnimationAction And mixers AnimationMixer Two API Play
(1) new THREE.AnimationMixer(group); Play the frame animation of all sub objects in the Group
(2)clip As a parameter , Through the mixer clipAction Method returns an operation object AnimationAction
(3) By manipulating the Action Set playback mode , Adjust the playback speed , Whether to circulate
(4) Start playing
4. Rendering
(1) Create a clock object
(2) Perform the render operation , Request rendering again , Render the next frame , Update mixer related time .

effect

Insert picture description here

KeyframeTrack

http://www.webgl3d.cn/threejs/docs/#api/zh/animation/KeyframeTrack

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
<!--  The adaptive  -->

<style>
* {
    
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/three.js"></script> 
<script>

      init();

        function init() {
    
            //renderer
			var renderer = new THREE.WebGLRenderer({
    
            antialias:true,
// alpha:true 
        });
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
             // init scene
                var scene = new THREE.Scene();
			     scene.background = new THREE.Color( 0xf0f0f0 );
            
             // init camera
                var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set(15,15,15);
// camera.lookAt(new THREE.Vector3(0,0,0));
                camera.lookAt( scene.position );
                scene.add(camera);
            

             //light
          	var light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 3, 1, 1 ).normalize();// Vector attribute vector is converted to unit vector , Set the direction to be the same as the original vector , The length is 1
// light.intensity=1.5;// Strength 
				scene.add(light);
            

   // Animated mesh model 
            var material1 = new THREE.MeshLambertMaterial({
    
            color:0x0000ff      
                }); 
            var geometry1 = new THREE.CubeGeometry(5,2,3);
            var mesh1 = new THREE.Mesh(geometry1, material1);
            mesh1.name="Box";
            mesh1.position.set(0,2,0);
   
            var material2 = new THREE.MeshLambertMaterial({
    
            color:0x00ff00      
                }); 
            var geometry2 = new THREE.SphereGeometry(1, 50, 50);
            var mesh2 = new THREE.Mesh(geometry2, material2);
            mesh2.name="Sphere"; 
            mesh2.position.set(0,5,0);
    
            
            var group = new THREE.Group();
            group.add(mesh1,mesh2);
            scene.add(group);
            
            scene.add(group);
            renderer.render(scene, camera);  
            
     
    
  
 // edit group Sub object mesh model mesh1 and mesh2 Frame animation data 
      
  //  Create a Box Key frame data of the object 
            var times = [0, 10];// Keyframe event array , Discrete time point sequence 
            var values = [0,0,0,10,0,0]// An array of values corresponding to the point in time 
            // Create a position keyframe object ：0 Time corresponding position 0,0,0,10 Time corresponding position 150,0,0
            var posTrack = new THREE.KeyframeTrack('Box.position', times, values);
            // Create yan'e keyframe object ：10 Time corresponds to color 1,0,0 20 Time corresponds to color 0,0, 1
            var colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
            //  Create a Sphere Key frame data of the object , from 0-20 Period of time , Size scale The zoom 3 times 
            var scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);
           
            //duration  Determines the default playback time , Generally, the largest event of all frame animations 
            //duration Partial , Frame animation data cannot be played out , Larger , After playing the frame animation, it will continue to play empty 
            
            var duration = 20;
            
            // Multiple frame animation seat elements create a clip clip object , name “default”, The duration of the 20
            var clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
            
       //  Play the edited key frame 
         
        //group As a parameter of mixer , It can play group Frame animation of all sub objects in 
        var mixer = new THREE.AnimationMixer(group);
        // clip clip As a parameter , Through the mixer clipAction Method returns an operation object AnimationAction
        var AnimationAction = mixer.clipAction(clip);
        // By manipulating the Action Set playback mode 
        AnimationAction.timeScale = 20;// Default 1, You can adjust the playback speed 
        // AnimationAction.loop = THREE.LoopOnce; // No looping 
        AnimationAction.play();// Start playing 
        
       // Create a clock object Clock
       var clock = new THREE.Clock();
       // Rendering function 
       function render(){
    
       renderer.render(scene, camera); // Perform the render operation 
       requestAnimationFrame(render); // Request to execute render function again render, Render the next frame 
       
       //clock.getDelta() Method to obtain the time interval between two frames 
       // Update mixer related time 
        mixer.update(clock.getDelta());     
       }
        
        render();

      } 
    </script>
</body>
</html>