Web
🕋ThreeJS — KeyFrameAnimation & Bone
00 分钟
2023-8-3
2023-8-3
type
status
date
slug
summary
tags
category
icon
password
Edited
Aug 3, 2023 08:18 AM
Created
Aug 3, 2023 07:58 AM

KeyFrameAnimation

所谓关键帧动画，你可以理解为在时间轴上，选择几个关键的时间点，然后分别定义这几个时间点对应物体状态(比如位置、姿态、颜色等)，然后基于几个关键的时间——状态数据，生成连续的动画。

使用步骤

  1. 模型命名
  1. KeyframeTrack设置关键帧数据
  1. 创建关键帧动画AnimationClip
  1. AnimationMixer播放关键帧动画
  1. mixer.update()更新播放器AnimationMixer时间

动画动作对象AnimationAction 属性

  • 循环属性.loop
      • 控制动画是否循环播放
  • .clampWhenFinished属性
      • 模型停留在关键帧动画结束的状态
  • .play()
      • 播放
  • .stop()
      • 停止结束动画
  • .paused
      • 是否暂停播放
  • .timeScale
      • 倍速播放
  • .time
      • 开始播放时间
  • .duration
      • 播放结束时间
 

动画停留在任意时间

 

外部模型

如果一个模型中存在动画，可以通过属性获取 gltf.animations
gltf.animations是一个数组，如果没有帧动画数据，就是一个空数组，有帧动画数据的情况下，里面可能1个或多个Clip动画对象AnimationClip
 

变形动画

  • .morphAttributes设置几何体变形目标顶点数据
  • .morphTargetInfluences权重系数控制变形程度
mesh的几何体变形目标是放在一个数组.morphAttributes.position中的，设置权重系数morphTargetInfluences的时候，需要设置索引值， 比如.morphTargetInfluences[0]影响的变形目标是.morphAttributes.position[0]，.morphTargetInfluences[1]影响的变形目标是.morphAttributes.position[1]

使用

 

Bone

骨骼关节Bone的作用就是模拟人或动物的关节运动，控制身体表面变形，来生成骨骼动画

骨骼关节Bone树结构

人或动物实际的骨骼关节结构往往是比较复杂的，一般可以用一个层级树结构表达。
 

SkeletonHelper可视化骨骼关节

把所有骨骼关节对象的父对象，也就是根节点骨骼Bone1，添加一个模型对象中作为子对象，然后把模型对象作为SkeletonHelper的参数，就可以看到骨骼关节的可视化效果。
 
这次的内容都是和动画相关的，如果了解过CSS的话，非常好理解
内容差不多到这里就介绍完了 🎉🎉🎉
 

参考链接

  1. Three.js中文网 (webgl3d.cn)
上一篇
在 Deno 中 使用 npm 包
下一篇
ThreeJS — 通过 Ray & Label 来做一个点击物体高亮并提示信息
评论
Loading...