three.js 动画相关

需求描述

通过剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer的属性或方法完成一些播放效果。

定义动画

1.创建混合器并返回动画操作对象

定义动画

2.在帧渲染函数中获取两帧的时间间隔,并更新混合器时间(非常重要)

帧渲染

播放/暂停/加速

1. 播放

runAction.play();

2. 暂停

runAction.paused = true;

3.加速

方法一:runAction.timeScale = actionSpeed; // 默认为1

方法二:mixer.update(dt * actionSpeed); // 修改更新混合器时间的大小

滚动条播放

滚动条

其它

1.是否循环播放 - AnimationAction.loop

THREE.LoopRepeat   默认值,重复次数为repetitions次

THREE.LoopOnce   只执行一次

THREE.LoopPingPong   重复次数为repetitions次,且像乒乓球一样在起始点与结束点之间来回循环

2.动画剪辑执行次数 - repetitions

可以直接设置repetitions值,默认是Infinity,也可以通过setLoop(loop, repetitions)同时设置两个属性

3.最后一帧自动暂停 - clampWhenFinished

默认为false

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Three.js实现简单开门动画 先来看一下简单的开门动画实现效果,如下图所示: 可以看得出这个开门动画还是比较简...
    travelclover阅读 12,099评论 0 7
  • Threejs 为什么? webGL太难用,太复杂! 但是现代浏览器都支持 WebGL 这样我们就不必使用 Fla...
    强某某阅读 11,387评论 1 21
  • Threejs中文文档 郭隆邦技术博客 2018-09-21 20:40:17 关注 Three.js中文文档 今...
    情人波阅读 14,797评论 0 7
  • 一、首先我们需要创建一个Vue工程 本文主要详细记录搭建全景图的过程,故搭建Vue工程不在过多描述。 二、安装Th...
    shadow_2155阅读 9,085评论 0 24
  • 命令 新建项目: cocos new -l js projectname 运行项目:cocos run -p we...
    LIsPeri阅读 10,153评论 0 2