three.js loader for importing M2 assets from World of Warcraft.

Overview

three-m2loader · GitHub license NPM Package

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
image image image

Usage

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:

import { M2Loader } from 'three-m2loader';

const loader = new M2Loader();
loader.load( 'models/cat/druidcat2.m2', function ( group ) {

    scene.add( group );

} );

This loader requires three.js in version r144 or higher.

Comments
  • Better support for early game assets.

    Better support for early game assets.

    Hey I basically used the code in your ./test dir to test how it loads vanilla .m2 files.

    I get this RangeError: Offset is outside the bounds of the DataView at DataView.getUint32 (<anonymous>) at BinaryParser.readUInt32 (M2Loader.js:1875:25) at M2Loader._readTrack (M2Loader.js:1176:25) at M2Loader._readBoneDefinition (M2Loader.js:802:27) at M2Loader._readBoneDefinitions (M2Loader.js:828:22) at M2Loader.parse (M2Loader.js:150:32) at Object.onLoad (M2Loader.js:66:10) at three.module.js:39951:38

    Any ideas?

    enhancement 
    opened by sudolink 7
  • Looking for M2 asset with embedded skin data.

    Looking for M2 asset with embedded skin data.

    Since Wrath of the Lich King, skin profiles are stored in separate .skin files. However, earlier M2 assets stored the data in the M2 itself. It would be good to know the filename of such an asset for testing (https://wow.tools/) so the below code path can be implemented and verified:

    https://github.com/Mugen87/three-m2loader/blob/e71c7760f5b19c828a2befc0eaf8781db888d91d/M2Loader.js#L160-L164

    enhancement help wanted 
    opened by Mugen87 1
  • Improve the parsing of chunked assets.

    Improve the parsing of chunked assets.

    Starting with Legion, M2 assets might be chunked. M2Loader only support a small subset of chunks for far. To improve the compatibility with newer files, chunk parsing support has to be improved. Possible chunks are:

    • [x] MD21
    • [ ] PFID
    • [x] SFID
    • [ ] AFID
    • [ ] BFID
    • [ ] TXAC
    • [ ] EXPT
    • [ ] EXP2
    • [ ] PABC
    • [ ] PADC
    • [ ] PSBC
    • [ ] PEDC
    • [ ] SKID
    • [x] TXID
    • [ ] LDV1
    • [ ] RPID
    • [ ] GPID
    • [ ] WFV1
    • [ ] WFV2
    • [ ] PGD1
    • [ ] WFV3
    • [ ] PFDC
    • [ ] EDGF
    • [ ] NERF

    Checked entries are at least partially supported or not implemented for a specific reasons. The idea is to use the parsed chunk data as an alternative data source for building three.js entities.

    enhancement help wanted 
    opened by Mugen87 0
  • Looking for M2 asset with animated colors.

    Looking for M2 asset with animated colors.

    M2 allows to animate the color and transparency of vertices. The loader already parses M2Color but it does not yet map the data to three.js entities. AFAICS, M2Color.color would animate Material.color and M2Color.alpha would animate Material.opacity(next to texture weights).

    It would be good to know the filename of such an asset for testing (https://wow.tools/) so _readColors() can verified and the animation implemented:

    https://github.com/Mugen87/three-m2loader/blob/2a4c56181aefcb3981302086aa2132a7d4892d9d/M2Loader.js#L145

    enhancement help wanted 
    opened by Mugen87 0
  • How to reliably detect static/animated models?

    How to reliably detect static/animated models?

    It would be good to know if there is an intended way to detect whether an object is animated or not. Right now, M2Loader counts the number of bones although this approach is not robust.

    https://github.com/Mugen87/three-m2loader/blob/e71c7760f5b19c828a2befc0eaf8781db888d91d/M2Loader.js#L394-L397

    enhancement help wanted 
    opened by Mugen87 0
  • Looking for M2 asset with uncompressed texture data.

    Looking for M2 asset with uncompressed texture data.

    Most M2 asset rely on S3TC texture compression which the loader already supports. However, certain assets use uncompressed textures. It would be good to know the filename of such an asset for testing (https://wow.tools/) so the below code path can be implemented and verified:

    https://github.com/Mugen87/three-m2loader/blob/e71c7760f5b19c828a2befc0eaf8781db888d91d/M2Loader.js#L1735-L1739

    enhancement help wanted 
    opened by Mugen87 1
  • Add Skeletal Animation.

    Add Skeletal Animation.

    M2Loader does not yet support skeletal animation which is however the most important animation technique for character models.

    I've tried to implement the feature and tested it with druidcat2.m2 however the geometry gets distorted and not properly animated. Unfortunately, https://wowdev.wiki/ does not provide enough information about how the skeleton should be built and integrated in the scene graph.

    enhancement help wanted 
    opened by Mugen87 0
Owner
Michael Herzog
I :heart: three.js
Michael Herzog
Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Indrajit 6 Oct 16, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Three.js boilerplate project configured with typescript, webpack and css/style loader, HTTPS local server, and a sample test codes !!

three.js-boilerplate Welcome, this is a three.js boilerplate project where you can clone it and start to work !!! Installed and Configured Items: Type

pravin poudel 4 Jul 6, 2022
This simple library allows you to create awesome responsive and highly customizable popups importing just one JavaScript file.

Creativa - Popup This is a simple library that allows you to create awesome popups importing just one JavaScript file. Getting started You can import

Eduardo Mollo 5 Mar 29, 2022
three.js examples. if you are first in learning three.js , this will give you much help.

three-projected-material Three.js Material which lets you do Texture Projection on a 3d Model. Installation After having installed three.js, install i

null 22 Nov 2, 2022
Text Engraving & Extrusion demo based on Three.js is implemented with Typescript and webpack5. Used THREE-CSGMesh as the core tech to achieve engraving and extrusion results

Text Engraving & Extrusion Text Engraving & Extrusion demo is implemented using Three.js, with Typescript and webpack5. Used THREE-CSGMesh as the core

Jiahong Li 3 Oct 12, 2022
🥰 Mini world simulator is a terminal application made in JavaScript to control the world that is being generated.

Mini-world "Simulator" Mini world simulator is a terminal application made in JavaScript to control the world that is being generated. It has no other

Adrián 2 Mar 14, 2022
Write "hello world" in your native language, code "hello world" in your favorite programming language!

Hello World, All languages! ?? ?? Write "hello world" in your native language, code "hello world" in your favorite language! #hacktoberfest2022 How to

Carolina Calixto 6 Dec 13, 2022
Wikipedia using only static assets & no backend

http://static.wiki Build a read-only Wikipedia using CSS, JS, WASM, and SQLite A proof-of-concept inspired and enabled by Hosting SQLite Databases on

null 540 Jan 1, 2023
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Introduction Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without

Swagger 23.2k Dec 28, 2022
🕋Assets Compression module for Nuxt 3

@nuxt-modules/compression Assets Compression module for Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Assets Compression usin

Nuxt Modules 26 Nov 21, 2022
The ManageYourCompany 📈 project is a project that creates, deletes, updates companies, units and assets.

The ManageYourCompany ?? project is a project that creates, deletes, updates companies, units and assets. The rule is that every company has several units and the units have several assets, these assets are machines with several fields: Name, status, person in charge, image, among others... This is a project in order to exercise my Backend skills with NodeJs and front with react.

Bruno da Silva Leite 2 Feb 9, 2022
Get discord application's assets in case you don't have them on your PC

get-discord-app-assets Get discord application's assets in case you don't have them on your PC (this is also the reason why I made this script) I came

Narcis B. 7 Dec 25, 2022
Programmatically upload NFT assets to OpenSea.io for free

OpenSea Uploader This is the example repository for my blog post How to Mint 100,000 NFTs For Free. Please note that this is merely a proof of concept

Andre Rabold 18 Sep 15, 2022
Source code and 3D assets for the Rings (for Loot) NFT project

Rings (for Loot) Rings (for Loot) is the first and largest 3D interpretation of an entire category in Loot. Adventurers, builders, and artists are enc

null 46 Dec 24, 2022
A file manager plugin for logseq(Search unused assets file)

logseq-plugin-file-manager Search files from assets and draws but not used in journals or pages. Please backup files before operation, and before dele

Hayden Chen 17 Dec 23, 2022
Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

null 3 Sep 21, 2022