2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Three.jsで再生可能な2Dキャラアニメーションを作る

Posted at

動機

Live2DやSpine使いたかったけど、サブスクなしでやりたかった

環境

Mac
blender2.83LTS

SVGを読み込む

この素材を使用
https://freesvg.org/shokunin-japanese-character

スクリーンショット 2021-09-03 18.05.15.png

Object Mode

メッシュ化

object > Mesh from Curve

すべて選択し統合

Command + J

リメッシュ

綺麗な並びのポリゴンにする 
周辺がガタガニになるが、内側にテクスチャーを貼ることで綺麗に見せる
Spineメッシュ変形のポリゴン形状を参考に作る
http://ja.esotericsoftware.com/spine-demos
スクリーンショット 2021-09-03 18.09.34.png

リダクション

Decimate
スクリーンショット 2021-09-03 18.10.54.png

UV Editing

UV調整
スクリーンショット 2021-09-03 18.18.01.png

ボーン

スクリーンショット 2021-09-03 18.19.14.png

自動ウエイト

モデル、ボーンの順に選択
Ctrl + Pを押し「With Automatic Weight」を選択

Pose Mode

アニメーション

動かしたいボーンを選択して、拡大または回転しInsert Keyframe
スクリーンショット 2021-09-03 18.12.34.png

GLB書き出し

初期設定のまま

Viewerで確認

Sep-03-2021 18-15-00

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?