1

Three.jsで、3Dキャラクターをインタラクティブに動作させてみたいのですが、
Three.jsで動作させることが可能な3Dキャラクターは、どうやって作成するのですか?

1 件の回答 1

2

3Dキャラクターは3DCG作成ソフトウェアを使って作成します。

あくまで一例ですが、個人用途では例えばBlenderというオープンソースソフトウェアを利用します。
Blenderでは3Dモデルを変形や結合していわゆる『3Dキャラクター』を作成し、それをキーフレームという手法で時間単位のアニメーションを定義して動かすことができます。
Blenderを使って作成したモデルとアニメーションはglTF 2.0というフォーマット(拡張子は*.glbなど)で出力可能です。
※Wikipediaには「glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現するフォーマットである。」と書かれていますが、Blenderから出力したファイルを開くと中身はバイナリです。
Blenderから出力し、モデルを単純に読み込む例

このglTFフォーマットのファイルをThree.jsから読み取ってJavaScriptからアニメーション操作を呼び出すことでWeb上で動作させることができます。
コード例

インタラクティブに動作させる仕組みは別のご質問glbファイルについてもご参照ください。

1
  • glTF 2.0フォーマットの拡張子が.glbに該当するのですね(両者の違いが良く分かっていませんでした)。また、アニメーション内容はJavaScriptで記述しているものと思っていたのですが、JavaScriptではアニメーション操作を呼び出しているだけなのですね…
    – re9
    2020年6月26日 23:45

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。