\
This library allows eu to generate a 3d model character with his customization and items. It is use Wowhead libraries to generate the rendering. This lib is made to work with WotLK ( WOW 3x) but with some little changes it should work on retail version.
This library requires jQuery 3.x and Wowhead ZamModelViewer to be loaded in your html pages.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://wow.zamimg.com/modelviewer/live/viewer/viewer.min.js"></script>The library can be used either be used in vanilla javascript and framework context
With a js framework add the requirements files in your main html file in my Vue.js example this refers to
public/index.html
Install the library with:
npm i wow-model-viewerImport the lib
import {generateModels} from 'wow-model-viewer';In your html add the container of the model.
<div id="model_3d"></div>Call the lib
const character = {
"race": 7,
"gender": 1,
"skin": 4,
"face": 0,
"hairStyle": 5,
"hairColor": 5,
"facialStyle": 5,
"items": [[1, 1170], [3, 4925], [5, 9575], [6, 25235], [7, 2311], [8, 21154], [9, 14618], [10, 9534], [15, 17238], [21, 20379], [22, 28787]]
};
generateModels(1, `#model_3d`, character);To have more explanation about the character json please refer to
Advanced usage with items and transmogrification
You can simulate a web-server in your machine using http-server.
It's easy to install using npm:
npm install --global http-server
afterwards, you can run a webserver inside the project using:
http-server ./
To load the character my beautiful female gnome warlock
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://wow.zamimg.com/modelviewer/live/viewer/viewer.min.js"></script>
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="model_3d"></div>
</body>
<script type="module">
import {generateModels} from './index.js';
const character = {
"race": 7,
"gender": 1,
"skin": 4,
"face": 0,
"hairStyle": 5,
"hairColor": 5,
"facialStyle": 5,
"items": [[1, 1170], [3, 4925], [5, 9575], [6, 25235], [7, 2311], [8, 21154], [9, 14618], [10, 9534], [15, 17238], [21, 20379], [22, 28787]]
};
generateModels(1, `#model_3d`, character);
</script>./index.js is the js file on the root level of this repository.
To have more explanation about the character json please refer to
Advanced usage with items and transmogrification
The description of the character is
{
"race":7,
"gender":1,
"skin":4,
"face":0,
"hairStyle":5,
"hairColor":5,
"facialStyle":5,
"items": [[1,1170],[3,4925],[5,9575],[6,25235],[7,2311],[8,21154],[9,14618],[10,9534],[15,17238],[21,20379],[22,28787]]
}The race number refer to the following values
| Race | Number |
|---|---|
| human | 1 |
| orc | 2 |
| dwarf | 3 |
| nightelf | 4 |
| scourge | 5 |
| tauren | 6 |
| gnome | 7 |
| troll | 8 |
| bloodelf | 10 |
| draenei | 11 |
The items is a 2 dimensional array the inner array contains the following values
[ slot, display-id ] the slot is the body part where the stuff is displayed.
Don't mismatch display-id and item
Ex for the following
item: Atiesh, Greatstaff of the Guardian
the display-id is 193838 to find it inspect.
For some items a new display-id is set for those items a new slot is made. This library manage those display-id so
basically you don't care.
| Slot | Body | Is displayed |
|---|---|---|
| 1 | Head | Yes |
| 2 | Neck | No |
| 3 | Shoulders | Yes |
| 4 | Body | Yes |
| 5 | Chest | Yes |
| 6 | Waist | Yes |
| 7 | Legs | Yes |
| 8 | Feet | Yes |
| 9 | Wrists | Yes |
| 10 | Hands | Yes |
| 11 | Finger 1 | No |
| 12 | Finger 2 | No |
| 13 | Trinket 1 | No |
| 14 | Trinket 2 | No |
| 15 | Back | Yes |
| 16 | Main Hand | Yes |
| 17 | Off Hand | Yes |
| 18 | Ranged | Yes |
| 19 | Tabard | Yes |
| 20 | Chest (Robe) | Yes |
| 21 | Main Hand (new) | Yes |
| 22 | Off Hand (new) | Yes |
If you need that the library manage the search of the display-id based on our API and take in account player
transmogrification you can call it like following
import {findItemsInEquipments, generateModels} from './index.js'
const character = {
"race": 7,
"gender": 1,
"skin": 4,
"face": 0,
"hairStyle": 5,
"hairColor": 5,
"facialStyle": 5,
}
const equipments = [
{
"item": {
"entry": 3075,
"displayid": 15322
},
"transmog": {},
"slot": 0
}, {
"item": {
"entry": 2042,
"displayid": 20379
},
"transmog": {
"entry": 22632,
"displayid": 193838
},
"slot": 15
}];
findItemsInEquipments(equipments)
.then(async e => {
character.items = e;
const model = await generateModels(1, `#model_3d`, character);
});In this case the display-id of the transmog will always replace the
display-id of the item.
Change character distance
model.setDistance(2)Fullscreen
model.setFullscreen(false)Change Animation
model.setAnimation("Run")Pause animation
model.setAnimPaused(true)Returns the list of all available animations
model.getListAnimations()To display the npc and items you can call generateModels with:
- aspect (int)
- element selector (string)
- type and display id (object)
To get the npc display ids you can go here
Prince of Lordaeron:
const model = await generateModels(1, `#model_3d`, {type: 8, id: 24949});To display Atiesh, Greatstaff of the Guardian
const model = await generateModels(1, `#model_3d`, {type: 1, id: 193841});| Description | Type |
|---|---|
| NPC | 8 |
| Main Weapon | 1 |
| Off Weapon | 1 |
| Helmet | 2 |
| Shoulder | 4 |
This library was made for Murloc Village.