时雨小径 May the Spirit be with you

Show WoW 3D Armory on Your Website

In this tutorial I will give an instruction on how to show an wow 3D armory with the up to date information from battle.net armory.
I'm not able to show it here since wordpress supports embeded object tag badly, demo is shown here.

Thank wowhead for providing such a great tool.

1. Get the information of your character

Use the WOW API provided by blizzard to get the latest data of your character. There is a very detail document given here: http://blizzard.github.io/api-wow-docs/ and you should be able to find most of what you need.
In this case, you are gonna use only one API:

http://us.battle.net/api/wow/character/{realm}/{character_name}?fields=appearance,items

which returns a result in JSON format containing appearance and equipment information,

$url = 'http://us.battle.net/api/wow/character/' . $realm . '/' . $charater . '?fields=appearance,items';
$ch = curl_init($url);
$timeout = 5;

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');

$response = curl_exec($ch);
$data = json_decode($response);

Here is a list of we are going to get from the result object:

$data->race
$data->gender
$data->items->Head
$data->items->shoulder
...
$data->appearance->faceVariation
$data->appearance->skinColor
...

2. Get the displayID of items

Look at the $data->items object, you will find there is a property called 'id', e.g. $data->items->head->id. For those items which have been transmogged, they will have a property under 'tooltipParams' called 'transmogItem', e.g. $data->items->head->tooltipParams->transmogItem.

Well, wowhead is using another property called displayID in rendering, which is unique and provided by wowhead. Therefore you need to get the displayID, to do this, what you need is to send a web request to this URL

http://www.wowhead.com/item={id}&xml

which will return a XML format result containing the displayID for given item id, and by observing I found that the property 'Slotbak' indicating the position of the item.

$url = 'http://www.wowhead.com/item=' . $id . '&xml';

$ch = curl_init($url);
$timeout = 5;

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
$response = curl_exec($ch);
$p = xml_parser_create();
xml_parse_into_struct($p, $response, $vals, $index);
xml_parser_free($p);

$position = strstr(strstr($vals[$index['JSON'][0]]['value'], 'slotbak":'), ',', true);
$position = substr(strstr($position, ':'), 1);
$position = trim($position);

3. Build rendering parameters

A simple embeded code example of the wowhead model viewer is shown as following:

<object width="100%" height="300px" type="application/x-shockwave-flash" data="http://wow.zamimg.com/modelviewer/ZAMviewerfp11.swf" width="100%" height="100%"
    id="paperdoll-model-paperdoll-0-equipment-set">
    <param name="quality" value="high">
    <param name="wmode" value="direct"/>
    <param name="allowsscriptaccess" value="always">
    <param name="menu" value="false">
    <param name="flashvars"         
    value="model=scourgemale&amp;modelType=16&amp;contentPath=http://wow.zamimg.com/modelviewer/&amp;equipList=1,97155,3,97157,16,23553,20,42313,6,114168,9,114174,10,125454,7,114153,8,114147,13,125339,23,127685&sk=3&ha=9&hc=8&fa=0&fh=2&fc=2&mode=3"/>
                </object>

The core part is:

equipList=1,97155,3,97157,16,23553,20,42313,6,114168,9,114174,10,125454,7,114153,8,114147,13,125339,23,127685&sk=3&ha=9&hc=8&fa=0&fh=2&fc=2&mode=3

where equipList tells what items it should render in what position, and the parameters 'sk','ha','hc','fa' tell the appearance features.
the struct of equipList parameter is shown as following:

equipList={position1},{displayID1},{position2},{displayID2},...,{positionN},{displayIDN}.

Now you should be able to generate a render string using the results you got from step 2.

The complete code is published on github at https://github.com/markgan/wow_3d_armory.