Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mugen87/three-m2loader
three.js loader for importing M2 assets from World of Warcraft.
https://github.com/mugen87/three-m2loader
javascript m2 threejs world-of-warcraft
Last synced: 2 months ago
JSON representation
three.js loader for importing M2 assets from World of Warcraft.
- Host: GitHub
- URL: https://github.com/mugen87/three-m2loader
- Owner: Mugen87
- License: mit
- Created: 2022-08-29T08:21:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-05T08:30:50.000Z (5 months ago)
- Last Synced: 2024-10-05T12:34:58.585Z (3 months ago)
- Topics: javascript, m2, threejs, world-of-warcraft
- Language: JavaScript
- Homepage:
- Size: 179 KB
- Stars: 25
- Watchers: 4
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# three-m2loader · [](https://github.com/Mugen87/yuka/blob/master/LICENSE) [](https://www.npmjs.com/package/three-m2loader)
### M2 Loader for three.js
`three-m2loader` allows you to import M2 assets from World of Warcraft into your `three.js` app.
| druidcat2.m2 | 7ne_druid_worktable02.m2 | gilneas_fountain01.m2 |
| ------------- | ------------- | ------------- |
| 
| 
| 
|
### Table of contents
1. [Basic Usage](#basic-usage)
2. [Animations](#animations)
3. [Skin Textures](#skin-textures)
4. [Misc](#misc)
If you want to load an asset into your `three.js` app, you have to put all external resources like `.blp` or `.skin` files into the same directory like the M2 file. Depending on the M2 version, you have to name resources files with their `FileDataID` or with their actual file name.
A minimal code example looks like so:
```js
import { M2Loader } from 'three-m2loader';
const loader = new M2Loader();
loader.load( 'models/cat/druidcat2.m2', function ( group ) {
scene.add( group );
} );
```
#### Sequences
Animations in M2 are called *sequences*. The playback of sequences is managed with an instance of `SequenceManager`. You can access it in the `userData` field of the returned group.
```js
const manager = group.userData.sequenceManager;
```
You can list all available sequences of a M2 asset with `listSequences()`. The list represents an array with objects that hold the `id` and `name` of a sequence.
```js
const sequences = manager.listSequences();
```
If you want to play a sequence, you can use `playSequence()`. `stopSequence()` stops the playback.
```js
manager.playSequence( sequence.id ); // start playback
manager.stopSequence( sequence.id ); // stop playback
```
If you want to stop the playback of all active sequences, you can use the convenience method `stopAllSequences()`.
#### Variations
Certain sequences like `Stand` or `AttackUnarmed` have multiple variations. You can list them for a given sequence via `listVariations()`.
```js
const variations = manager.listVariations( sequence.id );
```
Keep in mind that all sequences have at least one variation (default). If you want to play or stop a sequence with a specific variation, use the second parameter of `playSequence()` and `stopSequence()`.
```js
manager.playSequence( sequence.id, variationIndex ); // start playback
manager.stopSequence( sequence.id, variationIndex ); // stop playback
```
#### Global Sequences
Certain M2 assets have so-called *global sequences*. They represent animations that are active all the time like the flowing water of a fountain or the effects of elemental spirits.
You can check if a M2 asset has global sequences with `hasGlobalSequences()` and control the playback via `playGlobalSequences()` and `stopGlobalSequences()`.
```js
if ( manager.hasGlobalSequences() ) {
manager.playGlobalSequences();
}
```
Some models (especially creatures) require the definition of skin textures. This can be done with an instance of `M2Options` and the `setSkin( id1, id2, id3 )` method. You have to pass in the `FileDataID`s
of the textures that should represent the skin.
```js
const options = new M2Options();
options.setSkin( 2015464, 123060 ); // 2015464 and 123060 are FileDataIDs representing BLP textures
const loader = new M2Loader();
loader.load( 'bearmount/bearmount.m2', function ( group ) {
scene.add( group );
}, undefined, undefined, options );
```
You can use the same approach to overwrite the default skin of creatures (e.g. to switch the body color).
To retain the parameter order of `three.js` loaders, the `options` parameter comes after the three callback functions `onLoad()`, `onProgress()` and `onError()`.
### Misc
This loader requires `three.js` in version `r144` or higher.