🎡MixamoのリグキャラクターをThree.js上で動かす glTFとfbxの違い
https://tympanus.net/codrops/2019/10/14/how-to-create-an-interactive-3d-character-with-three-js/
使用するモデルには、10個のアニメーションが読み込まれていますが、このチュートリアルの最後で、その設定方法を説明します。このチュートリアルはBlenderで行われ、アニメーションはAdobeの無料アニメーションリポジトリであるMixamoから取得しています。
(function() {
// Set our main variables
let scene,
renderer,
camera,
model, // Our character
neck, // Reference to the neck bone in the skeleton
waist, // Reference to the waist bone in the skeleton
possibleAnims, // Animations found in our file
mixer, // THREE.js animations mixer
idle, // Idle, the default state our character returns to
clock = new THREE.Clock(), // Used for anims, which run to a clock instead of frame rate
currentlyAnimating = false, // Used to check whether characters neck is being used in another anim
raycaster = new THREE.Raycaster(), // Used to detect the click on our character
loaderAnim = document.getElementById('js-loader');
})(); // Don't add anything below this lineinit()関数の冒頭で、キャンバスを参照する前に、モデルファイルを参照します。Three.jsは様々な3Dモデルフォーマットをサポートしていますが、このglbフォーマットを推奨しています。依存関係にあるGLTFLoaderを使用して、このモデルをシーンにロードします。
始める前に、GLTFファイル（Blenderからエクスポートする際のフォーマット）にテクスチャファイルを含めることができると言いましたが、Stacyのテクスチャがとても暗いという問題がありました。これは、GLTFがsRGBフォーマットを想定していることに関係していて、Photoshopで変換しようとしたのですが、それでもうまくいきませんでした。この問題を解決するには、テクスチャーを含まないファイルをエクスポートし、Three.jsがネイティブに追加する方法をとりました。よほど複雑なプロジェクトでない限り、この方法をお勧めします。
BlenderでFBXエクスポートしてmaximoへ、 ExportはglTFにしてThree.jsへ
www.mixamo.com。このサイトには、あらゆる種類の無料アニメーションがあり、インディーゲームの開発者がよく閲覧しています。
まず最初に行いたいのは、キャラクターのアップロードです。これは、BlenderからエクスポートしたFBXファイルです。アップロードが完了すると、Mixamoは自動的にAuto-Riggerの機能を表示します。
クロスフェードしているので、終了時のポーズが次のアニメーションの開始時のポーズに似ていると、最も自然に見えます
お願い致します