easy-three
Eng日本語

load.vrm

load.vrm(url : String, props : Object) : Promise<VRM>

url - VRMモデルのURL。
props - 設定オブジェクト。
  • position (Array) : モデルの位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : モデルの回転 (デフォルト : [0, 0, 0])。
  • scale (Array) : モデルのスケール (デフォルト : [1, 1, 1])。
  • castShadow (Boolean) : モデルが影を落とすか (デフォルト : true)。
  • autoAdd (Boolean) : 自動でシーンに追加するか (デフォルト : true)。
  • onProgress (Function) : 読み込み中のコールバック関数。
  • onLoad (Function) : 読み込み完了時のコールバック関数。
  • bvh (String) : BVHファイルのURL (デフォルト : false)

@pixiv/three-vrm を使用して VRMモデルを読み込み、オプションに基づいてシーンに追加します。

BVHファイルを読み込み、VRMモデルに適用することもできます。

モデルの読み込みは非同期で行われます。
そのため、変数にモデルを代入する場合は then メソッドを使用してください (下記の例を参照)。
また、animate のコールバック関数内でモデルを操作する場合は、 モデルが読み込まれるまでの処理を考慮してください。

戻り値は Mesh ではなく VRM オブジェクトです。
Meshを操作する場合は、戻り値の scene プロパティを使用 してください。

ボーンや表情などの操作については 教育機関向け活用例の 5. VRMモデルの操作とアニメーション を参照してください。

コードの例

VRMモデルの表示

const { camera, create, helper, load, controls, animate } = init()
create.ambientLight();
create.directionalLight();
camera.position.set(0, 1.5, -1.5);
controls.target.set(0, 1, 0);

controls.connect();

helper.axes();
helper.grid();

load.vrm("/easy-three/model/sample.vrm");

animate();

VRMモデルのMesh操作

const { camera, create, helper, load, controls, animate } = init()
create.ambientLight();
create.directionalLight();
camera.position.set(0, 1.5, -1.5);
controls.target.set(0, 1, 0);

controls.connect();

helper.axes();
helper.grid();

let model;
load.vrm("/easy-three/model/sample.vrm").then((vrm) => {
  model = vrm;
});

animate(({ delta }) => {
  if (model) {
    model.scene.rotation.y += delta;
  }
});

アニメーションの再生

VRMモデルにBVHファイルを適用することで、アニメーションを再生できます。
animate のコールバック関数内で、 model.updateWithAnimation(delta) を呼び出すことでアニメーションを更新します。
この処理は、load.vrm と load.bvh2 を併用するシンプルなケースのシンタックスシュガーです。
load.bvh2 で得られる mixer は model.mixer に格納されます。
複雑な処理が必要な場合は、model.mixer を使用してください。

const { camera, create, helper, load, controls, animate } = init()
create.ambientLight();
create.directionalLight();
camera.position.set(0, 1.5, -1.5);
controls.target.set(0, 1, 0);

controls.connect();

helper.axes();
helper.grid();

let model;
load.vrm("/easy-three/model/sample.vrm", {
  position: [0, -0.55, 0],
  bvh: "/easy-three/motion/sampleMotion.bvh",
}).then((vrm) => {
  model = vrm;
});

animate(({ delta }) => {
  if (model) {
    model.updateWithAnimation(delta);
    // あるいは
    // model.mixer?.update(delta);
    // model.update(delta);
  }
});