ランタイムでGLTF/GLBを読み込む方法

Wonderland Engineで大規模プロジェクトを作成する際には、必要なときにのみアセットを読み込むことを考えるかもしれません。ランタイムでアセットを読み込むことで、エディタ内の無駄を減らし、大規模かつ複雑なシーンに対する動的な読み込みソリューションを可能にします。

Wonderland Engineは、ランタイムでアセットを読み込むために2つのオプションを提供しています：.glb/.gltfファイルからの読み込み、または.binファイルのストリーミングです。

ランタイムGLTF読み込みの有効化 

ランタイムGLTF読み込みはオプションの機能で、Wonderland Editorで有効にする必要があります。 プロジェクトを開き、Views > Project Settings > Runtime に進み、enableRuntimeGltf チェックボックスを選択してください。

ランタイム読み込み用のファイルの追加 

ランタイム読み込み用のファイルを準備する最も簡単な方法は、プロジェクトの static フォルダに追加することです。このフォルダの内容は、プロジェクトをパッケージ化する際に deploy フォルダにコピーされます。

deploy フォルダはWonderland Editorのウェブサーバーのルートであり、そこにあるアセットを参照する任意のURLは、ルート相対で指定されるべきです。

例： static/my-folder/my-model.glb は deploy/my-folder/my-model.glb にコピーされ、後にプロジェクトがウェブサーバールートパスにデプロイされる際には /my-folder/my-model.glb や my-folder/my-model.glb でアクセスできます。

JavaScriptからの読み込み 

WonderlandEngine.loadGLTF() を使用して、glTF/GLBをダウンロードして PrefabGLTF に解析します。その後、Scene.instantiate() で現在のシーンにインスタンス化します。これにより、構造化されたラッパーが提供され、非推奨のAPIを避けることができます。

例 

アプリ起動時に.glbファイルを読み込み、スケールを変更するコンポーネントは以下のように見えるでしょう：

import {Component, Property} from '@wonderlandengine/api';

export class LoadGlbAndScale extends Component {
    static TypeName = 'load-glb-and-scale';

    static Properties = {
        glbFile: Property.string('exampleGLB.glb'),
        scale: Property.float(1.0),
    };

    async start() {
        try {
            const prefab = await this.engine.loadGLTF({file: this.glbFile});
            const {root} = this.engine.scene.instantiate(prefab);
            root.setScalingWorld([this.scale, this.scale, this.scale]);
        } catch (error) {
            console.error('GLBファイルの読み込みに失敗しました:', error);
        }
    }
}

アニメーションの読み込み 

.glbファイルにアニメーションが含まれている場合、インスタンス化された階層を通じてそれらにアクセスし、必要に応じてAnimationComponentをアタッチできます。複雑なセットアップの場合、アニメーションをエディタで作成し、メインの.binにパッケージ化することをお勧めします。それとも、ストリーミング可能な.binファイルを使用して必要なときに読み込むこともできます。

Introduction to Texture Atlasses Rendering Simplified Chinese Characters