Playgroundで外部JSを使用する方法 - Babylon.js Tips集

Playgroundで外部JSを使用する方法

Babylon.js Playground で外部JSをロードしたい場合は以下の方法で実現可能です。

方法１） import 関数 + then を使う方法

code:js

const SCRIPT_URL = "http://mohayonao.github.io/mml-emitter/build/mml-emitter.js";

import(SCRIPT_URL).then(() => {

let mmlEmitter = new MMLEmitter(mml, config);

});

方法２） async/await + import 関数を使う方法

code:js

const SCRIPT_URL = "http://mohayonao.github.io/mml-emitter/build/mml-emitter.js";

const createScene = async function () {

await import(SCRIPT_URL);

let mmlEmitter = new MMLEmitter(mml, config);

}

方法３） BABYLON.Tools.LoadScript 関数を使う方法

code:js

const SCRIPT_URL = "http://mohayonao.github.io/mml-emitter/build/mml-emitter.js";

BABYLON.Tools.LoadScript(SCRIPT_URL, () => {

let mmlEmitter = new MMLEmitter(mml, config);

});

方法４） script タグを動的に追加する方法

※ BABYLON.Tools.LoadScript 関数の内部実装が下記のようになっています。

code:js

const SCRIPT_URL = "http://mohayonao.github.io/mml-emitter/build/mml-emitter.js";

const head = document.getElementsByTagName("head")0;

const script = document.createElement("script");

script.setAttribute("type", "text/javascript");

script.setAttribute("src", SCRIPT_URL);

script.onload = () => {

let mmlEmitter = new MMLEmitter(mml, config);

};

参考

LoadScript | Tools | Babylon.js Documentation

Using External Assets In the Playground

import() - JavaScript | MDN

#つまづいた時に解決した #Playground #外部ライブラリ #CDN