feat(character): add option to use the ZAM CDN for the model viewer assets (#22)

.env.example

@@ -7,6 +7,7 @@ ACORE_ARMORY_IFRAME_MODE__URL="https://mywebsite.com/armory"
 ACORE_ARMORY_LOAD_DBCS=1
 ACORE_ARMORY_HIDE_GAME_MASTERS=1
 ACORE_ARMORY_TRANSMOG_MODULE=0
+ACORE_ARMORY_USE_ZAM_CDN=0
 ACORE_ARMORY_REALMS__0__NAME="AzerothCore"
 ACORE_ARMORY_REALMS__0__REALM_ID=1
 ACORE_ARMORY_REALMS__0__AUTH_DATABASE="acore_auth"

README.md

@@ -143,6 +143,7 @@ I also noticed that such a tool was frequently requested in the AzerothCore Disc
 | `loadDbcs`                     | `ACORE_ARMORY_LOAD_DBCS`                           | Boolean                       | `true`                           | Loads the DBC data from the `data` directory into memory when starting   up. It is highly recommended to set this to `true`. Only use `false` to keep   memory usage low, on a test server for example |
 | `hideGameMasters`              | `ACORE_ARMORY_HIDE_GAME_MASTERS`                   | Boolean                       | `true`                           | Hides Game Master characters if set to `true`. They will not be found in   the search page, and their character pages will show a 404 error                                                            |
 | `transmogModule`               | `ACORE_ARMORY_TRANSMOG_MODULE`                     | Boolean                       | `false`                          | Set this to `true` if your server uses the [transmogrification   module](https://github.com/azerothcore/mod-transmog) and you want to display   the transmogrified items on the 3D model               |
+| `useZamCdn`                    | `ACORE_ARMORY_USE_ZAM_CDN`                         | Boolean                       | `false`                          | Set this to `true` to use the ZAM network CDN for the 3D model viewer   instead of the assets in your local `data` folder                                                                              |
 | `realms`                       | `ACORE_ARMORY_REALMS__`...                         | Array of objects              |                                  | An array of realm configurations                                                                                                                                                                       |
 | `realms[0].name`               | `ACORE_ARMORY_REALMS__0__NAME`                     | String                        | `"AzerothCore"`                  | The name of the realm. Will be used in the URLs, shown on the character   pages and in the search page if you have multiple realms                                                                     |
 | `realms[0].realmId`            | `ACORE_ARMORY_REALMS__0__REALM_ID`                 | Number                        | `1`                              | The realm's ID, this must match the `id` column of the `realmlist` table   in the auth database                                                                                                        |

config.default.json

@@ -10,6 +10,7 @@
 	"loadDbcs": true,
 	"hideGameMasters": true,
 	"transmogModule": false,
+	"useZamCdn": false,
 	"realms": [
 		{
 			"name": "AzerothCore",

src/armory/Config.ts

@@ -32,6 +32,7 @@ export class Config {
 	public loadDbcs: boolean;
 	public hideGameMasters: boolean;
 	public transmogModule: boolean;
+	public useZamCdn: boolean;
 	public realms: IRealmConfig[];
 	public worldDatabase: IDatabaseConfig;
 	public dbQueryTimeout: number;

src/armory/controllers/CharacterController.ts

@@ -213,6 +213,7 @@ export class CharacterController {
 		res.render("character.hbs", {
 			title: `Armory - ${charData.name}`,
 			...this.makeSharedDataObject(realm, charData),
+			contentPath: this.armory.config.useZamCdn ? "https://wow.zamimg.com/modelviewer/live/" : (this.armory.config.websiteRoot + "/data/"),
 			data: {
 				race: charData.race,
 				gender: charData.gender,

static/character.hbs

@@ -154,6 +154,12 @@
 
 		viewer?.destroy();
 		viewer = new ZamModelViewer(characterModel);
+		const isLoadedInterval = setInterval(() => {
+			if (viewer.method("isLoaded")) {
+				clearInterval(isLoadedInterval);
+				setBackground("background.png");
+			}
+		}, 100);
 	}
 
 	function setSlotVisible(slot, visible) {
@@ -290,6 +296,18 @@
 		createViewer();
 	}
 
+	function setBackground(file) {
+		if (!viewer) {
+			return;
+		}
+
+		const originalContentPath = viewer.options.contentPath;
+		viewer.options.contentPath = "{{websiteRoot}}/data/";
+		viewer.options.background = file;
+		viewer.renderer.loadBackground();
+		viewer.options.contentPath = originalContentPath;
+	}
+
 	if (charData.mounts.length === 0) {
 		$("#mounts-container").hide();
 	} else {
@@ -352,8 +370,7 @@
 
 	const characterModel = {
 		type: ZamModelViewer.WOW,
-		contentPath: "{{websiteRoot}}/data/",
+		contentPath: "{{ contentPath }}",
-		background: "background.png",
 		container: $model,
 		hd: true,
 		aspect: $model.outerWidth() / $model.outerHeight(),