diff --git a/src/application/index.test.ts b/src/application/index.test.ts
index 206fc2f9..37b30c05 100644
--- a/src/application/index.test.ts
+++ b/src/application/index.test.ts
@@ -1,8 +1,9 @@
 import { initialize_application } from "./index";
-import { DisposableThreeRenderer } from "../core/rendering/Renderer";
 import { LogHandler, LogLevel, LogManager } from "../core/Logger";
 import { FileSystemHttpClient } from "../../test/src/core/FileSystemHttpClient";
 import { timeout } from "../../test/src/utils";
+import { StubThreeRenderer } from "../../test/src/core/rendering/StubThreeRenderer";
+import { Random } from "../core/Random";
 
 for (const path of [undefined, "/viewer", "/quest_editor", "/hunt_optimizer"]) {
     const with_path = path == undefined ? "without specific path" : `with path ${path}`;
@@ -23,7 +24,8 @@ for (const path of [undefined, "/viewer", "/quest_editor", "/hunt_optimizer"]) {
 
             const app = initialize_application(
                 new FileSystemHttpClient(),
-                () => new StubRenderer(),
+                new Random(() => 0.27),
+                () => new StubThreeRenderer(),
             );
 
             expect(app).toBeDefined();
@@ -37,13 +39,3 @@ for (const path of [undefined, "/viewer", "/quest_editor", "/hunt_optimizer"]) {
         });
     });
 }
-
-class StubRenderer implements DisposableThreeRenderer {
-    domElement: HTMLCanvasElement = document.createElement("canvas");
-
-    dispose(): void {} // eslint-disable-line
-
-    render(): void {} // eslint-disable-line
-
-    setSize(): void {} // eslint-disable-line
-}
diff --git a/src/application/index.ts b/src/application/index.ts
index 8dfb5b35..7d743ef6 100644
--- a/src/application/index.ts
+++ b/src/application/index.ts
@@ -8,9 +8,11 @@ import { throttle } from "lodash";
 import { DisposableThreeRenderer } from "../core/rendering/Renderer";
 import { Disposer } from "../core/observable/Disposer";
 import { disposable_custom_listener, disposable_listener } from "../core/gui/dom";
