three.js 编辑关键帧并解析播放

最新推荐文章于 2023-12-19 10:16:44 发布

汉武大帝·

最新推荐文章于 2023-12-19 10:16:44 发布

阅读量1.2k

点赞数 1

分类专栏： three.js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yinge0508/article/details/123132916

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

帧动画: KeyframeTrack


KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )
name: 轨道的名称可以指动画对象中的变形目标(morph targets)、骨骼(bones)或可能的其他值
.times : Float32Array
一个Float32Array类型的值，由传入构造器中时间数组参数转化而来。
.values : Float32Array
一个Float32Array类型的值，
由传入构造器中值数组参数转化而来

AnimationClip：

// 动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它代表动画。
AnimationClip( name : String, duration : Number, tracks : Array )
name – 此剪辑的名称
duration – 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。
tracks – 一个由关键帧轨道（KeyframeTracks）组成的数组。

先看效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑关键帧并解析播放</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <button onclick="start()">开始</button>
  <button onclick="stop()">暂停</button>
  <button onclick="reset()">重置</button>
  <Script>
    // 1,创建场景
    var scene = new THREE.Scene();
    // 2，创建几何体模型
    // 创建球模型
    var sphere = new THREE.SphereGeometry(50,100,100);
    sphere.translate(0,0,100);
    // 创建盒子模型
    var box = new THREE.BoxGeometry(50,50,50);
    
    var material = new THREE.MeshBasicMaterial({color:0xffaacc});
    var material2 = new THREE.MeshBasicMaterial({color:0xffaacc});
    var mesh_sphere = new THREE.Mesh(sphere, material);
    var mesh_box = new THREE.Mesh(box, material2);
    var group = new THREE.Group();
    mesh_sphere.name = "Sphere";
    mesh_box.name = "Box";
    group.add(mesh_box,mesh_sphere);
    scene.add(group);
    // 创建关键帧---start
    var position_times = [0,10]; // 关键帧中位置变化的时间
    var position_values = [0,0,0,150,0,0]; // 关键帧中位置变化的值，三个为一组
    // 关键帧轨道 KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )
    // name – 关键帧轨道(KeyframeTrack)的标识符.轨道的名称可以指动画对象中的变形目标(morph targets)、骨骼(bones)或可能的其他值
    // times – 关键帧的时间数组,
    // values – 与时间数组中的时间点相关的值组成的数组
    var position_track = new THREE.KeyframeTrack("Box.position",position_times,position_values);
    var position2_track = new THREE.KeyframeTrack("Box.position",[10,15],[150,0,0,150,50,0,]);
    var colors_time = [5,15];
    var colors_values = [0,1,0,1,1,0];
    var color_track = new THREE.KeyframeTrack("Box.material.color",colors_time,colors_values);
    var scale_track = new THREE.KeyframeTrack("Sphere.scale",colors_time,[1, 1, 1, 1.1, 1.5, 1.5]);
    // 动画剪辑 AnimationClip( name : String, duration : Number, tracks : Array )
    var clip = new THREE.AnimationClip(
      "defalult", // name – 此剪辑的名称
      20, // 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。
      [position_track,position2_track,color_track,scale_track] // 一个由关键帧轨道（KeyframeTracks）组成的数组。
    )
    // AnimationMixer 动画混合器是用于场景中特定对象的动画的播放器。 
    var mixer = new THREE.AnimationMixer(group);
    // AnimationActions 用来调度存储在AnimationClips中的动画。
    var AnimationAction = mixer.clipAction(clip); // 返回所传入的剪辑参数的AnimationAction
    AnimationAction.timeScale = 10; // 时间的比例因子，值为0，会使动画暂停
    // AnimationAction.play(); // 让混合器激活动作
    // 创建关键帧---end

    // 3，创建灯光对象
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);
    // 4,创建相机对象
    var width = window.innerWidth- 50;
    var height = window.innerHeight - 50;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-1000,1000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
    // 5,创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    var clock = new THREE.Clock();
    function render(){
      renderer.render(scene,camera);
      requestAnimationFrame(render);
      // 播放关键帧动画时，要执行mixer.update(渲染时间间隔)告诉帧动画系统three.js两次渲染的时间间隔，
      // 获得时间间隔可以通过一个时钟类Clock时间
      mixer.update(clock.getDelta());
    }
    // 创建轴辅助对象
    var axes = new THREE.AxesHelper(500);
    scene.add(axes);
    // 创建鼠标控制对象
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    render();
    function start(){
       AnimationAction.play(); // 让混合器激活动作
    }
    function stop(){
       AnimationAction.stop(); // 让混合器停止动作,动作会马上停止以及完全[page:.reset 重置].
    }
    function reset(){
       AnimationAction.reset(); // 重置动作
    }
  </Script>
</body>
</html>

汉武大帝·

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
three.js 编辑关键帧并解析播放

帧动画:KeyframeTrackKeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )name:轨道的名称可以指动画对象中的变形目标(morph targets)、骨骼(bones)或可能的其他值.times : Float32Array一个Float32Array类型的值，由传入构造器中时间数组参数转化而来。.values : Float32Array...
复制链接

扫一扫

专栏目录