easy-three
Eng日本語

load.gltf

load.gltf(url : String, props : Object) : Promise<GLTF>

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

GLTFモデルを読み込み、オプションに基づいてシーンに追加します。

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

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

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

コードの例

GLTFモデルの表示

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

controls.connect();

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

load.gltf("/easy-three/model/didelta_spinosa/didelta_spinosa_1k.gltf");

animate();

VRMモデルのMesh操作

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

controls.connect();

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

let model;
load.gltf("/easy-three/model/didelta_spinosa/didelta_spinosa_1k.gltf").then((gltf) => {
  model = gltf;
});

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