FaceNinja

ガイド · Unity · Godot 4 · three.js

あなたのヘッドを、Unity、Godot、three.jsで使う。

FaceNinjaのヘッドは、MetaHumanトポロジーのふつうのGLBやFBXです。目、歯、4Kテクスチャ、ARKitブレンドシェイプ52種が入っているので、Unrealの外でも使えます。Unity、Godot 4、three.jsへの読み込み方と、コードから顔を動かす方法を紹介します。

口を開けて笑う表情で、three.jsにレンダリングしたFaceNinjaのヘッド
生成された人物、サンプルS-16を、ARKitシェイプつきGLBからthree.jsに読み込み、jawOpenと2つのmouthSmileを強めたもの。当社のテストページのスクリーンショットです。

エンジンごとに使うファイル

エンジン別のファイル
エンジンファイル単位
UnityARKitシェイプつきFBXセンチメートル。Unityがメートルに変換
Godot 4ARKitシェイプつきGLBメートル、Yアップ
three.jsARKitシェイプつきGLBメートル、Yアップ

どちらも実寸大です。髪はGLBにもFBXにも含まれません。UnrealではMetaHumanのグルームが代わりになり、ほかのエンジンでは髪を自分で追加してください。

UnityでMetaHumanを使えますか?

FaceNinjaのヘッドは、当社の利用規約のもとにある、MetaHumanトポロジーのあなた自身のファイルです。どのエンジンでも使えます。MetaHuman Creatorで作ったMetaHumanにはEpicのライセンスが適用され、2025年6月からは他のエンジンやツールでの利用も認められています(Epicのライセンスページ)。

Unity:FBXを読み込む

  1. FBXを取り込む

    ARKitシェイプつきFBXをダウンロードし、プロジェクトのAssetsフォルダに入れます。

  2. インポート設定を確認する

    ModelタブでConvert Unitsをオンのままにしてセンチメートルをメートルに変換し、Import BlendShapesもオンのままにします(デフォルト)。Applyを押します。

  3. マテリアルを抽出する

    Materialsタブでテクスチャとマテリアルを抽出し、編集できるようにします。URPやHDRPでは、マテリアルをそのパイプラインのLitシェーダーに変換してください。

  4. シェイプを見つける

    ヘッドをシーンに置きます。Skinned Mesh RendererのBlendShapesの下に、ARKitの名前がついた52のシェイプが並びます。

  5. コードから動かす

    Unityのウェイトは0から100です。

    コード
    // Unity (C#): the head's SkinnedMeshRenderer; Unity blend shape weights run 0–100
    var smr = GetComponentInChildren<SkinnedMeshRenderer>();
    var mesh = smr.sharedMesh;
    for (int i = 0; i < mesh.blendShapeCount; i++)
        if (mesh.GetBlendShapeName(i).EndsWith("jawOpen"))
            smr.SetBlendShapeWeight(i, 60f);

GLBのほうがよければ、UnityはglTFastなどのglTFインポーターのパッケージでGLBを読み込めます。

Godot 4:GLBを読み込む

  1. GLBを取り込む

    ARKitシェイプつきGLBをダウンロードし、プロジェクトにコピーします。Godotはメートル単位のシーンとして読み込みます。

  2. シェイプを見つける

    シーンを開き、ヘッドのMeshInstance3Dを選択します。InspectorのBlend Shapesの下に、ARKitの名前でブレンドシェイプが並びます。

  3. コードから動かす

    Godotのウェイトは0から1です。

    コード
    # Godot 4 (GDScript): the head's MeshInstance3D; weights run 0–1
    @onready var head: MeshInstance3D = $Head
    func _ready():
        var i := head.find_blend_shape_by_name("jawOpen")
        if i >= 0:
            head.set_blend_shape_value(i, 0.6)

three.js:GLBを読み込む

  1. GLTFLoaderで読み込む

    ヘッドは複数のメッシュ(肌、目、歯など)として開き、どのメッシュにも同じ52のシェイプ名があります。

  2. 名前でシェイプを設定する

    morphTargetDictionaryが、ARKitの各名前をmorphTargetInfluencesのインデックスに対応づけます。ウェイトは0から1です。

    コード
    // three.js: every mesh of the head carries the same 52 names; weights run 0–1
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    const gltf = await new GLTFLoader().loadAsync('head.glb');
    gltf.scene.traverse((o) => {
      const i = o.morphTargetDictionary?.jawOpen;
      if (i !== undefined) o.morphTargetInfluences[i] = 0.6;
    });
    scene.add(gltf.scene);
  3. 澄んだ目

    three.jsで澄んだ、映り込みのある目にするには、cornea=transmissionオプションでダウンロードするか、ファイルを読み込むときに角膜のマテリアルを差し替えてください(ドキュメント EN)。

このガイドのために、このサンプルのGLBをthree.jsで読み込みました。6個のメッシュとして開き、どのメッシュにもARKitの52の名前がすべてあります。

知っておくと便利なこと

  • 同じメッシュ、同じリグ。どのヘッドも頂点の並びとUVが同じなので、1つのヘッド用に作った設定がすべてのヘッドで使えます。
  • スケール。どのファイルも実寸大です。ダウンロードオプションのmeasuredは、ヘッドを人物の推定サイズに合わせて拡大縮小します。
  • 軽いファイル。4Kが必要以上なら、ダウンロードオプションのtexture_sizeで2Kテクスチャを指定してください。
  • Webプレビューはエンジン向けではありません。Webアプリに表示される圧縮プレビューではなく、GLBかFBXを使ってください。

Unity、Godot、three.jsでのヘッドについての質問

01UnityでMetaHumanを使えますか?
FaceNinjaのヘッドはふつうのFBXやGLBなので、使えます。MetaHuman Creatorで作った完全なMetaHumanも、2025年6月からEpicのライセンスのもとで他のエンジンで使えるようになりました。条件を確認してください。
0252のブレンドシェイプも読み込まれますか?
はい、ARKitの名前のまま読み込まれます。UnityではSkinned Mesh RendererのBlendShapes、GodotではMeshInstance3DのBlend Shapes、three.jsではモーフターゲットです。
03髪はありますか?
これらのファイルには含まれません。UnrealではMetaHumanのグルームで補い、ほかのエンジンでは髪を自分で追加してください。
04どちらの形式が小さいですか?
ARKitシェイプつきGLBは4Kテクスチャで約105 MB、スタティックのGLBは約65 MBです。2Kテクスチャにすると、どちらも小さくなります。

52種すべてを持つヘッドを試せますか?

はい。無料で登録して、サンプルヘッド20個をダウンロードしてください。どのGLBとFBXにも52種すべてが入っています。