102 lines
2.3 KiB
HTML
102 lines
2.3 KiB
HTML
<div id="model" style="max-width: 608px; max-height: 800px;"></div>
|
|
|
|
<input id="cb-hide-helmet" type="checkbox">
|
|
<label for="cb-hide-helmet">Hide helmet</label>
|
|
<br>
|
|
|
|
<input id="cb-hide-cloak" type="checkbox">
|
|
<label for="cb-hide-cloak">Hide cloak</label>
|
|
<br>
|
|
|
|
<input id="cb-hide-tabard" type="checkbox">
|
|
<label for="cb-hide-tabard">Hide tabard</label>
|
|
<br>
|
|
|
|
<script type="application/javascript" src="/js/viewer.min.js"></script>
|
|
<script type="application/javascript">
|
|
window.WH = {
|
|
//debug: console.log,
|
|
debug: () => { },
|
|
};
|
|
|
|
const charData = JSON.parse(`{{{data}}}`);
|
|
const races = {
|
|
1: "human",
|
|
2: "orc",
|
|
3: "dwarf",
|
|
4: "nightelf",
|
|
5: "scourge",
|
|
6: "tauren",
|
|
7: "gnome",
|
|
8: "troll",
|
|
10: "bloodelf",
|
|
11: "draenei",
|
|
};
|
|
const genders = ["male", "female"];
|
|
|
|
const characterModel = {
|
|
type: ZamModelViewer.WOW,
|
|
contentPath: "/data/",
|
|
background: "background.png",
|
|
container: $("#model"),
|
|
hd: true,
|
|
aspect: 0.76,
|
|
charCustomization: {
|
|
race: charData.race,
|
|
gender: charData.gender,
|
|
options: charData.customizationOptions,
|
|
sheathMain: -1,
|
|
sheathOff: -1,
|
|
},
|
|
cls: charData.class,
|
|
items: charData.characterModelItems,
|
|
models: {
|
|
type: ZamModelViewer.Wow.Types.CHARACTER,
|
|
id: `${races[charData.race]}${genders[charData.gender]}`,
|
|
},
|
|
mount: {
|
|
type: ZamModelViewer.Wow.Types.NPC,
|
|
//id: 25280,
|
|
id: 0,
|
|
},
|
|
};
|
|
const viewer = new ZamModelViewer(characterModel);
|
|
|
|
$("#cb-hide-helmet").change(() => {
|
|
const hide = $("#cb-hide-helmet").prop("checked");
|
|
setSlotVisible(1, !hide);
|
|
});
|
|
$("#cb-hide-cloak").change(() => {
|
|
const hide = $("#cb-hide-cloak").prop("checked");
|
|
setSlotVisible(16, !hide);
|
|
});
|
|
$("#cb-hide-tabard").change(() => {
|
|
const hide = $("#cb-hide-tabard").prop("checked");
|
|
setSlotVisible(19, !hide);
|
|
});
|
|
|
|
function setSlotVisible(slot, visible) {
|
|
if (visible) {
|
|
const item = charData.characterModelItems.find(([sl, appearance]) => sl === slot);
|
|
if (item !== undefined) {
|
|
setItems([item]);
|
|
}
|
|
} else {
|
|
clearSlots([slot]);
|
|
}
|
|
}
|
|
|
|
function clearSlots(slots) {
|
|
viewer.method("clearSlots", slots.join(","));
|
|
}
|
|
|
|
function setItems(items) {
|
|
const data = items.map(([slot, display]) => {
|
|
return {
|
|
slot,
|
|
display,
|
|
};
|
|
});
|
|
viewer.method("setItems", [data]);
|
|
}
|
|
</script>
|