spine-threejs runtime update

December 6th, 2024

/img/blog/spine-threejs-update/threejs.png

We've upgraded our Spine runtime for three.js!

Three.js is a library for creating animated 3D graphics in the browser. While it's not always the first choice for Spine users, it's an excellent option if you want to combine 2D and 3D elements. Our runtime allows you to bring your 2D Spine animations into the 3D world of three.js with ease.

Lighting

This upgrade aims to integrate Spine skeletons more naturally in three.js. You can now choose the material used to create your Spine objects. This means your skeletons can react to lights, casting and receiving shadows if you use materials like MeshStandardMaterial. Alternatively, if you prefer to display your animations as they appear in the Spine editor, you can use materials like MeshBasicMaterial that don't react to lighting.

As an example, check out this interactive demo of a raptor skeleton casting and receiving shadows:

Tint black

We've added support for the "tint black" feature, ensuring spine-threejs fully supports all Spine features.

ESM modules

In r160, three.js dropped support for IIFE bundles in favor of modern ECMAScript Modules (ESM). To make your life easier, we have started shipping ESM modules as well. From now on, you can use the import/export syntax in your code like this:

html

<script type="importmap">
{
   "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>

Minimum version

We upgraded the minimum supported version of three.js from r141 to r162 due to the removal of APIs that spine-threejs relied on. Despite this change, we maintained the spine-threejs API without introducing breaking changes. While upgrading a peer dependency is often considered a breaking change, this update was necessary to avoid locking spine-threejs to a three.js release over a year old. We've thoroughly tested the updated spine-threejs runtime with three.js versions up to the latest r171, and everything works as expected.

Stay connected!

As usual, if you need assistance in using it, you can open a forum thread. If you find a bug or want to improve the runtime, feel free to open an issue or a PR on our GitHub.

Discuss this blog post on the forums!