+import { Random } from "../core/Random";
 
 export function initialize_application(
     http_client: HttpClient,
+    random: Random,
     create_three_renderer: () => DisposableThreeRenderer,
 ): Disposable {
     const disposer = new Disposer();
@@ -43,7 +45,7 @@ export function initialize_application(
                 async () => {
                     const { initialize_viewer } = await import("../viewer");
                     const viewer = disposer.add(
-                        initialize_viewer(http_client, gui_store, create_three_renderer),
+                        initialize_viewer(http_client, random, gui_store, create_three_renderer),
                     );
 
                     return viewer.view;
diff --git a/src/core/Random.ts b/src/core/Random.ts
new file mode 100644
index 00000000..d2c5840b
--- /dev/null
+++ b/src/core/Random.ts
@@ -0,0 +1,18 @@
+export class Random {
+    constructor(private readonly random_number: () => number = Math.random) {}
+    /**
+     * @param min - The minimum value, inclusive.
+     * @param max - The maximum value, exclusive.
+     * @returns A random integer between `min` and `max`.
+     */
+    integer(min: number, max: number): number {
+        return min + Math.floor(this.random_number() * (max - min));
+    }
+
+    /**
+     * @returns A random element from `array`.
+     */
+    sample_array<T>(array: readonly T[]): T {
+        return array[this.integer(0, array.length)];
+    }
+}
diff --git a/src/core/gui/Select.ts b/src/core/gui/Select.ts
index c5337c05..a3718e3a 100644
--- a/src/core/gui/Select.ts
+++ b/src/core/gui/Select.ts
@@ -9,7 +9,7 @@ import { Menu } from "./Menu";
 
 export type SelectOptions<T> = LabelledControlOptions & {
     readonly items: readonly T[] | Property<readonly T[]>;
-    readonly to_label: (element: T) => string;
+    readonly to_label?: (element: T) => string;
     readonly selected?: T | Property<T>;
 };
 
@@ -31,7 +31,7 @@ export class Select<T> extends LabelledControl {
 
         this.preferred_label_position = "left";
 
-        this.to_label = options.to_label;
+        this.to_label = options.to_label ?? String;
         this.button = this.disposable(
             new Button({
                 text: " ",
diff --git a/src/core/util.ts b/src/core/util.ts
index 4fdc323c..505f7d34 100644
--- a/src/core/util.ts
+++ b/src/core/util.ts
@@ -34,22 +34,6 @@ export function array_remove<T>(array: T[], ...elements: T[]): number {
     return count;
 }
 
-/**
- * @param min - The minimum value, inclusive.
- * @param max - The maximum value, exclusive.
- * @returns A random integer between `min` and `max`.
- */
-export function random_integer(min: number, max: number): number {
-    return min + Math.floor(Math.random() * (max - min));
-}
-
-/**
- * @returns A random element from `array`.
- */
-export function random_array_element<T>(array: readonly T[]): T {
-    return array[random_integer(0, array.length)];
-}
-
 export function array_buffers_equal(a: ArrayBuffer, b: ArrayBuffer): boolean {
     if (a.byteLength !== b.byteLength) return false;
 
diff --git a/src/index.ts b/src/index.ts
index ae08941f..c6b0a612 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ import { initialize_application } from "./application";
 import { FetchClient } from "./core/HttpClient";
 import { WebGLRenderer } from "three";
 import { DisposableThreeRenderer } from "./core/rendering/Renderer";
+import { Random } from "./core/Random";
 
 function create_three_renderer(): DisposableThreeRenderer {
     const renderer = new WebGLRenderer({ antialias: true, alpha: true });
@@ -17,4 +18,4 @@ function create_three_renderer(): DisposableThreeRenderer {
     return renderer;
 }
 
-initialize_application(new FetchClient(), create_three_renderer);
+initialize_application(new FetchClient(), new Random(), create_three_renderer);
diff --git a/src/viewer/stores/TextureStore.ts b/src/viewer/controllers/TextureController.ts
similarity index 90%
rename from src/viewer/stores/TextureStore.ts
rename to src/viewer/controllers/TextureController.ts
index 7176427d..550c456f 100644
--- a/src/viewer/stores/TextureStore.ts
+++ b/src/viewer/controllers/TextureController.ts
@@ -1,18 +1,18 @@
-import { list_property } from "../../core/observable";
-import { parse_xvm, XvrTexture } from "../../core/data_formats/parsing/ninja/texture";
+import { Controller } from "../../core/controllers/Controller";
+import { filename_extension } from "../../core/util";
 import { read_file } from "../../core/read_file";
+import { parse_xvm, XvrTexture } from "../../core/data_formats/parsing/ninja/texture";
 import { ArrayBufferCursor } from "../../core/data_formats/cursor/ArrayBufferCursor";
 import { Endianness } from "../../core/data_formats/Endianness";
-import { Store } from "../../core/stores/Store";
+import { parse_afs } from "../../core/data_formats/parsing/afs";
 import { LogManager } from "../../core/Logger";
 import { WritableListProperty } from "../../core/observable/property/list/WritableListProperty";
+import { list_property } from "../../core/observable";
 import { ListProperty } from "../../core/observable/property/list/ListProperty";
-import { filename_extension } from "../../core/util";
-import { parse_afs } from "../../core/data_formats/parsing/afs";
 
-const logger = LogManager.get("viewer/stores/TextureStore");
+const logger = LogManager.get("viewer/controllers/TextureController");
 
-export class TextureStore extends Store {
+export class TextureController extends Controller {
     private readonly _textures: WritableListProperty<XvrTexture> = list_property();
     readonly textures: ListProperty<XvrTexture> = this._textures;
 
diff --git a/src/viewer/controllers/model/CharacterClassOptionsController.ts b/src/viewer/controllers/model/CharacterClassOptionsController.ts
new file mode 100644
index 00000000..59362409
--- /dev/null
+++ b/src/viewer/controllers/model/CharacterClassOptionsController.ts
@@ -0,0 +1,38 @@
+import { Controller } from "../../../core/controllers/Controller";
+import { ModelStore } from "../../stores/ModelStore";
+import { range } from "lodash";
+import { Property } from "../../../core/observable/property/Property";
+import { SectionId } from "../../../core/model";
+
+export class CharacterClassOptionsController extends Controller {
+    readonly enabled: Property<boolean>;
+    readonly current_section_id: Property<SectionId>;
+    readonly current_body_options: Property<readonly number[]>;
+    readonly current_body: Property<number | undefined>;
+
+    constructor(private readonly store: ModelStore) {
+        super();
+
+        this.enabled = store.current_character_class.map(cc => cc != undefined);
+
+        this.current_section_id = store.current_section_id;
+
+        this.current_body_options = store.current_character_class.map(character_class =>
+            character_class ? range(1, character_class.body_style_count + 1) : [],
+        );
+
+        this.current_body = store.current_body.map(body =>
+            body == undefined ? undefined : body + 1,
+        );
+    }
+
+    set_current_section_id = (section_id?: SectionId): void => {
+        if (section_id != undefined) {
+            this.store.set_current_section_id(section_id);
+        }
+    };
+
+    set_current_body = (body?: number): void => {
+        this.store.set_current_body(body == undefined ? undefined : body - 1);
+    };
+}
diff --git a/src/viewer/controllers/model/ModelController.ts b/src/viewer/controllers/model/ModelController.ts
new file mode 100644
index 00000000..da309eb8
--- /dev/null
+++ b/src/viewer/controllers/model/ModelController.ts
@@ -0,0 +1,31 @@
+import { Controller } from "../../../core/controllers/Controller";
+import { ModelStore } from "../../stores/ModelStore";
+import { CharacterClassModel } from "../../model/CharacterClassModel";
+import { Property } from "../../../core/observable/property/Property";
+import { CharacterClassAnimationModel } from "../../model/CharacterClassAnimationModel";
+
+export class ModelController extends Controller {
+    readonly character_classes: readonly CharacterClassModel[];
+    readonly current_character_class: Property<CharacterClassModel | undefined>;
+
+    readonly animations: readonly CharacterClassAnimationModel[];
+    readonly current_animation: Property<CharacterClassAnimationModel | undefined>;
+
+    constructor(private readonly store: ModelStore) {
+        super();
+
+        this.character_classes = store.character_classes;
+        this.current_character_class = store.current_character_class;
+
+        this.animations = store.animations;
+        this.current_animation = store.current_animation;
+    }
+
+    set_current_character_class = (character_class: CharacterClassModel): void => {
+        this.store.set_current_character_class(character_class);
+    };
+
+    set_current_animation = (animation: CharacterClassAnimationModel): void => {
+        this.store.set_current_animation(animation);
+    };
+}
diff --git a/src/viewer/controllers/model/ModelToolBarController.ts b/src/viewer/controllers/model/ModelToolBarController.ts
new file mode 100644
index 00000000..b5f20caf
--- /dev/null
+++ b/src/viewer/controllers/model/ModelToolBarController.ts
@@ -0,0 +1,92 @@
+import { Controller } from "../../../core/controllers/Controller";
+import { Property } from "../../../core/observable/property/Property";
+import { ModelStore } from "../../stores/ModelStore";
+import { read_file } from "../../../core/read_file";
+import { ArrayBufferCursor } from "../../../core/data_formats/cursor/ArrayBufferCursor";
+import { Endianness } from "../../../core/data_formats/Endianness";
+import { parse_nj, parse_xj } from "../../../core/data_formats/parsing/ninja";
+import { parse_njm } from "../../../core/data_formats/parsing/ninja/motion";
+import { parse_xvm, XvrTexture } from "../../../core/data_formats/parsing/ninja/texture";
+import { parse_afs } from "../../../core/data_formats/parsing/afs";
+import { LogManager } from "../../../core/Logger";
+
+const logger = LogManager.get("viewer/controllers/model/ModelToolBarController");
+
+export class ModelToolBarController extends Controller {
+    readonly show_skeleton: Property<boolean>;
+    readonly animation_frame_count: Property<number>;
+    readonly animation_frame_count_label: Property<string>;
+    readonly animation_controls_enabled: Property<boolean>;
+    readonly animation_playing: Property<boolean>;
+    readonly animation_frame_rate: Property<number>;
+    readonly animation_frame: Property<number>;
+
+    constructor(private readonly store: ModelStore) {
+        super();
+
+        this.show_skeleton = store.show_skeleton;
+        this.animation_frame_count = store.animation_frame_count;
+        this.animation_frame_count_label = store.animation_frame_count.map(count => `/ ${count}`);
+        this.animation_controls_enabled = store.current_nj_motion.map(njm => njm != undefined);
+        this.animation_playing = store.animation_playing;
+        this.animation_frame_rate = store.animation_frame_rate;
+        this.animation_frame = store.animation_frame.map(v => Math.round(v));
+    }
+
+    set_show_skeleton = (show_skeleton: boolean): void => {
+        this.store.set_show_skeleton(show_skeleton);
+    };
+
+    set_animation_playing = (playing: boolean): void => {
+        this.store.set_animation_playing(playing);
+    };
+
+    set_animation_frame_rate = (frame_rate: number): void => {
+        this.store.set_animation_frame_rate(frame_rate);
+    };
+
+    set_animation_frame = (frame: number): void => {
+        this.store.set_animation_frame(frame);
+    };
+
+    // TODO: notify user of problems.
+    load_file = async (file: File): Promise<void> => {
+        try {
+            const buffer = await read_file(file);
+            const cursor = new ArrayBufferCursor(buffer, Endianness.Little);
+
+            if (file.name.endsWith(".nj")) {
+                const nj_object = parse_nj(cursor)[0];
+
+                this.store.set_current_nj_object(nj_object);
+            } else if (file.name.endsWith(".xj")) {
+                const nj_object = parse_xj(cursor)[0];
+
+                this.store.set_current_nj_object(nj_object);
+            } else if (file.name.endsWith(".njm")) {
+                this.store.set_current_animation(undefined);
+                this.store.set_current_nj_motion(undefined);
+
+                const nj_object = this.store.current_nj_object.val;
+
+                if (nj_object) {
+                    this.set_animation_playing(true);
+                    this.store.set_current_nj_motion(parse_njm(cursor, nj_object.bone_count()));
+                }
+            } else if (file.name.endsWith(".xvm")) {
+                this.store.set_current_textures(parse_xvm(cursor).textures);
+            } else if (file.name.endsWith(".afs")) {
+                const files = parse_afs(cursor);
+                const textures: XvrTexture[] = files.flatMap(
+                    file => parse_xvm(new ArrayBufferCursor(file, Endianness.Little)).textures,
+                );
+
+                this.store.set_current_textures(textures);
+            } else {
+                logger.error(`Unknown file extension in filename "${file.name}".`);
+            }
+        } catch (e) {
+            logger.error("Couldn't read file.", e);
+        }
+    };
+}
diff --git a/src/viewer/gui/TextureView.test.ts b/src/viewer/gui/TextureView.test.ts
new file mode 100644
index 00000000..2ac40256
--- /dev/null
+++ b/src/viewer/gui/TextureView.test.ts
@@ -0,0 +1,15 @@
+import { TextureView } from "./TextureView";
+import { with_disposer } from "../../../test/src/core/observables/disposable_helpers";
+import { TextureController } from "../controllers/TextureController";
+import { TextureRenderer } from "../rendering/TextureRenderer";
+import { StubThreeRenderer } from "../../../test/src/core/rendering/StubThreeRenderer";
+
+test("Renders correctly without textures.", () =>
+    with_disposer(disposer => {
+        const ctrl = disposer.add(new TextureController());
+        const view = disposer.add(
+            new TextureView(ctrl, new TextureRenderer(ctrl, new StubThreeRenderer())),
+        );
+
+        expect(view.element).toMatchSnapshot("Should render a toolbar and a renderer widget.");
+    }));
diff --git a/src/viewer/gui/TextureView.ts b/src/viewer/gui/TextureView.ts
index 03d0138b..3d8d0c4c 100644
--- a/src/viewer/gui/TextureView.ts
+++ b/src/viewer/gui/TextureView.ts
@@ -3,9 +3,8 @@ import { FileButton } from "../../core/gui/FileButton";
 import { ToolBar } from "../../core/gui/ToolBar";
 import { RendererWidget } from "../../core/gui/RendererWidget";
 import { TextureRenderer } from "../rendering/TextureRenderer";
-import { TextureStore } from "../stores/TextureStore";
-import { DisposableThreeRenderer } from "../../core/rendering/Renderer";
 import { ResizableView } from "../../core/gui/ResizableView";
+import { TextureController } from "../controllers/TextureController";
 
 export class TextureView extends ResizableView {
     readonly element = div({ className: "viewer_TextureView" });
@@ -19,18 +18,16 @@ export class TextureView extends ResizableView {
 
     private readonly renderer_view: RendererWidget;
 
-    constructor(texture_store: TextureStore, three_renderer: DisposableThreeRenderer) {
+    constructor(ctrl: TextureController, renderer: TextureRenderer) {
         super();
 
-        this.renderer_view = this.add(
-            new RendererWidget(new TextureRenderer(three_renderer, texture_store)),
-        );
+        this.renderer_view = this.add(new RendererWidget(renderer));
 
         this.element.append(this.tool_bar.element, this.renderer_view.element);
 
         this.disposables(
             this.open_file_button.files.observe(({ value: files }) => {
-                if (files.length) texture_store.load_file(files[0]);
+                if (files.length) ctrl.load_file(files[0]);
             }),
         );
 
diff --git a/src/viewer/gui/ViewerView.ts b/src/viewer/gui/ViewerView.ts
index 843b7833..80e65872 100644
--- a/src/viewer/gui/ViewerView.ts
+++ b/src/viewer/gui/ViewerView.ts
@@ -1,5 +1,5 @@
 import { TabContainer } from "../../core/gui/TabContainer";
-import { Model3DView } from "./model_3d/Model3DView";
+import { ModelView } from "./model/ModelView";
 import { TextureView } from "./TextureView";
 import { ResizableView } from "../../core/gui/ResizableView";
 import { GuiStore } from "../../core/stores/GuiStore";
@@ -13,7 +13,7 @@ export class ViewerView extends ResizableView {
 
     constructor(
         gui_store: GuiStore,
-        create_model_3d_view: () => Promise<Model3DView>,
+        create_model_view: () => Promise<ModelView>,
         create_texture_view: () => Promise<TextureView>,
     ) {
         super();
@@ -24,13 +24,13 @@ export class ViewerView extends ResizableView {
                 tabs: [
                     {
                         title: "Models",
-                        key: "models",
+                        key: "model",
                         path: "/models",
-                        create_view: create_model_3d_view,
+                        create_view: create_model_view,
                     },
                     {
                         title: "Textures",
-                        key: "textures",
+                        key: "texture",
                         path: "/textures",
                         create_view: create_texture_view,
                     },
diff --git a/src/viewer/gui/__snapshots__/TextureView.test.ts.snap b/src/viewer/gui/__snapshots__/TextureView.test.ts.snap
new file mode 100644
index 00000000..323187ec
--- /dev/null
+++ b/src/viewer/gui/__snapshots__/TextureView.test.ts.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly without textures.: Should render a toolbar and a renderer widget. 1`] = `
+<div
+  class="viewer_TextureView"
+>
+  <div
+    class="core_ToolBar"
+    style="height: 33px;"
+  >
+    <label
+      class="core_FileButton core_Button"
+    >
+      <span
+        class="core_FileButton_inner core_Button_inner"
+      >
+        <span
+          class="core_FileButton_left core_Button_left"
+        >
+          <span>
+            <span
+              class="fas fa-file"
+            />
+          </span>
+        </span>
+        <span
+          class="core_Button_center"
+        >
+          Open file...
+        </span>
+      </span>
+      <input
+        accept=".afs, .xvm"
+        class="core_FileButton_input core_Button_inner"
+        type="file"
+      />
+    </label>
+  </div>
+  <div
+    class="core_RendererWidget"
+  >
+    <canvas
+      style="outline: none;"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
diff --git a/src/viewer/gui/model/CharacterClassOptionsView.css b/src/viewer/gui/model/CharacterClassOptionsView.css
new file mode 100644
index 00000000..99a12314
--- /dev/null
+++ b/src/viewer/gui/model/CharacterClassOptionsView.css
@@ -0,0 +1,23 @@
+.viewer_model_CharacterClassOptionsView {
+    box-sizing: border-box;
+    border-left: var(--border);
+    border-right: var(--border);
+    padding: 0 2px;
+}
+
+.viewer_model_CharacterClassOptionsView table {
+    table-layout: fixed;
+    width: 100%;
+}
+
+.viewer_model_CharacterClassOptionsView td:first-child {
+    width: 80px;
+}
+
+.viewer_model_CharacterClassOptionsView_section_id {
+    width: 100%;
+}
+
+.viewer_model_CharacterClassOptionsView_body {
+    width: 60px;
+}
diff --git a/src/viewer/gui/model/CharacterClassOptionsView.ts b/src/viewer/gui/model/CharacterClassOptionsView.ts
new file mode 100644
index 00000000..419ca8c4
--- /dev/null
+++ b/src/viewer/gui/model/CharacterClassOptionsView.ts
@@ -0,0 +1,50 @@
+import { ResizableView } from "../../../core/gui/ResizableView";
+import { div, table, td, tr } from "../../../core/gui/dom";
+import { Select } from "../../../core/gui/Select";
+import { CharacterClassOptionsController } from "../../controllers/model/CharacterClassOptionsController";
+import "./CharacterClassOptionsView.css";
+import { SectionId, SectionIds } from "../../../core/model";
+
+export class CharacterClassOptionsView extends ResizableView {
+    readonly element: HTMLElement;
+
+    constructor(ctrl: CharacterClassOptionsController) {
+        super();
+
+        const section_id_select: Select<SectionId> = this.add(
+            new Select({
+                class: "viewer_model_CharacterClassOptionsView_section_id",
+                label: "Section ID:",
+                items: SectionIds,
+                selected: ctrl.current_section_id,
+                to_label: section_id => SectionId[section_id],
+                enabled: ctrl.enabled,
+            }),
+        );
+
+        const body_select: Select<number | undefined> = this.add(
+            new Select({
+                class: "viewer_model_CharacterClassOptionsView_body",
+                label: "Body:",
+                items: ctrl.current_body_options,
+                selected: ctrl.current_body,
+                enabled: ctrl.enabled,
+            }),
+        );
+
+        this.element = div(
+            { className: "viewer_model_CharacterClassOptionsView" },
+            table(
+                tr(td(section_id_select.label?.element), td(section_id_select.element)),
+                tr(td(body_select.label?.element), td(body_select.element)),
+            ),
+        );
+
+        this.disposables(
+            section_id_select.selected.observe(({ value }) => ctrl.set_current_section_id(value)),
+            body_select.selected.observe(({ value }) => ctrl.set_current_body(value)),
+        );
+
+        this.finalize_construction();
+    }
+}
diff --git a/src/viewer/gui/model_3d/Model3DSelectListView.css b/src/viewer/gui/model/CharacterClassSelectionView.css
similarity index 57%
rename from src/viewer/gui/model_3d/Model3DSelectListView.css
rename to src/viewer/gui/model/CharacterClassSelectionView.css
index 7b409738..5ebe9311 100644
--- a/src/viewer/gui/model_3d/Model3DSelectListView.css
+++ b/src/viewer/gui/model/CharacterClassSelectionView.css
@@ -1,4 +1,4 @@
-.viewer_Model3DSelectListView {
+.viewer_model_CharacterClassSelectionView {
     box-sizing: border-box;
     list-style: none;
     padding: 0;
@@ -6,16 +6,16 @@
     overflow: auto;
 }
 
-.viewer_Model3DSelectListView li {
+.viewer_model_CharacterClassSelectionView li {
     padding: 4px 8px;
 }
 
-.viewer_Model3DSelectListView li:hover {
+.viewer_model_CharacterClassSelectionView li:hover {
     color: hsl(0, 0%, 90%);
     background-color: hsl(0, 0%, 18%);
 }
 
-.viewer_Model3DSelectListView li.active {
+.viewer_model_CharacterClassSelectionView li.active {
     color: hsl(0, 0%, 90%);
     background-color: hsl(0, 0%, 21%);
 }
diff --git a/src/viewer/gui/model_3d/Model3DSelectListView.ts b/src/viewer/gui/model/CharacterClassSelectionView.ts
similarity index 72%
rename from src/viewer/gui/model_3d/Model3DSelectListView.ts
rename to src/viewer/gui/model/CharacterClassSelectionView.ts
index d9f1ed93..dc985c30 100644
--- a/src/viewer/gui/model_3d/Model3DSelectListView.ts
+++ b/src/viewer/gui/model/CharacterClassSelectionView.ts
@@ -1,35 +1,30 @@
-import "./Model3DSelectListView.css";
+import "./CharacterClassSelectionView.css";
 import { Property } from "../../../core/observable/property/Property";
 import { li, ul } from "../../../core/gui/dom";
 import { ResizableView } from "../../../core/gui/ResizableView";
 
-export class Model3DSelectListView<T extends { name: string }> extends ResizableView {
-    readonly element = ul({ className: "viewer_Model3DSelectListView" });
-
-    set borders(borders: boolean) {
-        if (borders) {
-            this.element.style.borderLeft = "var(--border)";
-            this.element.style.borderRight = "var(--border)";
-        } else {
-            this.element.style.borderLeft = "none";
-            this.element.style.borderRight = "none";
-        }
-    }
-
+export class CharacterClassSelectionView<T extends { name: string }> extends ResizableView {
     private selected_model?: T;
     private selected_element?: HTMLLIElement;
 
+    readonly element = ul({ className: "viewer_model_CharacterClassSelectionView" });
+
     constructor(
-        private models: readonly T[],
+        private character_classes: readonly T[],
         private selected: Property<T | undefined>,
         private set_selected: (selected: T) => void,
+        private border_left: boolean,
     ) {
         super();
 
         this.element.onclick = this.list_click;
 
-        models.forEach((model, index) => {
-            this.element.append(li({ data: { index: index.toString() } }, model.name));
+        if (border_left) {
+            this.element.style.borderLeft = "var(--border)";
+        }
+
+        character_classes.forEach((character_class, index) => {
+            this.element.append(li({ data: { index: index.toString() } }, character_class.name));
         });
 
         this.disposables(
@@ -41,7 +36,7 @@ export class Model3DSelectListView<T extends { name: string }> extends Resizable
                     }
 
                     if (model && model !== this.selected_model) {
-                        const index = this.models.indexOf(model);
+                        const index = this.character_classes.indexOf(model);
 
                         if (index !== -1) {
                             this.selected_element = this.element.childNodes[index] as HTMLLIElement;
@@ -67,7 +62,7 @@ export class Model3DSelectListView<T extends { name: string }> extends Resizable
             const index = parseInt(e.target.dataset["index"]!, 10);
 
             this.selected_element = e.target;
-            this.set_selected(this.models[index]);
+            this.set_selected(this.character_classes[index]);
         }
     };
 }
diff --git a/src/viewer/gui/model_3d/Model3DToolBarView.ts b/src/viewer/gui/model/ModelToolBarView.ts
similarity index 67%
rename from src/viewer/gui/model_3d/Model3DToolBarView.ts
rename to src/viewer/gui/model/ModelToolBarView.ts
index 861f1b56..c8201c5c 100644
--- a/src/viewer/gui/model_3d/Model3DToolBarView.ts
+++ b/src/viewer/gui/model/ModelToolBarView.ts
@@ -5,10 +5,10 @@ import { NumberInput } from "../../../core/gui/NumberInput";
 import { PSO_FRAME_RATE } from "../../../core/rendering/conversion/ninja_animation";
 import { Label } from "../../../core/gui/Label";
 import { Icon } from "../../../core/gui/dom";
-import { Model3DStore } from "../../stores/Model3DStore";
 import { View } from "../../../core/gui/View";
+import { ModelToolBarController } from "../../controllers/model/ModelToolBarController";
 
-export class Model3DToolBarView extends View {
+export class ModelToolBarView extends View {
     private readonly toolbar: ToolBar;
 
     get element(): HTMLElement {
@@ -19,7 +19,7 @@ export class Model3DToolBarView extends View {
         return this.toolbar.height;
     }
 
-    constructor(model_3d_store: Model3DStore) {
+    constructor(ctrl: ModelToolBarController) {
         super();
 
         const open_file_button = new FileButton("Open file...", {
@@ -37,12 +37,10 @@ export class Model3DToolBarView extends View {
         const animation_frame_input = new NumberInput(1, {
             label: "Frame:",
             min: 1,
-            max: model_3d_store.animation_frame_count,
+            max: ctrl.animation_frame_count,
             step: 1,
         });
-        const animation_frame_count_label = new Label(
-            model_3d_store.animation_frame_count.map(count => `/ ${count}`),
-        );
+        const animation_frame_count_label = new Label(ctrl.animation_frame_count_label);
 
         this.toolbar = this.add(
             new ToolBar(
@@ -58,36 +56,30 @@ export class Model3DToolBarView extends View {
         // Always-enabled controls.
         this.disposables(
             open_file_button.files.observe(({ value: files }) => {
-                if (files.length) model_3d_store.load_file(files[0]);
+                if (files.length) ctrl.load_file(files[0]);
             }),
 
-            skeleton_checkbox.checked.observe(({ value }) =>
-                model_3d_store.set_show_skeleton(value),
-            ),
+            skeleton_checkbox.checked.observe(({ value }) => ctrl.set_show_skeleton(value)),
         );
 
         // Controls that are only enabled when an animation is selected.
-        const enabled = model_3d_store.current_nj_motion.map(njm => njm != undefined);
+        const enabled = ctrl.animation_controls_enabled;
 
         this.disposables(
             play_animation_checkbox.enabled.bind_to(enabled),
-            play_animation_checkbox.checked.bind_to(model_3d_store.animation_playing),
+            play_animation_checkbox.checked.bind_to(ctrl.animation_playing),
             play_animation_checkbox.checked.observe(({ value }) =>
-                model_3d_store.set_animation_playing(value),
+                ctrl.set_animation_playing(value),
             ),
 
             animation_frame_rate_input.enabled.bind_to(enabled),
             animation_frame_rate_input.value.observe(({ value }) =>
-                model_3d_store.set_animation_frame_rate(value),
+                ctrl.set_animation_frame_rate(value),
             ),
 
             animation_frame_input.enabled.bind_to(enabled),
-            animation_frame_input.value.bind_to(
-                model_3d_store.animation_frame.map(v => Math.round(v)),
-            ),
-            animation_frame_input.value.observe(({ value }) =>
-                model_3d_store.set_animation_frame(value),
-            ),
+            animation_frame_input.value.bind_to(ctrl.animation_frame),
+            animation_frame_input.value.observe(({ value }) => ctrl.set_animation_frame(value)),
 
             animation_frame_count_label.enabled.bind_to(enabled),
         );
diff --git a/src/viewer/gui/model_3d/Model3DView.css b/src/viewer/gui/model/ModelView.css
similarity index 56%
rename from src/viewer/gui/model_3d/Model3DView.css
rename to src/viewer/gui/model/ModelView.css
index 8b796079..ce56ab08 100644
--- a/src/viewer/gui/model_3d/Model3DView.css
+++ b/src/viewer/gui/model/ModelView.css
@@ -1,4 +1,4 @@
-.viewer_Model3DView_container {
+.viewer_model_ModelView_container {
     display: flex;
     flex-direction: row;
 }
diff --git a/src/viewer/gui/model/ModelView.test.ts b/src/viewer/gui/model/ModelView.test.ts
new file mode 100644
index 00000000..89e0190e
--- /dev/null
+++ b/src/viewer/gui/model/ModelView.test.ts
@@ -0,0 +1,31 @@
+import { with_disposer } from "../../../../test/src/core/observables/disposable_helpers";
+import { ModelController } from "../../controllers/model/ModelController";
+import { CharacterClassAssetLoader } from "../../loading/CharacterClassAssetLoader";
+import { FileSystemHttpClient } from "../../../../test/src/core/FileSystemHttpClient";
+import { ModelView } from "./ModelView";
+import { ModelRenderer } from "../../rendering/ModelRenderer";
+import { StubThreeRenderer } from "../../../../test/src/core/rendering/StubThreeRenderer";
+import { Random } from "../../../core/Random";
+import { ModelStore } from "../../stores/ModelStore";
+import { ModelToolBarView } from "./ModelToolBarView";
+import { ModelToolBarController } from "../../controllers/model/ModelToolBarController";
+import { CharacterClassOptionsView } from "./CharacterClassOptionsView";
+import { CharacterClassOptionsController } from "../../controllers/model/CharacterClassOptionsController";
+
+test("Renders correctly.", () =>
+    with_disposer(disposer => {
+        const store = disposer.add(
+            new ModelStore(
+                disposer.add(new CharacterClassAssetLoader(new FileSystemHttpClient())),
+                new Random(() => 0.04),
+            ),
+        );
+        const view = new ModelView(
+            disposer.add(new ModelController(store)),
+            new ModelToolBarView(disposer.add(new ModelToolBarController(store))),
+            new CharacterClassOptionsView(disposer.add(new CharacterClassOptionsController(store))),
+            new ModelRenderer(store, new StubThreeRenderer()),
+        );
+
+        expect(view.element).toMatchSnapshot();
+    }));
diff --git a/src/viewer/gui/model/ModelView.ts b/src/viewer/gui/model/ModelView.ts
new file mode 100644
index 00000000..599e0161
--- /dev/null
+++ b/src/viewer/gui/model/ModelView.ts
@@ -0,0 +1,102 @@
+import "./ModelView.css";
+import { RendererWidget } from "../../../core/gui/RendererWidget";
+import { ModelRenderer } from "../../rendering/ModelRenderer";
+import { ModelToolBarView } from "./ModelToolBarView";
+import { CharacterClassSelectionView } from "./CharacterClassSelectionView";
+import { CharacterClassModel } from "../../model/CharacterClassModel";
+import { CharacterClassAnimationModel } from "../../model/CharacterClassAnimationModel";
+import { ModelController } from "../../controllers/model/ModelController";
+import { div } from "../../../core/gui/dom";
+import { ResizableView } from "../../../core/gui/ResizableView";
+import { CharacterClassOptionsView } from "./CharacterClassOptionsView";
+
+const CHARACTER_CLASS_SELECTION_WIDTH = 100;
+const CHARACTER_CLASS_OPTIONS_WIDTH = 220;
+const ANIMATION_SELECTION_WIDTH = 140;
+
+export class ModelView extends ResizableView {
+    readonly element = div({ className: "viewer_model_ModelView" });
+
+    private tool_bar_view: ModelToolBarView;
+    private character_class_selection_view: CharacterClassSelectionView<CharacterClassModel>;
+    private options_view: CharacterClassOptionsView;
+    private renderer_view: RendererWidget;
+    private animation_selection_view: CharacterClassSelectionView<CharacterClassAnimationModel>;
+
+    constructor(
+        ctrl: ModelController,
+        tool_bar_view: ModelToolBarView,
+        options_view: CharacterClassOptionsView,
+        renderer: ModelRenderer,
+    ) {
+        super();
+
+        this.tool_bar_view = this.add(tool_bar_view);
+        this.character_class_selection_view = this.add(
+            new CharacterClassSelectionView(
+                ctrl.character_classes,
+                ctrl.current_character_class,
+                ctrl.set_current_character_class,
+                false,
+            ),
+        );
+        this.options_view = this.add(options_view);
+        this.renderer_view = this.add(new RendererWidget(renderer));
+        this.animation_selection_view = this.add(
+            new CharacterClassSelectionView(
+                ctrl.animations,
+                ctrl.current_animation,
+                ctrl.set_current_animation,
+                true,
+            ),
+        );
+
+        this.element.append(
+            this.tool_bar_view.element,
+            div(
+                { className: "viewer_model_ModelView_container" },
+                this.character_class_selection_view.element,
+                this.options_view.element,
+                this.renderer_view.element,
+                this.animation_selection_view.element,
+            ),
+        );
+
+        this.finalize_construction();
+    }
+
+    activate(): void {
+        this.renderer_view.start_rendering();
+        super.activate();
+    }
+
+    deactivate(): void {
+        super.deactivate();
+        this.renderer_view.stop_rendering();
+    }
+
+    resize(width: number, height: number): this {
+        super.resize(width, height);
+
+        const container_height = Math.max(0, height - this.tool_bar_view.height);
+
+        this.character_class_selection_view.resize(
+            CHARACTER_CLASS_SELECTION_WIDTH,
+            container_height,
+        );
+        this.options_view.resize(CHARACTER_CLASS_OPTIONS_WIDTH, container_height);
+        this.renderer_view.resize(
+            Math.max(
+                0,
+                width -
+                    CHARACTER_CLASS_SELECTION_WIDTH -
+                    CHARACTER_CLASS_OPTIONS_WIDTH -
+                    ANIMATION_SELECTION_WIDTH,
+            ),
+            container_height,
+        );
+        this.animation_selection_view.resize(ANIMATION_SELECTION_WIDTH, container_height);
+
+        return this;
+    }
+}
diff --git a/src/viewer/gui/model/__snapshots__/ModelView.test.ts.snap b/src/viewer/gui/model/__snapshots__/ModelView.test.ts.snap
new file mode 100644
index 00000000..323e5c70
--- /dev/null
+++ b/src/viewer/gui/model/__snapshots__/ModelView.test.ts.snap
@@ -0,0 +1,3313 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly. 1`] = `
+<div
+  class="viewer_model_ModelView"
+>
+  <div
+    class="core_ToolBar"
+    style="height: 33px;"
+  >
+    <label
+      class="core_FileButton core_Button"
+    >
+      <span
+        class="core_FileButton_inner core_Button_inner"
+      >
+        <span
+          class="core_FileButton_left core_Button_left"
+        >
+          <span>
+            <span
+              class="fas fa-file"
+            />
+          </span>
+        </span>
+        <span
+          class="core_Button_center"
+        >
+          Open file...
+        </span>
+      </span>
+      <input
+        accept=".afs, .nj, .njm, .xj, .xvm"
+        class="core_FileButton_input core_Button_inner"
+        type="file"
+      />
+    </label>
+    <div
+      class="core_ToolBar_group"
+    >
+      <input
+        class="core_CheckBox"
+        id="core_LabelledControl_id_0"
+        type="checkbox"
+      />
+      <label
+        class="core_Label"
+        for="core_LabelledControl_id_0"
+        title=""
+      >
+        Show skeleton
+      </label>
+    </div>
+    <div
+      class="core_ToolBar_group"
+    >
+      <input
+        class="core_CheckBox disabled"
+        disabled=""
+        id="core_LabelledControl_id_1"
+        type="checkbox"
+      />
+      <label
+        class="core_Label disabled"
+        for="core_LabelledControl_id_1"
+        title=""
+      >
+        Play animation
+      </label>
+    </div>
+    <div
+      class="core_ToolBar_group"
+    >
+      <label
+        class="core_Label disabled"
+        for="core_LabelledControl_id_2"
+        title=""
+      >
+        Frame rate:
+      </label>
+      <span
+        class="core_NumberInput core_Input disabled"
+        id="core_LabelledControl_id_2"
+      >
+        <input
+          class="core_NumberInput_inner core_Input_inner"
+          disabled=""
+          max="240"
+          min="1"
+          step="1"
+          type="number"
+        />
+      </span>
+    </div>
+    <div
+      class="core_ToolBar_group"
+    >
+      <label
+        class="core_Label disabled"
+        for="core_LabelledControl_id_3"
+        title=""
+      >
+        Frame:
+      </label>
+      <span
+        class="core_NumberInput core_Input disabled"
+        id="core_LabelledControl_id_3"
+      >
+        <input
+          class="core_NumberInput_inner core_Input_inner"
+          disabled=""
+          max="0"
+          min="1"
+          step="1"
+          type="number"
+        />
+      </span>
+    </div>
+    <label
+      class="core_Label disabled"
+    >
+      / 0
+    </label>
+  </div>
+  <div
+    class="viewer_model_ModelView_container"
+  >
+    <ul
+      class="viewer_model_CharacterClassSelectionView"
+    >
+      <li
+        class="active"
+        data-index="0"
+      >
+        HUmar
+      </li>
+      <li
+        data-index="1"
+      >
+        HUnewearl
+      </li>
+      <li
+        data-index="2"
+      >
+        HUcast
+      </li>
+      <li
+        data-index="3"
+      >
+        HUcaseal
+      </li>
+      <li
+        data-index="4"
+      >
+        RAmar
+      </li>
+      <li
+        data-index="5"
+      >
+        RAmarl
+      </li>
+      <li
+        data-index="6"
+      >
+        RAcast
+      </li>
+      <li
+        data-index="7"
+      >
+        RAcaseal
+      </li>
+      <li
+        data-index="8"
+      >
+        FOmar
+      </li>
+      <li
+        data-index="9"
+      >
+        FOmarl
+      </li>
+      <li
+        data-index="10"
+      >
+        FOnewm
+      </li>
+      <li
+        data-index="11"
+      >
+        FOnewearl
+      </li>
+    </ul>
+    <div
+      class="viewer_model_CharacterClassOptionsView"
+    >
+      <table>
+        <tr>
+          <td>
+            <label
+              class="core_Label"
+              for="core_LabelledControl_id_4"
+              title=""
+            >
+              Section ID:
+            </label>
+          </td>
+          <td>
+            <div
+              class="core_Select viewer_model_CharacterClassOptionsView_section_id"
+              id="core_LabelledControl_id_4"
+            >
+              <button
+                class="core_Button"
+              >
+                <span
+                  class="core_Button_inner"
+                >
+                  <span
+                    class="core_Button_center"
+                  >
+                    Viridia
+                  </span>
+                  <span
+                    class="core_Button_right"
+                  >
+                    <span>
+                      <span
+                        class="fas fa-caret-down"
+                      />
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <div
+                class="core_Menu"
+                hidden=""
+                tabindex="-1"
+              >
+                <div
+                  class="core_Menu_inner"
+                >
+                  <div
+                    data-index="0"
+                  >
+                    Viridia
+                  </div>
+                  <div
+                    data-index="1"
+                  >
+                    Greenill
+                  </div>
+                  <div
+                    data-index="2"
+                  >
+                    Skyly
+                  </div>
+                  <div
+                    data-index="3"
+                  >
+                    Bluefull
+                  </div>
+                  <div
+                    data-index="4"
+                  >
+                    Purplenum
+                  </div>
+                  <div
+                    data-index="5"
+                  >
+                    Pinkal
+                  </div>
+                  <div
+                    data-index="6"
+                  >
+                    Redria
+                  </div>
+                  <div
+                    data-index="7"
+                  >
+                    Oran
+                  </div>
+                  <div
+                    data-index="8"
+                  >
+                    Yellowboze
+                  </div>
+                  <div
+                    data-index="9"
+                  >
+                    Whitill
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label
+              class="core_Label"
+              for="core_LabelledControl_id_5"
+              title=""
+            >
+              Body:
+            </label>
+          </td>
+          <td>
+            <div
+              class="core_Select viewer_model_CharacterClassOptionsView_body"
+              id="core_LabelledControl_id_5"
+            >
+              <button
+                class="core_Button"
+              >
+                <span
+                  class="core_Button_inner"
+                >
+                  <span
+                    class="core_Button_center"
+                  >
+                    1
+                  </span>
+                  <span
+                    class="core_Button_right"
+                  >
+                    <span>
+                      <span
+                        class="fas fa-caret-down"
+                      />
+                    </span>
+                  </span>
+                </span>
+              </button>
+              <div
+                class="core_Menu"
+                hidden=""
+                tabindex="-1"
+              >
+                <div
+                  class="core_Menu_inner"
+                >
+                  <div
+                    data-index="0"
+                  >
+                    1
+                  </div>
+                  <div
+                    data-index="1"
+                  >
+                    2
+                  </div>
+                  <div
+                    data-index="2"
+                  >
+                    3
+                  </div>
+                  <div
+                    data-index="3"
+                  >
+                    4
+                  </div>
+                  <div
+                    data-index="4"
+                  >
+                    5
+                  </div>
+                  <div
+                    data-index="5"
+                  >
+                    6
+                  </div>
+                  <div
+                    data-index="6"
+                  >
+                    7
+                  </div>
+                  <div
+                    data-index="7"
+                  >
+                    8
+                  </div>
+                  <div
+                    data-index="8"
+                  >
+                    9
+                  </div>
+                  <div
+                    data-index="9"
+                  >
+                    10
+                  </div>
+                  <div
+                    data-index="10"
+                  >
+                    11
+                  </div>
+                  <div
+                    data-index="11"
+                  >
+                    12
+                  </div>
+                  <div
+                    data-index="12"
+                  >
+                    13
+                  </div>
+                  <div
+                    data-index="13"
+                  >
+                    14
+                  </div>
+                  <div
+                    data-index="14"
+                  >
+                    15
+                  </div>
+                  <div
+                    data-index="15"
+                  >
+                    16
+                  </div>
+                  <div
+                    data-index="16"
+                  >
+                    17
+                  </div>
+                  <div
+                    data-index="17"
+                  >
+                    18
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div
+      class="core_RendererWidget"
+    >
+      <canvas
+        style="outline: none;"
+        tabindex="0"
+      />
+    </div>
+    <ul
+      class="viewer_model_CharacterClassSelectionView"
+    >
+      <li
+        data-index="0"
+      >
+        Animation 1
+      </li>
+      <li
+        data-index="1"
+      >
+        Animation 2
+      </li>
+      <li
+        data-index="2"
+      >
+        Animation 3
+      </li>
+      <li
+        data-index="3"
+      >
+        Animation 4
+      </li>
+      <li
+        data-index="4"
+      >
+        Animation 5
+      </li>
+      <li
+        data-index="5"
+      >
+        Animation 6
+      </li>
+      <li
+        data-index="6"
+      >
+        Animation 7
+      </li>
+      <li
+        data-index="7"
+      >
+        Animation 8
+      </li>
+      <li
+        data-index="8"
+      >
+        Animation 9
+      </li>
+      <li
+        data-index="9"
+      >
+        Animation 10
+      </li>
+      <li
+        data-index="10"
+      >
+        Animation 11
+      </li>
+      <li
+        data-index="11"
+      >
+        Animation 12
+      </li>
+      <li
+        data-index="12"
+      >
+        Animation 13
+      </li>
+      <li
+        data-index="13"
+      >
+        Animation 14
+      </li>
+      <li
+        data-index="14"
+      >
+        Animation 15
+      </li>
+      <li
+        data-index="15"
+      >
+        Animation 16
+      </li>
+      <li
+        data-index="16"
+      >
+        Animation 17
+      </li>
+      <li
+        data-index="17"
+      >
+        Animation 18
+      </li>
+      <li
+        data-index="18"
+      >
+        Animation 19
+      </li>
+      <li
+        data-index="19"
+      >
+        Animation 20
+      </li>
+      <li
+        data-index="20"
+      >
+        Animation 21
+      </li>
+      <li
+        data-index="21"
+      >
+        Animation 22
+      </li>
+      <li
+        data-index="22"
+      >
+        Animation 23
+      </li>
+      <li
+        data-index="23"
+      >
+        Animation 24
+      </li>
+      <li
+        data-index="24"
+      >
+        Animation 25
+      </li>
+      <li
+        data-index="25"
+      >
+        Animation 26
+      </li>
+      <li
+        data-index="26"
+      >
+        Animation 27
+      </li>
+      <li
+        data-index="27"
+      >
+        Animation 28
+      </li>
+      <li
+        data-index="28"
+      >
+        Animation 29
+      </li>
+      <li
+        data-index="29"
+      >
+        Animation 30
+      </li>
+      <li
+        data-index="30"
+      >
+        Animation 31
+      </li>
+      <li
+        data-index="31"
+      >
+        Animation 32
+      </li>
+      <li
+        data-index="32"
+      >
+        Animation 33
+      </li>
+      <li
+        data-index="33"
+      >
+        Animation 34
+      </li>
+      <li
+        data-index="34"
+      >
+        Animation 35
+      </li>
+      <li
+        data-index="35"
+      >
+        Animation 36
+      </li>
+      <li
+        data-index="36"
+      >
+        Animation 37
+      </li>
+      <li
+        data-index="37"
+      >
+        Animation 38
+      </li>
+      <li
+        data-index="38"
+      >
+        Animation 39
+      </li>
+      <li
+        data-index="39"
+      >
+        Animation 40
+      </li>
+      <li
+        data-index="40"
+      >
+        Animation 41
+      </li>
+      <li
+        data-index="41"
+      >
+        Animation 42
+      </li>
+      <li
+        data-index="42"
+      >
+        Animation 43
+      </li>
+      <li
+        data-index="43"
+      >
+        Animation 44
+      </li>
+      <li
+        data-index="44"
+      >
+        Animation 45
+      </li>
+      <li
+        data-index="45"
+      >
+        Animation 46
+      </li>
+      <li
+        data-index="46"
+      >
+        Animation 47
+      </li>
+      <li
+        data-index="47"
+      >
+        Animation 48
+      </li>
+      <li
+        data-index="48"
+      >
+        Animation 49
+      </li>
+      <li
+        data-index="49"
+      >
+        Animation 50
+      </li>
+      <li
+        data-index="50"
+      >
+        Animation 51
+      </li>
+      <li
+        data-index="51"
+      >
+        Animation 52
+      </li>
+      <li
+        data-index="52"
+      >
+        Animation 53
+      </li>
+      <li
+        data-index="53"
+      >
+        Animation 54
+      </li>
+      <li
+        data-index="54"
+      >
+        Animation 55
+      </li>
+      <li
+        data-index="55"
+      >
+        Animation 56
+      </li>
+      <li
+        data-index="56"
+      >
+        Animation 57
+      </li>
+      <li
+        data-index="57"
+      >
+        Animation 58
+      </li>
+      <li
+        data-index="58"
+      >
+        Animation 59
+      </li>
+      <li
+        data-index="59"
+      >
+        Animation 60
+      </li>
+      <li
+        data-index="60"
+      >
+        Animation 61
+      </li>
+      <li
+        data-index="61"
+      >
+        Animation 62
+      </li>
+      <li
+        data-index="62"
+      >
+        Animation 63
+      </li>
+      <li
+        data-index="63"
+      >
+        Animation 64
+      </li>
+      <li
+        data-index="64"
+      >
+        Animation 65
+      </li>
+      <li
+        data-index="65"
+      >
+        Animation 66
+      </li>
+      <li
+        data-index="66"
+      >
+        Animation 67
+      </li>
+      <li
+        data-index="67"
+      >
+        Animation 68
+      </li>
+      <li
+        data-index="68"
+      >
+        Animation 69
+      </li>
+      <li
+        data-index="69"
+      >
+        Animation 70
+      </li>
+      <li
+        data-index="70"
+      >
+        Animation 71
+      </li>
+      <li
+        data-index="71"
+      >
+        Animation 72
+      </li>
+      <li
+        data-index="72"
+      >
+        Animation 73
+      </li>
+      <li
+        data-index="73"
+      >
+        Animation 74
+      </li>
+      <li
+        data-index="74"
+      >
+        Animation 75
+      </li>
+      <li
+        data-index="75"
+      >
+        Animation 76
+      </li>
+      <li
+        data-index="76"
+      >
+        Animation 77
+      </li>
+      <li
+        data-index="77"
+      >
+        Animation 78
+      </li>
+      <li
+        data-index="78"
+      >
+        Animation 79
+      </li>
+      <li
+        data-index="79"
+      >
+        Animation 80
+      </li>
+      <li
+        data-index="80"
+      >
+        Animation 81
+      </li>
+      <li
+        data-index="81"
+      >
+        Animation 82
+      </li>
+      <li
+        data-index="82"
+      >
+        Animation 83
+      </li>
+      <li
+        data-index="83"
+      >
+        Animation 84
+      </li>
+      <li
+        data-index="84"
+      >
+        Animation 85
+      </li>
+      <li
+        data-index="85"
+      >
+        Animation 86
+      </li>
+      <li
+        data-index="86"
+      >
+        Animation 87
+      </li>
+      <li
+        data-index="87"
+      >
+        Animation 88
+      </li>
+      <li
+        data-index="88"
+      >
+        Animation 89
+      </li>
+      <li
+        data-index="89"
+      >
+        Animation 90
+      </li>
+      <li
+        data-index="90"
+      >
+        Animation 91
+      </li>
+      <li
+        data-index="91"
+      >
+        Animation 92
+      </li>
+      <li
+        data-index="92"
+      >
+        Animation 93
+      </li>
+      <li
+        data-index="93"
+      >
+        Animation 94
+      </li>
+      <li
+        data-index="94"
+      >
+        Animation 95
+      </li>
+      <li
+        data-index="95"
+      >
+        Animation 96
+      </li>
+      <li
+        data-index="96"
+      >
+        Animation 97
+      </li>
+      <li
+        data-index="97"
+      >
+        Animation 98
+      </li>
+      <li
+        data-index="98"
+      >
+        Animation 99
+      </li>
+      <li
+        data-index="99"
+      >
+        Animation 100
+      </li>
+      <li
+        data-index="100"
+      >
+        Animation 101
+      </li>
+      <li
+        data-index="101"
+      >
+        Animation 102
+      </li>
+      <li
+        data-index="102"
+      >
+        Animation 103
+      </li>
+      <li
+        data-index="103"
+      >
+        Animation 104
+      </li>
+      <li
+        data-index="104"
+      >
+        Animation 105
+      </li>
+      <li
+        data-index="105"
+      >
+        Animation 106
+      </li>
+      <li
+        data-index="106"
+      >
+        Animation 107
+      </li>
+      <li
+        data-index="107"
+      >
+        Animation 108
+      </li>
+      <li
+        data-index="108"
+      >
+        Animation 109
+      </li>
+      <li
+        data-index="109"
+      >
+        Animation 110
+      </li>
+      <li
+        data-index="110"
+      >
+        Animation 111
+      </li>
+      <li
+        data-index="111"
+      >
+        Animation 112
+      </li>
+      <li
+        data-index="112"
+      >
+        Animation 113
+      </li>
+      <li
+        data-index="113"
+      >
+        Animation 114
+      </li>
+      <li
+        data-index="114"
+      >
+        Animation 115
+      </li>
+      <li
+        data-index="115"
+      >
+        Animation 116
+      </li>
+      <li
+        data-index="116"
+      >
+        Animation 117
+      </li>
+      <li
+        data-index="117"
+      >
+        Animation 118
+      </li>
+      <li
+        data-index="118"
+      >
+        Animation 119
+      </li>
+      <li
+        data-index="119"
+      >
+        Animation 120
+      </li>
+      <li
+        data-index="120"
+      >
+        Animation 121
+      </li>
+      <li
+        data-index="121"
+      >
+        Animation 122
+      </li>
+      <li
+        data-index="122"
+      >
+        Animation 123
+      </li>
+      <li
+        data-index="123"
+      >
+        Animation 124
+      </li>
+      <li
+        data-index="124"
+      >
+        Animation 125
+      </li>
+      <li
+        data-index="125"
+      >
+        Animation 126
+      </li>
+      <li
+        data-index="126"
+      >
+        Animation 127
+      </li>
+      <li
+        data-index="127"
+      >
+        Animation 128
+      </li>
+      <li
+        data-index="128"
+      >
+        Animation 129
+      </li>
+      <li
+        data-index="129"
+      >
+        Animation 130
+      </li>
+      <li
+        data-index="130"
+      >
+        Animation 131
+      </li>
+      <li
+        data-index="131"
+      >
+        Animation 132
+      </li>
+      <li
+        data-index="132"
+      >
+        Animation 133
+      </li>
+      <li
+        data-index="133"
+      >
+        Animation 134
+      </li>
+      <li
+        data-index="134"
+      >
+        Animation 135
+      </li>
+      <li
+        data-index="135"
+      >
+        Animation 136
+      </li>
+      <li
+        data-index="136"
+      >
+        Animation 137
+      </li>
+      <li
+        data-index="137"
+      >
+        Animation 138
+      </li>
+      <li
+        data-index="138"
+      >
+        Animation 139
+      </li>
+      <li
+        data-index="139"
+      >
+        Animation 140
+      </li>
+      <li
+        data-index="140"
+      >
+        Animation 141
+      </li>
+      <li
+        data-index="141"
+      >
+        Animation 142
+      </li>
+      <li
+        data-index="142"
+      >
+        Animation 143
+      </li>
+      <li
+        data-index="143"
+      >
+        Animation 144
+      </li>
+      <li
+        data-index="144"
+      >
+        Animation 145
+      </li>
+      <li
+        data-index="145"
+      >
+        Animation 146
+      </li>
+      <li
+        data-index="146"
+      >
+        Animation 147
+      </li>
+      <li
+        data-index="147"
+      >
+        Animation 148
+      </li>
+      <li
+        data-index="148"
+      >
+        Animation 149
+      </li>
+      <li
+        data-index="149"
+      >
+        Animation 150
+      </li>
+      <li
+        data-index="150"
+      >
+        Animation 151
+      </li>
+      <li
+        data-index="151"
+      >
+        Animation 152
+      </li>
+      <li
+        data-index="152"
+      >
+        Animation 153
+      </li>
+      <li
+        data-index="153"
+      >
+        Animation 154
+      </li>
+      <li
+        data-index="154"
+      >
+        Animation 155
+      </li>
+      <li
+        data-index="155"
+      >
+        Animation 156
+      </li>
+      <li
+        data-index="156"
+      >
+        Animation 157
+      </li>
+      <li
+        data-index="157"
+      >
+        Animation 158
+      </li>
+      <li
+        data-index="158"
+      >
+        Animation 159
+      </li>
+      <li
+        data-index="159"
+      >
+        Animation 160
+      </li>
+      <li
+        data-index="160"
+      >
+        Animation 161
+      </li>
+      <li
+        data-index="161"
+      >
+        Animation 162
+      </li>
+      <li
+        data-index="162"
+      >
+        Animation 163
+      </li>
+      <li
+        data-index="163"
+      >
+        Animation 164
+      </li>
+      <li
+        data-index="164"
+      >
+        Animation 165
+      </li>
+      <li
+        data-index="165"
+      >
+        Animation 166
+      </li>
+      <li
+        data-index="166"
+      >
+        Animation 167
+      </li>
+      <li
+        data-index="167"
+      >
+        Animation 168
+      </li>
+      <li
+        data-index="168"
+      >
+        Animation 169
+      </li>
+      <li
+        data-index="169"
+      >
+        Animation 170
+      </li>
+      <li
+        data-index="170"
+      >
+        Animation 171
+      </li>
+      <li
+        data-index="171"
+      >
+        Animation 172
+      </li>
+      <li
+        data-index="172"
+      >
+        Animation 173
+      </li>
+      <li
+        data-index="173"
+      >
+        Animation 174
+      </li>
+      <li
+        data-index="174"
+      >
+        Animation 175
+      </li>
+      <li
+        data-index="175"
+      >
+        Animation 176
+      </li>
+      <li
+        data-index="176"
+      >
+        Animation 177
+      </li>
+      <li
+        data-index="177"
+      >
+        Animation 178
+      </li>
+      <li
+        data-index="178"
+      >
+        Animation 179
+      </li>
+      <li
+        data-index="179"
+      >
+        Animation 180
+      </li>
+      <li
+        data-index="180"
+      >
+        Animation 181
+      </li>
+      <li
+        data-index="181"
+      >
+        Animation 182
+      </li>
+      <li
+        data-index="182"
+      >
+        Animation 183
+      </li>
+      <li
+        data-index="183"
+      >
+        Animation 184
+      </li>
+      <li
+        data-index="184"
+      >
+        Animation 185
+      </li>
+      <li
+        data-index="185"
+      >
+        Animation 186
+      </li>
+      <li
+        data-index="186"
+      >
+        Animation 187
+      </li>
+      <li
+        data-index="187"
+      >
+        Animation 188
+      </li>
+      <li
+        data-index="188"
+      >
+        Animation 189
+      </li>
+      <li
+        data-index="189"
+      >
+        Animation 190
+      </li>
+      <li
+        data-index="190"
+      >
+        Animation 191
+      </li>
+      <li
+        data-index="191"
+      >
+        Animation 192
+      </li>
+      <li
+        data-index="192"
+      >
+        Animation 193
+      </li>
+      <li
+        data-index="193"
+      >
+        Animation 194
+      </li>
+      <li
+        data-index="194"
+      >
+        Animation 195
+      </li>
+      <li
+        data-index="195"
+      >
+        Animation 196
+      </li>
+      <li
+        data-index="196"
+      >
+        Animation 197
+      </li>
+      <li
+        data-index="197"
+      >
+        Animation 198
+      </li>
+      <li
+        data-index="198"
+      >
+        Animation 199
+      </li>
+      <li
+        data-index="199"
+      >
+        Animation 200
+      </li>
+      <li
+        data-index="200"
+      >
+        Animation 201
+      </li>
+      <li
+        data-index="201"
+      >
+        Animation 202
+      </li>
+      <li
+        data-index="202"
+      >
+        Animation 203
+      </li>
+      <li
+        data-index="203"
+      >
+        Animation 204
+      </li>
+      <li
+        data-index="204"
+      >
+        Animation 205
+      </li>
+      <li
+        data-index="205"
+      >
+        Animation 206
+      </li>
+      <li
+        data-index="206"
+      >
+        Animation 207
+      </li>
+      <li
+        data-index="207"
+      >
+        Animation 208
+      </li>
+      <li
+        data-index="208"
+      >
+        Animation 209
+      </li>
+      <li
+        data-index="209"
+      >
+        Animation 210
+      </li>
+      <li
+        data-index="210"
+      >
+        Animation 211
+      </li>
+      <li
+        data-index="211"
+      >
+        Animation 212
+      </li>
+      <li
+        data-index="212"
+      >
+        Animation 213
+      </li>
+      <li
+        data-index="213"
+      >
+        Animation 214
+      </li>
+      <li
+        data-index="214"
+      >
+        Animation 215
+      </li>
+      <li
+        data-index="215"
+      >
+        Animation 216
+      </li>
+      <li
+        data-index="216"
+      >
+        Animation 217
+      </li>
+      <li
+        data-index="217"
+      >
+        Animation 218
+      </li>
+      <li
+        data-index="218"
+      >
+        Animation 219
+      </li>
+      <li
+        data-index="219"
+      >
+        Animation 220
+      </li>
+      <li
+        data-index="220"
+      >
+        Animation 221
+      </li>
+      <li
+        data-index="221"
+      >
+        Animation 222
+      </li>
+      <li
+        data-index="222"
+      >
+        Animation 223
+      </li>
+      <li
+        data-index="223"
+      >
+        Animation 224
+      </li>
+      <li
+        data-index="224"
+      >
+        Animation 225
+      </li>
+      <li
+        data-index="225"
+      >
+        Animation 226
+      </li>
+      <li
+        data-index="226"
+      >
+        Animation 227
+      </li>
+      <li
+        data-index="227"
+      >
+        Animation 228
+      </li>
+      <li
+        data-index="228"
+      >
+        Animation 229
+      </li>
+      <li
+        data-index="229"
+      >
+        Animation 230
+      </li>
+      <li
+        data-index="230"
+      >
+        Animation 231
+      </li>
+      <li
+        data-index="231"
+      >
+        Animation 232
+      </li>
+      <li
+        data-index="232"
+      >
+        Animation 233
+      </li>
+      <li
+        data-index="233"
+      >
+        Animation 234
+      </li>
+      <li
+        data-index="234"
+      >
+        Animation 235
+      </li>
+      <li
+        data-index="235"
+      >
+        Animation 236
+      </li>
+      <li
+        data-index="236"
+      >
+        Animation 237
+      </li>
+      <li
+        data-index="237"
+      >
+        Animation 238
+      </li>
+      <li
+        data-index="238"
+      >
+        Animation 239
+      </li>
+      <li
+        data-index="239"
+      >
+        Animation 240
+      </li>
+      <li
+        data-index="240"
+      >
+        Animation 241
+      </li>
+      <li
+        data-index="241"
+      >
+        Animation 242
+      </li>
+      <li
+        data-index="242"
+      >
+        Animation 243
+      </li>
+      <li
+        data-index="243"
+      >
+        Animation 244
+      </li>
+      <li
+        data-index="244"
+      >
+        Animation 245
+      </li>
+      <li
+        data-index="245"
+      >
+        Animation 246
+      </li>
+      <li
+        data-index="246"
+      >
+        Animation 247
+      </li>
+      <li
+        data-index="247"
+      >
+        Animation 248
+      </li>
+      <li
+        data-index="248"
+      >
+        Animation 249
+      </li>
+      <li
+        data-index="249"
+      >
+        Animation 250
+      </li>
+      <li
+        data-index="250"
+      >
+        Animation 251
+      </li>
+      <li
+        data-index="251"
+      >
+        Animation 252
+      </li>
+      <li
+        data-index="252"
+      >
+        Animation 253
+      </li>
+      <li
+        data-index="253"
+      >
+        Animation 254
+      </li>
+      <li
+        data-index="254"
+      >
+        Animation 255
+      </li>
+      <li
+        data-index="255"
+      >
+        Animation 256
+      </li>
+      <li
+        data-index="256"
+      >
+        Animation 257
+      </li>
+      <li
+        data-index="257"
+      >
+        Animation 258
+      </li>
+      <li
+        data-index="258"
+      >
+        Animation 259
+      </li>
+      <li
+        data-index="259"
+      >
+        Animation 260
+      </li>
+      <li
+        data-index="260"
+      >
+        Animation 261
+      </li>
+      <li
+        data-index="261"
+      >
+        Animation 262
+      </li>
+      <li
+        data-index="262"
+      >
+        Animation 263
+      </li>
+      <li
+        data-index="263"
+      >
+        Animation 264
+      </li>
+      <li
+        data-index="264"
+      >
+        Animation 265
+      </li>
+      <li
+        data-index="265"
+      >
+        Animation 266
+      </li>
+      <li
+        data-index="266"
+      >
+        Animation 267
+      </li>
+      <li
+        data-index="267"
+      >
+        Animation 268
+      </li>
+      <li
+        data-index="268"
+      >
+        Animation 269
+      </li>
+      <li
+        data-index="269"
+      >
+        Animation 270
+      </li>
+      <li
+        data-index="270"
+      >
+        Animation 271
+      </li>
+      <li
+        data-index="271"
+      >
+        Animation 272
+      </li>
+      <li
+        data-index="272"
+      >
+        Animation 273
+      </li>
+      <li
+        data-index="273"
+      >
+        Animation 274
+      </li>
+      <li
+        data-index="274"
+      >
+        Animation 275
+      </li>
+      <li
+        data-index="275"
+      >
+        Animation 276
+      </li>
+      <li
+        data-index="276"
+      >
+        Animation 277
+      </li>
+      <li
+        data-index="277"
+      >
+        Animation 278
+      </li>
+      <li
+        data-index="278"
+      >
+        Animation 279
+      </li>
+      <li
+        data-index="279"
+      >
+        Animation 280
+      </li>
+      <li
+        data-index="280"
+      >
+        Animation 281
+      </li>
+      <li
+        data-index="281"
+      >
+        Animation 282
+      </li>
+      <li
+        data-index="282"
+      >
+        Animation 283
+      </li>
+      <li
+        data-index="283"
+      >
+        Animation 284
+      </li>
+      <li
+        data-index="284"
+      >
+        Animation 285
+      </li>
+      <li
+        data-index="285"
+      >
+        Animation 286
+      </li>
+      <li
+        data-index="286"
+      >
+        Animation 287
+      </li>
+      <li
+        data-index="287"
+      >
+        Animation 288
+      </li>
+      <li
+        data-index="288"
+      >
+        Animation 289
+      </li>
+      <li
+        data-index="289"
+      >
+        Animation 290
+      </li>
+      <li
+        data-index="290"
+      >
+        Animation 291
+      </li>
+      <li
+        data-index="291"
+      >
+        Animation 292
+      </li>
+      <li
+        data-index="292"
+      >
+        Animation 293
+      </li>
+      <li
+        data-index="293"
+      >
+        Animation 294
+      </li>
+      <li
+        data-index="294"
+      >
+        Animation 295
+      </li>
+      <li
+        data-index="295"
+      >
+        Animation 296
+      </li>
+      <li
+        data-index="296"
+      >
+        Animation 297
+      </li>
+      <li
+        data-index="297"
+      >
+        Animation 298
+      </li>
+      <li
+        data-index="298"
+      >
+        Animation 299
+      </li>
+      <li
+        data-index="299"
+      >
+        Animation 300
+      </li>
+      <li
+        data-index="300"
+      >
+        Animation 301
+      </li>
+      <li
+        data-index="301"
+      >
+        Animation 302
+      </li>
+      <li
+        data-index="302"
+      >
+        Animation 303
+      </li>
+      <li
+        data-index="303"
+      >
+        Animation 304
+      </li>
+      <li
+        data-index="304"
+      >
+        Animation 305
+      </li>
+      <li
+        data-index="305"
+      >
+        Animation 306
+      </li>
+      <li
+        data-index="306"
+      >
+        Animation 307
+      </li>
+      <li
+        data-index="307"
+      >
+        Animation 308
+      </li>
+      <li
+        data-index="308"
+      >
+        Animation 309
+      </li>
+      <li
+        data-index="309"
+      >
+        Animation 310
+      </li>
+      <li
+        data-index="310"
+      >
+        Animation 311
+      </li>
+      <li
+        data-index="311"
+      >
+        Animation 312
+      </li>
+      <li
+        data-index="312"
+      >
+        Animation 313
+      </li>
+      <li
+        data-index="313"
+      >
+        Animation 314
+      </li>
+      <li
+        data-index="314"
+      >
+        Animation 315
+      </li>
+      <li
+        data-index="315"
+      >
+        Animation 316
+      </li>
+      <li
+        data-index="316"
+      >
+        Animation 317
+      </li>
+      <li
+        data-index="317"
+      >
+        Animation 318
+      </li>
+      <li
+        data-index="318"
+      >
+        Animation 319
+      </li>
+      <li
+        data-index="319"
+      >
+        Animation 320
+      </li>
+      <li
+        data-index="320"
+      >
+        Animation 321
+      </li>
+      <li
+        data-index="321"
+      >
+        Animation 322
+      </li>
+      <li
+        data-index="322"
+      >
+        Animation 323
+      </li>
+      <li
+        data-index="323"
+      >
+        Animation 324
+      </li>
+      <li
+        data-index="324"
+      >
+        Animation 325
+      </li>
+      <li
+        data-index="325"
+      >
+        Animation 326
+      </li>
+      <li
+        data-index="326"
+      >
+        Animation 327
+      </li>
+      <li
+        data-index="327"
+      >
+        Animation 328
+      </li>
+      <li
+        data-index="328"
+      >
+        Animation 329
+      </li>
+      <li
+        data-index="329"
+      >
+        Animation 330
+      </li>
+      <li
+        data-index="330"
+      >
+        Animation 331
+      </li>
+      <li
+        data-index="331"
+      >
+        Animation 332
+      </li>
+      <li
+        data-index="332"
+      >
+        Animation 333
+      </li>
+      <li
+        data-index="333"
+      >
+        Animation 334
+      </li>
+      <li
+        data-index="334"
+      >
+        Animation 335
+      </li>
+      <li
+        data-index="335"
+      >
+        Animation 336
+      </li>
+      <li
+        data-index="336"
+      >
+        Animation 337
+      </li>
+      <li
+        data-index="337"
+      >
+        Animation 338
+      </li>
+      <li
+        data-index="338"
+      >
+        Animation 339
+      </li>
+      <li
+        data-index="339"
+      >
+        Animation 340
+      </li>
+      <li
+        data-index="340"
+      >
+        Animation 341
+      </li>
+      <li
+        data-index="341"
+      >
+        Animation 342
+      </li>
+      <li
+        data-index="342"
+      >
+        Animation 343
+      </li>
+      <li
+        data-index="343"
+      >
+        Animation 344
+      </li>
+      <li
+        data-index="344"
+      >
+        Animation 345
+      </li>
+      <li
+        data-index="345"
+      >
+        Animation 346
+      </li>
+      <li
+        data-index="346"
+      >
+        Animation 347
+      </li>
+      <li
+        data-index="347"
+      >
+        Animation 348
+      </li>
+      <li
+        data-index="348"
+      >
+        Animation 349
+      </li>
+      <li
+        data-index="349"
+      >
+        Animation 350
+      </li>
+      <li
+        data-index="350"
+      >
+        Animation 351
+      </li>
+      <li
+        data-index="351"
+      >
+        Animation 352
+      </li>
+      <li
+        data-index="352"
+      >
+        Animation 353
+      </li>
+      <li
+        data-index="353"
+      >
+        Animation 354
+      </li>
+      <li
+        data-index="354"
+      >
+        Animation 355
+      </li>
+      <li
+        data-index="355"
+      >
+        Animation 356
+      </li>
+      <li
+        data-index="356"
+      >
+        Animation 357
+      </li>
+      <li
+        data-index="357"
+      >
+        Animation 358
+      </li>
+      <li
+        data-index="358"
+      >
+        Animation 359
+      </li>
+      <li
+        data-index="359"
+      >
+        Animation 360
+      </li>
+      <li
+        data-index="360"
+      >
+        Animation 361
+      </li>
+      <li
+        data-index="361"
+      >
+        Animation 362
+      </li>
+      <li
+        data-index="362"
+      >
+        Animation 363
+      </li>
+      <li
+        data-index="363"
+      >
+        Animation 364
+      </li>
+      <li
+        data-index="364"
+      >
+        Animation 365
+      </li>
+      <li
+        data-index="365"
+      >
+        Animation 366
+      </li>
+      <li
+        data-index="366"
+      >
+        Animation 367
+      </li>
+      <li
+        data-index="367"
+      >
+        Animation 368
+      </li>
+      <li
+        data-index="368"
+      >
+        Animation 369
+      </li>
+      <li
+        data-index="369"
+      >
+        Animation 370
+      </li>
+      <li
+        data-index="370"
+      >
+        Animation 371
+      </li>
+      <li
+        data-index="371"
+      >
+        Animation 372
+      </li>
+      <li
+        data-index="372"
+      >
+        Animation 373
+      </li>
+      <li
+        data-index="373"
+      >
+        Animation 374
+      </li>
+      <li
+        data-index="374"
+      >
+        Animation 375
+      </li>
+      <li
+        data-index="375"
+      >
+        Animation 376
+      </li>
+      <li
+        data-index="376"
+      >
+        Animation 377
+      </li>
+      <li
+        data-index="377"
+      >
+        Animation 378
+      </li>
+      <li
+        data-index="378"
+      >
+        Animation 379
+      </li>
+      <li
+        data-index="379"
+      >
+        Animation 380
+      </li>
+      <li
+        data-index="380"
+      >
+        Animation 381
+      </li>
+      <li
+        data-index="381"
+      >
+        Animation 382
+      </li>
+      <li
+        data-index="382"
+      >
+        Animation 383
+      </li>
+      <li
+        data-index="383"
+      >
+        Animation 384
+      </li>
+      <li
+        data-index="384"
+      >
+        Animation 385
+      </li>
+      <li
+        data-index="385"
+      >
+        Animation 386
+      </li>
+      <li
+        data-index="386"
+      >
+        Animation 387
+      </li>
+      <li
+        data-index="387"
+      >
+        Animation 388
+      </li>
+      <li
+        data-index="388"
+      >
+        Animation 389
+      </li>
+      <li
+        data-index="389"
+      >
+        Animation 390
+      </li>
+      <li
+        data-index="390"
+      >
+        Animation 391
+      </li>
+      <li
+        data-index="391"
+      >
+        Animation 392
+      </li>
+      <li
+        data-index="392"
+      >
+        Animation 393
+      </li>
+      <li
+        data-index="393"
+      >
+        Animation 394
+      </li>
+      <li
+        data-index="394"
+      >
+        Animation 395
+      </li>
+      <li
+        data-index="395"
+      >
+        Animation 396
+      </li>
+      <li
+        data-index="396"
+      >
+        Animation 397
+      </li>
+      <li
+        data-index="397"
+      >
+        Animation 398
+      </li>
+      <li
+        data-index="398"
+      >
+        Animation 399
+      </li>
+      <li
+        data-index="399"
+      >
+        Animation 400
+      </li>
+      <li
+        data-index="400"
+      >
+        Animation 401
+      </li>
+      <li
+        data-index="401"
+      >
+        Animation 402
+      </li>
+      <li
+        data-index="402"
+      >
+        Animation 403
+      </li>
+      <li
+        data-index="403"
+      >
+        Animation 404
+      </li>
+      <li
+        data-index="404"
+      >
+        Animation 405
+      </li>
+      <li
+        data-index="405"
+      >
+        Animation 406
+      </li>
+      <li
+        data-index="406"
+      >
+        Animation 407
+      </li>
+      <li
+        data-index="407"
+      >
+        Animation 408
+      </li>
+      <li
+        data-index="408"
+      >
+        Animation 409
+      </li>
+      <li
+        data-index="409"
+      >
+        Animation 410
+      </li>
+      <li
+        data-index="410"
+      >
+        Animation 411
+      </li>
+      <li
+        data-index="411"
+      >
+        Animation 412
+      </li>
+      <li
+        data-index="412"
+      >
+        Animation 413
+      </li>
+      <li
+        data-index="413"
+      >
+        Animation 414
+      </li>
+      <li
+        data-index="414"
+      >
+        Animation 415
+      </li>
+      <li
+        data-index="415"
+      >
+        Animation 416
+      </li>
+      <li
+        data-index="416"
+      >
+        Animation 417
+      </li>
+      <li
+        data-index="417"
+      >
+        Animation 418
+      </li>
+      <li
+        data-index="418"
+      >
+        Animation 419
+      </li>
+      <li
+        data-index="419"
+      >
+        Animation 420
+      </li>
+      <li
+        data-index="420"
+      >
+        Animation 421
+      </li>
+      <li
+        data-index="421"
+      >
+        Animation 422
+      </li>
+      <li
+        data-index="422"
+      >
+        Animation 423
+      </li>
+      <li
+        data-index="423"
+      >
+        Animation 424
+      </li>
+      <li
+        data-index="424"
+      >
+        Animation 425
+      </li>
+      <li
+        data-index="425"
+      >
+        Animation 426
+      </li>
+      <li
+        data-index="426"
+      >
+        Animation 427
+      </li>
+      <li
+        data-index="427"
+      >
+        Animation 428
+      </li>
+      <li
+        data-index="428"
+      >
+        Animation 429
+      </li>
+      <li
+        data-index="429"
+      >
+        Animation 430
+      </li>
+      <li
+        data-index="430"
+      >
+        Animation 431
+      </li>
+      <li
+        data-index="431"
+      >
+        Animation 432
+      </li>
+      <li
+        data-index="432"
+      >
+        Animation 433
+      </li>
+      <li
+        data-index="433"
+      >
+        Animation 434
+      </li>
+      <li
+        data-index="434"
+      >
+        Animation 435
+      </li>
+      <li
+        data-index="435"
+      >
+        Animation 436
+      </li>
+      <li
+        data-index="436"
+      >
+        Animation 437
+      </li>
+      <li
+        data-index="437"
+      >
+        Animation 438
+      </li>
+      <li
+        data-index="438"
+      >
+        Animation 439
+      </li>
+      <li
+        data-index="439"
+      >
+        Animation 440
+      </li>
+      <li
+        data-index="440"
+      >
+        Animation 441
+      </li>
+      <li
+        data-index="441"
+      >
+        Animation 442
+      </li>
+      <li
+        data-index="442"
+      >
+        Animation 443
+      </li>
+      <li
+        data-index="443"
+      >
+        Animation 444
+      </li>
+      <li
+        data-index="444"
+      >
+        Animation 445
+      </li>
+      <li
+        data-index="445"
+      >
+        Animation 446
+      </li>
+      <li
+        data-index="446"
+      >
+        Animation 447
+      </li>
+      <li
+        data-index="447"
+      >
+        Animation 448
+      </li>
+      <li
+        data-index="448"
+      >
+        Animation 449
+      </li>
+      <li
+        data-index="449"
+      >
+        Animation 450
+      </li>
+      <li
+        data-index="450"
+      >
+        Animation 451
+      </li>
+      <li
+        data-index="451"
+      >
+        Animation 452
+      </li>
+      <li
+        data-index="452"
+      >
+        Animation 453
+      </li>
+      <li
+        data-index="453"
+      >
+        Animation 454
+      </li>
+      <li
+        data-index="454"
+      >
+        Animation 455
+      </li>
+      <li
+        data-index="455"
+      >
+        Animation 456
+      </li>
+      <li
+        data-index="456"
+      >
+        Animation 457
+      </li>
+      <li
+        data-index="457"
+      >
+        Animation 458
+      </li>
+      <li
+        data-index="458"
+      >
+        Animation 459
+      </li>
+      <li
+        data-index="459"
+      >
+        Animation 460
+      </li>
+      <li
+        data-index="460"
+      >
+        Animation 461
+      </li>
+      <li
+        data-index="461"
+      >
+        Animation 462
+      </li>
+      <li
+        data-index="462"
+      >
+        Animation 463
+      </li>
+      <li
+        data-index="463"
+      >
+        Animation 464
+      </li>
+      <li
+        data-index="464"
+      >
+        Animation 465
+      </li>
+      <li
+        data-index="465"
+      >
+        Animation 466
+      </li>
+      <li
+        data-index="466"
+      >
+        Animation 467
+      </li>
+      <li
+        data-index="467"
+      >
+        Animation 468
+      </li>
+      <li
+        data-index="468"
+      >
+        Animation 469
+      </li>
+      <li
+        data-index="469"
+      >
+        Animation 470
+      </li>
+      <li
+        data-index="470"
+      >
+        Animation 471
+      </li>
+      <li
+        data-index="471"
+      >
+        Animation 472
+      </li>
+      <li
+        data-index="472"
+      >
+        Animation 473
+      </li>
+      <li
+        data-index="473"
+      >
+        Animation 474
+      </li>
+      <li
+        data-index="474"
+      >
+        Animation 475
+      </li>
+      <li
+        data-index="475"
+      >
+        Animation 476
+      </li>
+      <li
+        data-index="476"
+      >
+        Animation 477
+      </li>
+      <li
+        data-index="477"
+      >
+        Animation 478
+      </li>
+      <li
+        data-index="478"
+      >
+        Animation 479
+      </li>
+      <li
+        data-index="479"
+      >
+        Animation 480
+      </li>
+      <li
+        data-index="480"
+      >
+        Animation 481
+      </li>
+      <li
+        data-index="481"
+      >
+        Animation 482
+      </li>
+      <li
+        data-index="482"
+      >
+        Animation 483
+      </li>
+      <li
+        data-index="483"
+      >
+        Animation 484
+      </li>
+      <li
+        data-index="484"
+      >
+        Animation 485
+      </li>
+      <li
+        data-index="485"
+      >
+        Animation 486
+      </li>
+      <li
+        data-index="486"
+      >
+        Animation 487
+      </li>
+      <li
+        data-index="487"
+      >
+        Animation 488
+      </li>
+      <li
+        data-index="488"
+      >
+        Animation 489
+      </li>
+      <li
+        data-index="489"
+      >
+        Animation 490
+      </li>
+      <li
+        data-index="490"
+      >
+        Animation 491
+      </li>
+      <li
+        data-index="491"
+      >
+        Animation 492
+      </li>
+      <li
+        data-index="492"
+      >
+        Animation 493
+      </li>
+      <li
+        data-index="493"
+      >
+        Animation 494
+      </li>
+      <li
+        data-index="494"
+      >
+        Animation 495
+      </li>
+      <li
+        data-index="495"
+      >
+        Animation 496
+      </li>
+      <li
+        data-index="496"
+      >
+        Animation 497
+      </li>
+      <li
+        data-index="497"
+      >
+        Animation 498
+      </li>
+      <li
+        data-index="498"
+      >
+        Animation 499
+      </li>
+      <li
+        data-index="499"
+      >
+        Animation 500
+      </li>
+      <li
+        data-index="500"
+      >
+        Animation 501
+      </li>
+      <li
+        data-index="501"
+      >
+        Animation 502
+      </li>
+      <li
+        data-index="502"
+      >
+        Animation 503
+      </li>
+      <li
+        data-index="503"
+      >
+        Animation 504
+      </li>
+      <li
+        data-index="504"
+      >
+        Animation 505
+      </li>
+      <li
+        data-index="505"
+      >
+        Animation 506
+      </li>
+      <li
+        data-index="506"
+      >
+        Animation 507
+      </li>
+      <li
+        data-index="507"
+      >
+        Animation 508
+      </li>
+      <li
+        data-index="508"
+      >
+        Animation 509
+      </li>
+      <li
+        data-index="509"
+      >
+        Animation 510
+      </li>
+      <li
+        data-index="510"
+      >
+        Animation 511
+      </li>
+      <li
+        data-index="511"
+      >
+        Animation 512
+      </li>
+      <li
+        data-index="512"
+      >
+        Animation 513
+      </li>
+      <li
+        data-index="513"
+      >
+        Animation 514
+      </li>
+      <li
+        data-index="514"
+      >
+        Animation 515
+      </li>
+      <li
+        data-index="515"
+      >
+        Animation 516
+      </li>
+      <li
+        data-index="516"
+      >
+        Animation 517
+      </li>
+      <li
+        data-index="517"
+      >
+        Animation 518
+      </li>
+      <li
+        data-index="518"
+      >
+        Animation 519
+      </li>
+      <li
+        data-index="519"
+      >
+        Animation 520
+      </li>
+      <li
+        data-index="520"
+      >
+        Animation 521
+      </li>
+      <li
+        data-index="521"
+      >
+        Animation 522
+      </li>
+      <li
+        data-index="522"
+      >
+        Animation 523
+      </li>
+      <li
+        data-index="523"
+      >
+        Animation 524
+      </li>
+      <li
+        data-index="524"
+      >
+        Animation 525
+      </li>
+      <li
+        data-index="525"
+      >
+        Animation 526
+      </li>
+      <li
+        data-index="526"
+      >
+        Animation 527
+      </li>
+      <li
+        data-index="527"
+      >
+        Animation 528
+      </li>
+      <li
+        data-index="528"
+      >
+        Animation 529
+      </li>
+      <li
+        data-index="529"
+      >
+        Animation 530
+      </li>
+      <li
+        data-index="530"
+      >
+        Animation 531
+      </li>
+      <li
+        data-index="531"
+      >
+        Animation 532
+      </li>
+      <li
+        data-index="532"
+      >
+        Animation 533
+      </li>
+      <li
+        data-index="533"
+      >
+        Animation 534
+      </li>
+      <li
+        data-index="534"
+      >
+        Animation 535
+      </li>
+      <li
+        data-index="535"
+      >
+        Animation 536
+      </li>
+      <li
+        data-index="536"
+      >
+        Animation 537
+      </li>
+      <li
+        data-index="537"
+      >
+        Animation 538
+      </li>
+      <li
+        data-index="538"
+      >
+        Animation 539
+      </li>
+      <li
+        data-index="539"
+      >
+        Animation 540
+      </li>
+      <li
+        data-index="540"
+      >
+        Animation 541
+      </li>
+      <li
+        data-index="541"
+      >
+        Animation 542
+      </li>
+      <li
+        data-index="542"
+      >
+        Animation 543
+      </li>
+      <li
+        data-index="543"
+      >
+        Animation 544
+      </li>
+      <li
+        data-index="544"
+      >
+        Animation 545
+      </li>
+      <li
+        data-index="545"
+      >
+        Animation 546
+      </li>
+      <li
+        data-index="546"
+      >
+        Animation 547
+      </li>
+      <li
+        data-index="547"
+      >
+        Animation 548
+      </li>
+      <li
+        data-index="548"
+      >
+        Animation 549
+      </li>
+      <li
+        data-index="549"
+      >
+        Animation 550
+      </li>
+      <li
+        data-index="550"
+      >
+        Animation 551
+      </li>
+      <li
+        data-index="551"
+      >
+        Animation 552
+      </li>
+      <li
+        data-index="552"
+      >
+        Animation 553
+      </li>
+      <li
+        data-index="553"
+      >
+        Animation 554
+      </li>
+      <li
+        data-index="554"
+      >
+        Animation 555
+      </li>
+      <li
+        data-index="555"
+      >
+        Animation 556
+      </li>
+      <li
+        data-index="556"
+      >
+        Animation 557
+      </li>
+      <li
+        data-index="557"
+      >
+        Animation 558
+      </li>
+      <li
+        data-index="558"
+      >
+        Animation 559
+      </li>
+      <li
+        data-index="559"
+      >
+        Animation 560
+      </li>
+      <li
+        data-index="560"
+      >
+        Animation 561
+      </li>
+      <li
+        data-index="561"
+      >
+        Animation 562
+      </li>
+      <li
+        data-index="562"
+      >
+        Animation 563
+      </li>
+      <li
+        data-index="563"
+      >
+        Animation 564
+      </li>
+      <li
+        data-index="564"
+      >
+        Animation 565
+      </li>
+      <li
+        data-index="565"
+      >
+        Animation 566
+      </li>
+      <li
+        data-index="566"
+      >
+        Animation 567
+      </li>
+      <li
+        data-index="567"
+      >
+        Animation 568
+      </li>
+      <li
+        data-index="568"
+      >
+        Animation 569
+      </li>
+      <li
+        data-index="569"
+      >
+        Animation 570
+      </li>
+      <li
+        data-index="570"
+      >
+        Animation 571
+      </li>
+      <li
+        data-index="571"
+      >
+        Animation 572
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/src/viewer/gui/model_3d/Model3DView.ts b/src/viewer/gui/model_3d/Model3DView.ts
deleted file mode 100644
index f98e28df..00000000
--- a/src/viewer/gui/model_3d/Model3DView.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import "./Model3DView.css";
-import { RendererWidget } from "../../../core/gui/RendererWidget";
-import { Model3DRenderer } from "../../rendering/Model3DRenderer";
-import { Model3DToolBarView } from "./Model3DToolBarView";
-import { Model3DSelectListView } from "./Model3DSelectListView";
-import { CharacterClassModel } from "../../model/CharacterClassModel";
-import { CharacterClassAnimationModel } from "../../model/CharacterClassAnimationModel";
-import { Model3DStore } from "../../stores/Model3DStore";
-import { DisposableThreeRenderer } from "../../../core/rendering/Renderer";
-import { div } from "../../../core/gui/dom";
-import { ResizableView } from "../../../core/gui/ResizableView";
-import { GuiStore } from "../../../core/stores/GuiStore";
-
-const MODEL_LIST_WIDTH = 100;
-const ANIMATION_LIST_WIDTH = 140;
-
-export class Model3DView extends ResizableView {
-    readonly element = div({ className: "viewer_Model3DView" });
-
-    private tool_bar_view: Model3DToolBarView;
-    private model_list_view: Model3DSelectListView<CharacterClassModel>;
-    private animation_list_view: Model3DSelectListView<CharacterClassAnimationModel>;
-    private renderer_view: RendererWidget;
-
-    constructor(
-        private readonly gui_store: GuiStore,
-        model_3d_store: Model3DStore,
-        three_renderer: DisposableThreeRenderer,
-    ) {
-        super();
-
-        this.tool_bar_view = this.add(new Model3DToolBarView(model_3d_store));
-        this.model_list_view = this.add(
-            new Model3DSelectListView(
-                model_3d_store.models,
-                model_3d_store.current_model,
-                model_3d_store.set_current_model,
-            ),
-        );
-        this.animation_list_view = this.add(
-            new Model3DSelectListView(
-                model_3d_store.animations,
-                model_3d_store.current_animation,
-                model_3d_store.set_current_animation,
-            ),
-        );
-        this.renderer_view = this.add(
-            new RendererWidget(new Model3DRenderer(three_renderer, model_3d_store)),
-        );
-
-        this.animation_list_view.borders = true;
-
-        this.element.append(
-            this.tool_bar_view.element,
-            div(
-                { className: "viewer_Model3DView_container" },
-                this.model_list_view.element,
-                this.animation_list_view.element,
-                this.renderer_view.element,
-            ),
-        );
-
-        this.finalize_construction();
-    }
-
-    activate(): void {
-        this.renderer_view.start_rendering();
-        super.activate();
-    }
-
-    deactivate(): void {
-        super.deactivate();
-        this.renderer_view.stop_rendering();
-    }
-
-    resize(width: number, height: number): this {
-        super.resize(width, height);
-
-        const container_height = Math.max(0, height - this.tool_bar_view.height);
-
-        this.model_list_view.resize(MODEL_LIST_WIDTH, container_height);
-        this.animation_list_view.resize(ANIMATION_LIST_WIDTH, container_height);
-        this.renderer_view.resize(
-            Math.max(0, width - MODEL_LIST_WIDTH - ANIMATION_LIST_WIDTH),
-            container_height,
-        );
-
-        return this;
-    }
-}
diff --git a/src/viewer/index.ts b/src/viewer/index.ts
index 2afbf33a..5d7b6188 100644
--- a/src/viewer/index.ts
+++ b/src/viewer/index.ts
@@ -4,9 +4,18 @@ import { HttpClient } from "../core/HttpClient";
 import { DisposableThreeRenderer } from "../core/rendering/Renderer";
 import { Disposable } from "../core/observable/Disposable";
 import { Disposer } from "../core/observable/Disposer";
+import { TextureRenderer } from "./rendering/TextureRenderer";
+import { ModelRenderer } from "./rendering/ModelRenderer";
+import { Random } from "../core/Random";
+import { ModelToolBarView } from "./gui/model/ModelToolBarView";
+import { ModelStore } from "./stores/ModelStore";
+import { ModelToolBarController } from "./controllers/model/ModelToolBarController";
+import { CharacterClassOptionsView } from "./gui/model/CharacterClassOptionsView";
+import { CharacterClassOptionsController } from "./controllers/model/CharacterClassOptionsController";
 
 export function initialize_viewer(
     http_client: HttpClient,
+    random: Random,
     gui_store: GuiStore,
     create_three_renderer: () => DisposableThreeRenderer,
 ): { view: ViewerView } & Disposable {
@@ -14,36 +23,36 @@ export function initialize_viewer(
 
     const view = new ViewerView(
         gui_store,
+
         async () => {
-            const { Model3DStore } = await import("./stores/Model3DStore");
-            const { Model3DView } = await import("./gui/model_3d/Model3DView");
+            const { ModelController } = await import("./controllers/model/ModelController");
+            const { ModelView } = await import("./gui/model/ModelView");
             const { CharacterClassAssetLoader } = await import(
                 "./loading/CharacterClassAssetLoader"
             );
             const asset_loader = disposer.add(new CharacterClassAssetLoader(http_client));
-            const store = new Model3DStore(asset_loader);
+            const store = disposer.add(new ModelStore(asset_loader, random));
+            const model_controller = new ModelController(store);
+            const model_tool_bar_controller = new ModelToolBarController(store);
+            const character_class_options_controller = new CharacterClassOptionsController(store);
 
-            if (disposer.disposed) {
-                store.dispose();
-            } else {
-                disposer.add(store);
-            }
-
-            return new Model3DView(gui_store, store, create_three_renderer());
+            return new ModelView(
+                model_controller,
+                new ModelToolBarView(model_tool_bar_controller),
+                new CharacterClassOptionsView(character_class_options_controller),
+                new ModelRenderer(store, create_three_renderer()),
+            );
         },
 
         async () => {
-            const { TextureStore } = await import("./stores/TextureStore");
+            const { TextureController } = await import("./controllers/TextureController");
             const { TextureView } = await import("./gui/TextureView");
-            const store = new TextureStore();
+            const controller = disposer.add(new TextureController());
 
-            if (disposer.disposed) {
-                store.dispose();
-            } else {
-                disposer.add(store);
-            }
-
-            return new TextureView(store, create_three_renderer());
+            return new TextureView(
+                controller,
+                new TextureRenderer(controller, create_three_renderer()),
+            );
         },
     );
 
diff --git a/src/viewer/loading/CharacterClassAssetLoader.ts b/src/viewer/loading/CharacterClassAssetLoader.ts
index 2accd6f3..5c7d6359 100644
--- a/src/viewer/loading/CharacterClassAssetLoader.ts
+++ b/src/viewer/loading/CharacterClassAssetLoader.ts
@@ -327,7 +327,7 @@ function texture_ids(
         case FOMARL: {
             const body_idx = body * 16;
             return {
-                section_id: section_id + 310,
+                section_id: section_id + 326,
                 body: [body_idx, body_idx + 2, body_idx + 1, 322 /*hands*/],
                 head: [288],
                 hair: [undefined, undefined, 308],
diff --git a/src/viewer/rendering/Model3DRenderer.ts b/src/viewer/rendering/ModelRenderer.ts
similarity index 64%
rename from src/viewer/rendering/Model3DRenderer.ts
rename to src/viewer/rendering/ModelRenderer.ts
index 2418b959..cd8ef734 100644
--- a/src/viewer/rendering/Model3DRenderer.ts
+++ b/src/viewer/rendering/ModelRenderer.ts
@@ -1,10 +1,8 @@
 import {
-    AdditiveBlending,
     AnimationClip,
     AnimationMixer,
     Clock,
     DoubleSide,
-    Mesh,
     MeshBasicMaterial,
     MeshLambertMaterial,
     Object3D,
@@ -25,10 +23,10 @@ import {
 import { DisposableThreeRenderer, Renderer } from "../../core/rendering/Renderer";
 import { Disposer } from "../../core/observable/Disposer";
 import { ChangeEvent } from "../../core/observable/Observable";
-import { Model3DStore } from "../stores/Model3DStore";
 import { LogManager } from "../../core/Logger";
+import { ModelStore } from "../stores/ModelStore";
 
-const logger = LogManager.get("viewer/rendering/Model3DRenderer");
+const logger = LogManager.get("viewer/rendering/ModelRenderer");
 
 const DEFAULT_MATERIAL = new MeshLambertMaterial({
     color: 0xffffff,
@@ -40,7 +38,7 @@ const DEFAULT_SKINNED_MATERIAL = new MeshLambertMaterial({
     side: DoubleSide,
 });
 
-export class Model3DRenderer extends Renderer implements Disposable {
+export class ModelRenderer extends Renderer implements Disposable {
     private readonly disposer = new Disposer();
     private readonly clock = new Clock();
     private mesh?: Object3D;
@@ -53,23 +51,21 @@ export class Model3DRenderer extends Renderer implements Disposable {
 
     readonly camera = new PerspectiveCamera(75, 1, 1, 200);
 
-    constructor(
-        three_renderer: DisposableThreeRenderer,
-        private readonly model_3d_store: Model3DStore,
-    ) {
+    constructor(private readonly store: ModelStore, three_renderer: DisposableThreeRenderer) {
         super(three_renderer);
 
         this.disposer.add_all(
-            model_3d_store.current_nj_data.observe(this.nj_data_or_xvm_changed),
-            model_3d_store.current_textures.observe(this.nj_data_or_xvm_changed),
-            model_3d_store.current_nj_motion.observe(this.nj_motion_changed),
-            model_3d_store.show_skeleton.observe(this.show_skeleton_changed),
-            model_3d_store.animation_playing.observe(this.animation_playing_changed),
-            model_3d_store.animation_frame_rate.observe(this.animation_frame_rate_changed),
-            model_3d_store.animation_frame.observe(this.animation_frame_changed),
+            store.current_nj_object.observe(this.nj_object_or_xvm_changed),
+            store.current_textures.observe(this.nj_object_or_xvm_changed),
+            store.current_nj_motion.observe(this.nj_motion_changed),
+            store.show_skeleton.observe(this.show_skeleton_changed),
+            store.animation_playing.observe(this.animation_playing_changed),
+            store.animation_frame_rate.observe(this.animation_frame_rate_changed),
+            store.animation_frame.observe(this.animation_frame_changed),
         );
 
         this.init_camera_controls();
+        this.reset_camera(new Vector3(0, 10, 20), new Vector3(0, 0, 0));
     }
 
     set_size(width: number, height: number): void {
@@ -97,7 +93,7 @@ export class Model3DRenderer extends Renderer implements Disposable {
         }
     }
 
-    private nj_data_or_xvm_changed = (): void => {
+    private nj_object_or_xvm_changed = (): void => {
         if (this.mesh) {
             this.scene.remove(this.mesh);
             this.mesh = undefined;
@@ -105,20 +101,22 @@ export class Model3DRenderer extends Renderer implements Disposable {
             this.skeleton_helper = undefined;
         }
 
-        if (this.animation) {
-            this.animation.mixer.stopAllAction();
-            if (this.mesh) this.animation.mixer.uncacheRoot(this.mesh);
-            this.animation = undefined;
-        }
+        const nj_object = this.store.current_nj_object.val;
 
-        const nj_data = this.model_3d_store.current_nj_data.val;
+        if (nj_object) {
+            // Stop animation and store animation time.
+            let animation_time: number | undefined;
 
-        if (nj_data) {
-            const { nj_object, has_skeleton } = nj_data;
+            if (this.animation) {
+                const mixer = this.animation.mixer;
+                animation_time = mixer.existingAction(this.animation.clip)?.time;
+                mixer.stopAllAction();
+                mixer.uncacheAction(this.animation.clip);
+                this.animation = undefined;
+            }
 
-            let mesh: Mesh;
-
-            const textures = this.model_3d_store.current_textures.val.map(tex => {
+            // Convert textures and geometry.
+            const textures = this.store.current_textures.val.map(tex => {
                 if (tex) {
                     try {
                         return xvr_texture_to_texture(tex);
@@ -130,6 +128,9 @@ export class Model3DRenderer extends Renderer implements Disposable {
                 return undefined;
             });
 
+            const geometry = ninja_object_to_buffer_geometry(nj_object);
+            const has_skeleton = geometry.getAttribute("skinIndex") != undefined;
+
             const materials = textures.map(tex =>
                 tex
                     ? new MeshBasicMaterial({
@@ -145,64 +146,66 @@ export class Model3DRenderer extends Renderer implements Disposable {
                       }),
             );
 
-            if (has_skeleton) {
-                mesh = create_skinned_mesh(
-                    ninja_object_to_buffer_geometry(nj_object),
-                    materials,
-                    DEFAULT_SKINNED_MATERIAL,
-                );
-            } else {
-                mesh = create_mesh(
-                    ninja_object_to_buffer_geometry(nj_object),
-                    materials,
-                    DEFAULT_MATERIAL,
-                );
-            }
+            this.mesh = has_skeleton
+                ? create_skinned_mesh(geometry, materials, DEFAULT_SKINNED_MATERIAL)
+                : create_mesh(geometry, materials, DEFAULT_MATERIAL);
 
             // Make sure we rotate around the center of the model instead of its origin.
-            const bb = mesh.geometry.boundingBox;
+            const bb = geometry.boundingBox;
             const height = bb.max.y - bb.min.y;
-            mesh.translateY(-height / 2 - bb.min.y);
+            this.mesh.translateY(-height / 2 - bb.min.y);
 
-            this.mesh = mesh;
-            this.scene.add(mesh);
+            this.scene.add(this.mesh);
 
-            this.skeleton_helper = new SkeletonHelper(mesh);
-            this.skeleton_helper.visible = this.model_3d_store.show_skeleton.val;
+            // Add skeleton.
+            this.skeleton_helper = new SkeletonHelper(this.mesh);
+            this.skeleton_helper.visible = this.store.show_skeleton.val;
             (this.skeleton_helper.material as any).linewidth = 3;
             this.scene.add(this.skeleton_helper);
 
-            this.reset_camera(new Vector3(0, 10, 20), new Vector3(0, 0, 0));
+            // Create a new animation mixer and clip.
+            const nj_motion = this.store.current_nj_motion.val;
+
+            if (nj_motion) {
+                const mixer = new AnimationMixer(this.mesh);
+                mixer.timeScale = this.store.animation_frame_rate.val / PSO_FRAME_RATE;
+
+                const clip = create_animation_clip(nj_object, nj_motion);
+
+                this.animation = { mixer, clip };
+
+                const action = mixer.clipAction(clip, this.mesh);
+                action.time = animation_time ?? 0;
+                action.play();
+            }
         }
 
         this.schedule_render();
     };
 
     private nj_motion_changed = ({ value: nj_motion }: ChangeEvent<NjMotion | undefined>): void => {
-        let mixer!: AnimationMixer;
+        let mixer: AnimationMixer | undefined;
 
         if (this.animation) {
             this.animation.mixer.stopAllAction();
+            this.animation.mixer.uncacheAction(this.animation.clip);
             mixer = this.animation.mixer;
         }
 
-        const nj_data = this.model_3d_store.current_nj_data.val;
+        const nj_object = this.store.current_nj_object.val;
 
-        if (!this.mesh || !(this.mesh instanceof SkinnedMesh) || !nj_motion || !nj_data) return;
+        if (!this.mesh || !(this.mesh instanceof SkinnedMesh) || !nj_motion || !nj_object) return;
 
-        if (!this.animation) {
+        if (!mixer) {
             mixer = new AnimationMixer(this.mesh);
         }
 
-        const clip = create_animation_clip(nj_data.nj_object, nj_motion);
+        const clip = create_animation_clip(nj_object, nj_motion);
 
-        this.animation = {
-            mixer,
-            clip,
-        };
+        this.animation = { mixer, clip };
 
         this.clock.start();
-        this.animation.mixer.clipAction(this.animation.clip).play();
+        mixer.clipAction(clip).play();
         this.schedule_render();
     };
 
@@ -233,7 +236,7 @@ export class Model3DRenderer extends Renderer implements Disposable {
     };
 
     private animation_frame_changed = ({ value: frame }: ChangeEvent<number>): void => {
-        const nj_motion = this.model_3d_store.current_nj_motion.val;
+        const nj_motion = this.store.current_nj_motion.val;
 
         if (this.animation && nj_motion) {
             const frame_count = nj_motion.frame_count;
@@ -255,7 +258,7 @@ export class Model3DRenderer extends Renderer implements Disposable {
 
             if (!action.paused) {
                 this.update_animation_time = false;
-                this.model_3d_store.set_animation_frame(action.time * PSO_FRAME_RATE + 1);
+                this.store.set_animation_frame(action.time * PSO_FRAME_RATE + 1);
                 this.update_animation_time = true;
             }
         }
diff --git a/src/viewer/rendering/TextureRenderer.ts b/src/viewer/rendering/TextureRenderer.ts
index 42d534fb..ad79cc5d 100644
--- a/src/viewer/rendering/TextureRenderer.ts
+++ b/src/viewer/rendering/TextureRenderer.ts
@@ -10,10 +10,10 @@ import {
 import { Disposable } from "../../core/observable/Disposable";
 import { DisposableThreeRenderer, Renderer } from "../../core/rendering/Renderer";
 import { Disposer } from "../../core/observable/Disposer";
-import { TextureStore } from "../stores/TextureStore";
 import { XvrTexture } from "../../core/data_formats/parsing/ninja/texture";
 import { xvr_texture_to_texture } from "../../core/rendering/conversion/ninja_textures";
 import { LogManager } from "../../core/Logger";
+import { TextureController } from "../controllers/TextureController";
 
 const logger = LogManager.get("viewer/rendering/TextureRenderer");
 
@@ -23,11 +23,11 @@ export class TextureRenderer extends Renderer implements Disposable {
 
     readonly camera = new OrthographicCamera(-400, 400, 300, -300, 1, 10);
 
-    constructor(three_renderer: DisposableThreeRenderer, texture_store: TextureStore) {
+    constructor(ctrl: TextureController, three_renderer: DisposableThreeRenderer) {
         super(three_renderer);
 
         this.disposer.add_all(
-            texture_store.textures.observe(({ value: textures }) => {
+            ctrl.textures.observe(({ value: textures }) => {
                 this.scene.remove(...this.quad_meshes);
 
                 this.render_textures(textures);
diff --git a/src/viewer/stores/Model3DStore.ts b/src/viewer/stores/Model3DStore.ts
deleted file mode 100644
index 912d1852..00000000
--- a/src/viewer/stores/Model3DStore.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import { ArrayBufferCursor } from "../../core/data_formats/cursor/ArrayBufferCursor";
-import { Endianness } from "../../core/data_formats/Endianness";
-import { NjMotion, parse_njm } from "../../core/data_formats/parsing/ninja/motion";
-import { NjObject, parse_nj, parse_xj } from "../../core/data_formats/parsing/ninja";
-import {
-    CharacterClassModel,
-    FOMAR,
-    FOMARL,
-    FONEWEARL,
-    FONEWM,
-    HUCASEAL,
-    HUCAST,
-    HUMAR,
-    HUNEWEARL,
-    RACASEAL,
-    RACAST,
-    RAMAR,
-    RAMARL,
-} from "../model/CharacterClassModel";
-import { CharacterClassAnimationModel } from "../model/CharacterClassAnimationModel";
-import { WritableProperty } from "../../core/observable/property/WritableProperty";
-import { read_file } from "../../core/read_file";
-import { list_property, property } from "../../core/observable";
-import { Property } from "../../core/observable/property/Property";
-import { PSO_FRAME_RATE } from "../../core/rendering/conversion/ninja_animation";
-import { parse_xvm, XvrTexture } from "../../core/data_formats/parsing/ninja/texture";
-import { CharacterClassAssetLoader } from "../loading/CharacterClassAssetLoader";
-import { Store } from "../../core/stores/Store";
-import { LogManager } from "../../core/Logger";
-import { ListProperty } from "../../core/observable/property/list/ListProperty";
-import { parse_afs } from "../../core/data_formats/parsing/afs";
-import { random_array_element, random_integer } from "../../core/util";
-import { SectionIds } from "../../core/model";
-
-const logger = LogManager.get("viewer/stores/ModelStore");
-
-export type NjData = {
-    nj_object: NjObject;
-    bone_count: number;
-    has_skeleton: boolean;
-};
-
-export class Model3DStore extends Store {
-    private readonly _current_model: WritableProperty<CharacterClassModel | undefined> = property(
-        undefined,
-    );
-    private readonly _current_nj_data = property<NjData | undefined>(undefined);
-    private readonly _current_textures = list_property<XvrTexture | undefined>();
-    private readonly _show_skeleton: WritableProperty<boolean> = property(false);
-    private readonly _current_animation: WritableProperty<
-        CharacterClassAnimationModel | undefined
-    > = property(undefined);
-    private readonly _current_nj_motion = property<NjMotion | undefined>(undefined);
-    private readonly _animation_playing: WritableProperty<boolean> = property(true);
-    private readonly _animation_frame_rate: WritableProperty<number> = property(PSO_FRAME_RATE);
-    private readonly _animation_frame: WritableProperty<number> = property(0);
-
-    readonly models: readonly CharacterClassModel[] = [
-        HUMAR,
-        HUNEWEARL,
-        HUCAST,
-        HUCASEAL,
-        RAMAR,
-        RAMARL,
-        RACAST,
-        RACASEAL,
-        FOMAR,
-        FOMARL,
-        FONEWM,
-        FONEWEARL,
-    ];
-
-    readonly animations: readonly CharacterClassAnimationModel[] = new Array(572)
-        .fill(undefined)
-        .map((_, i) => new CharacterClassAnimationModel(i, `Animation ${i + 1}`));
-
-    readonly current_model: Property<CharacterClassModel | undefined> = this._current_model;
-    readonly current_nj_data: Property<NjData | undefined> = this._current_nj_data;
-    readonly current_textures: ListProperty<XvrTexture | undefined> = this._current_textures;
-    readonly show_skeleton: Property<boolean> = this._show_skeleton;
-    readonly current_animation: Property<CharacterClassAnimationModel | undefined> = this
-        ._current_animation;
-    readonly current_nj_motion: Property<NjMotion | undefined> = this._current_nj_motion;
-    readonly animation_playing: Property<boolean> = this._animation_playing;
-    readonly animation_frame_rate: Property<number> = this._animation_frame_rate;
-    readonly animation_frame: Property<number> = this._animation_frame;
-    readonly animation_frame_count: Property<number> = this.current_nj_motion.map(njm =>
-        njm ? njm.frame_count : 0,
-    );
-
-    constructor(private readonly asset_loader: CharacterClassAssetLoader) {
-        super();
-
-        this.disposables(
-            this.current_model.observe(({ value }) => this.load_model(value)),
-            this.current_animation.observe(({ value }) => this.load_animation(value)),
-        );
-
-        this.set_current_model(random_array_element(this.models));
-    }
-
-    set_current_model = (current_model?: CharacterClassModel): void => {
-        this._current_model.val = current_model;
-    };
-
-    set_show_skeleton = (show_skeleton: boolean): void => {
-        this._show_skeleton.val = show_skeleton;
-    };
-
-    set_current_animation = (animation?: CharacterClassAnimationModel): void => {
-        this._current_animation.val = animation;
-    };
-
-    set_animation_playing = (playing: boolean): void => {
-        this._animation_playing.val = playing;
-    };
-
-    set_animation_frame_rate = (frame_rate: number): void => {
-        this._animation_frame_rate.val = frame_rate;
-    };
-
-    set_animation_frame = (frame: number): void => {
-        this._animation_frame.val = frame;
-    };
-
-    // TODO: notify user of problems.
-    load_file = async (file: File): Promise<void> => {
-        try {
-            const buffer = await read_file(file);
-            const cursor = new ArrayBufferCursor(buffer, Endianness.Little);
-
-            if (file.name.endsWith(".nj")) {
-                this.set_current_model(undefined);
-                this._current_textures.clear();
-
-                const nj_object = parse_nj(cursor)[0];
-
-                this.set_current_nj_data({
-                    nj_object,
-                    bone_count: nj_object.bone_count(),
-                    has_skeleton: true,
-                });
-            } else if (file.name.endsWith(".xj")) {
-                this.set_current_model(undefined);
-                this._current_textures.clear();
-
-                const nj_object = parse_xj(cursor)[0];
-
-                this.set_current_nj_data({
-                    nj_object,
-                    bone_count: 0,
-                    has_skeleton: false,
-                });
-            } else if (file.name.endsWith(".njm")) {
-                this.set_current_animation(undefined);
-                this._current_nj_motion.val = undefined;
-
-                const nj_data = this.current_nj_data.val;
-
-                if (nj_data) {
-                    this.set_animation_playing(true);
-                    this._current_nj_motion.val = parse_njm(cursor, nj_data.bone_count);
-                }
-            } else if (file.name.endsWith(".xvm")) {
-                this._current_textures.val = parse_xvm(cursor).textures;
-            } else if (file.name.endsWith(".afs")) {
-                const files = parse_afs(cursor);
-                const textures: XvrTexture[] = [];
-
-                for (const file of files) {
-                    textures.push(
-                        ...parse_xvm(new ArrayBufferCursor(file, Endianness.Little)).textures,
-                    );
-                }
-
-                this._current_textures.val = textures;
-            } else {
-                logger.error(`Unknown file extension in filename "${file.name}".`);
-            }
-        } catch (e) {
-            logger.error("Couldn't read file.", e);
-        }
-    };
-
-    private load_model = async (model?: CharacterClassModel): Promise<void> => {
-        this.set_current_animation(undefined);
-
-        if (model) {
-            try {
-                this.set_current_nj_data(undefined);
-
-                const nj_object = await this.asset_loader.load_geometry(model);
-
-                this._current_textures.val = await this.asset_loader.load_textures(
-                    model,
-                    random_array_element(SectionIds),
-                    random_integer(0, model.body_style_count),
-                );
-
-                this.set_current_nj_data({
-                    nj_object,
-                    // Ignore the bones from the head parts.
-                    bone_count: model ? 64 : nj_object.bone_count(),
-                    has_skeleton: true,
-                });
-            } catch (e) {
-                logger.error(`Couldn't load model for ${model.name}.`);
-                this._current_nj_data.val = undefined;
-            }
-        } else {
-            this._current_nj_data.val = undefined;
-        }
-    };
-
-    private set_current_nj_data(nj_data?: NjData): void {
-        this._current_nj_data.val = nj_data;
-    }
-
-    private load_animation = async (animation?: CharacterClassAnimationModel): Promise<void> => {
-        const nj_data = this.current_nj_data.val;
-
-        if (nj_data && animation) {
-            try {
-                this._current_nj_motion.val = await this.asset_loader.load_animation(
-                    animation.id,
-                    nj_data.bone_count,
-                );
-                this.set_animation_playing(true);
-            } catch (e) {
-                logger.error(`Couldn't load animation "${animation.name}".`);
-                this._current_nj_motion.val = undefined;
-            }
-        } else {
-            this._current_nj_motion.val = undefined;
-        }
-    };
-}
diff --git a/src/viewer/stores/ModelStore.ts b/src/viewer/stores/ModelStore.ts
new file mode 100644
index 00000000..167134ed
--- /dev/null
+++ b/src/viewer/stores/ModelStore.ts
@@ -0,0 +1,226 @@
+import { Store } from "../../core/stores/Store";
+import { WritableProperty } from "../../core/observable/property/WritableProperty";
+import {
+    CharacterClassModel,
+    FOMAR,
+    FOMARL,
+    FONEWEARL,
+    FONEWM,
+    HUCASEAL,
+    HUCAST,
+    HUMAR,
+    HUNEWEARL,
+    RACASEAL,
+    RACAST,
+    RAMAR,
+    RAMARL,
+} from "../model/CharacterClassModel";
+import { list_property, property } from "../../core/observable";
+import { XvrTexture } from "../../core/data_formats/parsing/ninja/texture";
+import { CharacterClassAnimationModel } from "../model/CharacterClassAnimationModel";
+import { NjMotion } from "../../core/data_formats/parsing/ninja/motion";
+import { PSO_FRAME_RATE } from "../../core/rendering/conversion/ninja_animation";
+import { Property } from "../../core/observable/property/Property";
+import { ListProperty } from "../../core/observable/property/list/ListProperty";
+import { CharacterClassAssetLoader } from "../loading/CharacterClassAssetLoader";
+import { Random } from "../../core/Random";
+import { SectionId, SectionIds } from "../../core/model";
+import { LogManager } from "../../core/Logger";
+import { NjObject } from "../../core/data_formats/parsing/ninja";
+
+const logger = LogManager.get("viewer/stores/ModelStore");
+
+export type NjData = {
+    readonly nj_object: NjObject;
+    readonly bone_count: number;
+    readonly has_skeleton: boolean;
+};
+
+export class ModelStore extends Store {
+    // Character classes and their animations.
+    private readonly _current_character_class: WritableProperty<
+        CharacterClassModel | undefined
+    > = property(undefined);
+    private readonly _current_section_id: WritableProperty<SectionId>;
+    private readonly _current_body: WritableProperty<number | undefined> = property(0);
+    private readonly _current_animation: WritableProperty<
+        CharacterClassAnimationModel | undefined
+    > = property(undefined);
+
+    // Geometry, textures and animations.
+    private readonly _current_nj_object = property<NjObject | undefined>(undefined);
+    private readonly _current_textures = list_property<XvrTexture | undefined>();
+    private readonly _current_nj_motion = property<NjMotion | undefined>(undefined);
+
+    // User settings.
+    private readonly _show_skeleton: WritableProperty<boolean> = property(false);
+    private readonly _animation_playing: WritableProperty<boolean> = property(true);
+    private readonly _animation_frame_rate: WritableProperty<number> = property(PSO_FRAME_RATE);
+    private readonly _animation_frame: WritableProperty<number> = property(0);
+
+    // Character classes and their animations.
+    readonly character_classes: readonly CharacterClassModel[] = [
+        HUMAR,
+        HUNEWEARL,
+        HUCAST,
+        HUCASEAL,
+        RAMAR,
+        RAMARL,
+        RACAST,
+        RACASEAL,
+        FOMAR,
+        FOMARL,
+        FONEWM,
+        FONEWEARL,
+    ];
+    readonly current_character_class: Property<CharacterClassModel | undefined> = this
+        ._current_character_class;
+    readonly current_section_id: Property<SectionId>;
+    readonly current_body: Property<number | undefined> = this._current_body;
+    readonly animations: readonly CharacterClassAnimationModel[] = new Array(572)
+        .fill(undefined)
+        .map((_, i) => new CharacterClassAnimationModel(i, `Animation ${i + 1}`));
+    readonly current_animation: Property<CharacterClassAnimationModel | undefined> = this
+        ._current_animation;
+
+    // Geometry, textures and animations.
+    readonly current_nj_object: Property<NjObject | undefined> = this._current_nj_object;
+    readonly current_textures: ListProperty<XvrTexture | undefined> = this._current_textures;
+    readonly current_nj_motion: Property<NjMotion | undefined> = this._current_nj_motion;
+    readonly animation_frame_count: Property<number> = this.current_nj_motion.map(njm =>
+        njm ? njm.frame_count : 0,
+    );
+
+    // User settings.
+    readonly show_skeleton: Property<boolean> = this._show_skeleton;
+    readonly animation_playing: Property<boolean> = this._animation_playing;
+    readonly animation_frame_rate: Property<number> = this._animation_frame_rate;
+    readonly animation_frame: Property<number> = this._animation_frame;
+
+    constructor(
+        private readonly asset_loader: CharacterClassAssetLoader,
+        private readonly random: Random,
+    ) {
+        super();
+
+        this._current_section_id = property(random.sample_array(SectionIds));
+        this.current_section_id = this._current_section_id;
+
+        this.disposables(
+            this.current_character_class.observe(this.load_character_class_model),
+            this.current_section_id.observe(this.load_character_class_model),
+            this.current_body.observe(this.load_character_class_model),
+            this.current_animation.observe(this.load_animation),
+        );
+
+        const character_class = random.sample_array(this.character_classes);
+        this.set_current_character_class(character_class);
+    }
+
+    set_current_character_class = (character_class?: CharacterClassModel): void => {
+        if (this._current_character_class.val !== character_class) {
+            this._current_character_class.val = character_class;
+            this.set_current_body(
+                character_class
+                    ? this.random.integer(0, character_class.body_style_count)
+                    : undefined,
+            );
+
+            if (this.current_animation.val == undefined) {
+                this.set_current_nj_motion(undefined);
+            }
+        }
+    };
+
+    set_current_section_id = (section_id: SectionId): void => {
+        this._current_section_id.val = section_id;
+    };
+
+    set_current_body = (body?: number): void => {
+        this._current_body.val = body;
+    };
+
+    set_current_animation = (animation?: CharacterClassAnimationModel): void => {
+        if (this._current_animation.val !== animation) {
+            this._current_animation.val = animation;
+        }
+    };
+
+    set_current_nj_object = (nj_object?: NjObject): void => {
+        this.set_current_character_class(undefined);
+        this.set_current_animation(undefined);
+        this.set_current_textures([]);
+        this.set_current_nj_motion(undefined);
+        this._current_nj_object.val = nj_object;
+    };
+
+    set_current_textures = (textures: (XvrTexture | undefined)[]): void => {
+        this._current_textures.val = textures;
+    };
+
+    set_current_nj_motion = (nj_motion?: NjMotion): void => {
+        this.set_current_animation(undefined);
+        this._current_nj_motion.val = nj_motion;
+    };
+
+    set_show_skeleton = (show_skeleton: boolean): void => {
+        this._show_skeleton.val = show_skeleton;
+    };
+
+    set_animation_playing = (playing: boolean): void => {
+        this._animation_playing.val = playing;
+    };
+
+    set_animation_frame_rate = (frame_rate: number): void => {
+        this._animation_frame_rate.val = frame_rate;
+    };
+
+    set_animation_frame = (frame: number): void => {
+        this._animation_frame.val = frame;
+    };
+
+    private load_character_class_model = async (): Promise<void> => {
+        const character_class = this.current_character_class.val;
+        if (character_class == undefined) return;
+
+        const body = this.current_body.val;
+        if (body == undefined) return;
+
+        try {
+            this._current_nj_object.val = undefined;
+
+            const nj_object = await this.asset_loader.load_geometry(character_class);
+
+            this._current_textures.val = await this.asset_loader.load_textures(
+                character_class,
+                this.current_section_id.val,
+                body,
+            );
+
+            this._current_nj_object.val = nj_object;
+        } catch (e) {
+            logger.error(`Couldn't load model for ${character_class.name}.`);
+            this._current_nj_object.val = undefined;
+        }
+    };
+
+    private load_animation = async (): Promise<void> => {
+        const nj_object = this._current_nj_object.val;
+        const animation = this.current_animation.val;
+
+        if (nj_object && animation) {
+            try {
+                this._current_nj_motion.val = await this.asset_loader.load_animation(
+                    animation.id,
+                    64,
+                );
+                this.set_animation_playing(true);
+            } catch (e) {
+                logger.error(`Couldn't load animation "${animation.name}".`, e);
+                this._current_nj_motion.val = undefined;
+            }
+        } else {
+            this._current_nj_motion.val = undefined;
+        }
+    };
+}
diff --git a/test/src/core/rendering/StubThreeRenderer.ts b/test/src/core/rendering/StubThreeRenderer.ts
new file mode 100644
index 00000000..7806c5b5
--- /dev/null
+++ b/test/src/core/rendering/StubThreeRenderer.ts
@@ -0,0 +1,11 @@
+import { DisposableThreeRenderer } from "../../../../src/core/rendering/Renderer";
+
+export class StubThreeRenderer implements DisposableThreeRenderer {
+    domElement: HTMLCanvasElement = document.createElement("canvas");
+
+    dispose(): void {} // eslint-disable-line
+
+    render(): void {} // eslint-disable-line
+
+    setSize(): void {} // eslint-disable-line
+}