spine-threejsランタイムのアップデート
December 6th, 2024
three.js用のSpineランタイムをアップグレードしました！
three.jsはブラウザ上で3Dアニメーションを作成するためのライブラリです。Spineユーザーにとって必ずしも真っ先に選ばれるとは限りませんが、2Dと3Dの要素を組み合わせたい場合には優れた選択肢です。当社のランタイムを使えば、2DのSpineアニメーションを簡単にthree.jsの3Dの世界に持ち込むことができます。
ライティング
今回のアップグレードは、three.jsにSpineスケルトンをより自然に統合できるようにすることを目的としています。まず、Spineオブジェクトの作成に使用するマテリアルを選択できるようになりました。つまり、MeshStandardMaterial のようなマテリアルを使用すれば、スケルトンがライトに反応し、影を落としたり受けたりできます。また、Spineエディターに表示されるアニメーションをそのまま表示したい場合は、ライティングに反応しない MeshBasicMaterial のようなマテリアルを使用することもできます。
こちらにRaptorスケルトンが影を落とす/受けるインタラクティブなデモをご用意しました(ドラッグでカメラの角度変更/スクロールでズームができます):
ティントブラック
spine-threejs がすべてのSpine機能を完全にサポートするように、「ティントブラック」機能のサポートを追加しました。
ESMモジュール
r160で、three.jsはIIFEバンドルのサポートをやめ、最新のECMAScriptモジュール(ESM)を採用しました。効率化のために、当社は ESM モジュールも提供し始めました。今後は、コードで以下のように import/export 構文を使うことができます:
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"spine-threejs": "https://unpkg.com/@esotericsoftware/spine-threejs@4.2.67/dist/esm/spine-threejs.min.mjs"
}
}
</script>
<script type="module">
import * as THREE from "three";
import * as spine from "spine-threejs";
...
</script>
最小バージョン
spine-threejs が依存していたAPIが削除されたため、three.jsの最小サポートバージョンをr141からr162にアップグレードしました。しかしながら spine-threejs API は以前のままから変わっていません。ピア依存関係をアップグレードすることはしばしば破壊的変更と見なされますが、このアップデートは spine-threejs を1年以上前のthree.jsリリースにロックすることを避けるために必要でした。当社は最新のr171までのthree.jsバージョンで更新された spine-threejs ランタイムを徹底的にテストし、すべてが期待通りに動作することを確認しました。
これからも気軽にご連絡ください！
いつも通り、ランタイムを使用する上でサポートが必要な場合は、フォーラムで新しいスレッドを作成してください。バグを見つけたり、ランタイムの改善に貢献したい場合は、当社のGitHubで課題やPRをオープンしてください。
このブログ記事についての話題はフォーラムで話しましょう！