Added list of standard player animations to model viewer.

src/domain/index.ts

@@ -362,3 +362,7 @@ export class PlayerModel {
         public readonly hair_styles_with_accessory: Set<number>
     ) {}
 }
+
+export class PlayerAnimation {
+    constructor(public readonly id: number, public readonly name: string) {}
+}

src/stores/ModelViewerStore.ts

@@ -3,14 +3,15 @@ import { action, observable } from "mobx";
 import { AnimationAction, AnimationClip, AnimationMixer, SkinnedMesh } from "three";
 import { BufferCursor } from "../data_formats/BufferCursor";
 import { NinjaModel, NinjaObject, parse_nj, parse_xj } from "../data_formats/parsing/ninja";
-import { parse_njm } from "../data_formats/parsing/ninja/motion";
-import { PlayerModel } from "../domain";
+import { parse_njm, NjMotion } from "../data_formats/parsing/ninja/motion";
+import { PlayerModel, PlayerAnimation } from "../domain";
 import { create_animation_clip, PSO_FRAME_RATE } from "../rendering/animation";
 import { ninja_object_to_skinned_mesh } from "../rendering/models";
-import { get_player_data } from "./binary_assets";
+import { get_player_data, get_player_animation_data } from "./binary_assets";
 
 const logger = Logger.get("stores/ModelViewerStore");
-const cache: Map<string, Promise<NinjaObject<NinjaModel>>> = new Map();
+const nj_object_cache: Map<string, Promise<NinjaObject<NinjaModel>>> = new Map();
+const nj_motion_cache: Map<number, Promise<NjMotion>> = new Map();
 
 class ModelViewerStore {
     readonly models: PlayerModel[] = [
@@ -27,6 +28,9 @@ class ModelViewerStore {
         new PlayerModel("FOnewm", 1, 10, new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])),
         new PlayerModel("FOnewearl", 1, 10, new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])),
     ];
+    readonly animations: PlayerAnimation[] = new Array(572)
+        .fill(undefined)
+        .map((_, i) => new PlayerAnimation(i, `Animation ${i + 1}`));
 
     @observable.ref current_model?: NinjaObject<NinjaModel>;
     @observable.ref current_bone_count: number = 0;
@@ -68,6 +72,14 @@ class ModelViewerStore {
         this.current_bone_count = 64;
     };
 
+    load_animation = async (animation: PlayerAnimation) => {
+        const nj_motion = await this.get_nj_motion(animation);
+
+        if (this.current_model) {
+            this.set_animation(create_animation_clip(this.current_model, nj_motion));
+        }
+    };
+
     load_file = (file: File) => {
         const reader = new FileReader();
         reader.addEventListener("loadend", () => {
@@ -90,6 +102,29 @@ class ModelViewerStore {
         }
     });
 
+    set_animation = action("set_animation", (clip: AnimationClip) => {
+        if (!this.current_obj3d) return;
+
+        let mixer: AnimationMixer;
+
+        if (this.animation) {
+            this.animation.mixer.stopAllAction();
+            mixer = this.animation.mixer;
+        } else {
+            mixer = new AnimationMixer(this.current_obj3d);
+        }
+
+        this.animation = {
+            mixer,
+            clip,
+            action: mixer.clipAction(clip),
+        };
+
+        this.animation.action.play();
+        this.animation_playing = true;
+        this.animation_frame_count = Math.round(PSO_FRAME_RATE * clip.duration) + 1;
+    });
+
     private set_model = action("set_model", (model: NinjaObject<NinjaModel>) => {
         if (this.current_obj3d && this.animation) {
             this.animation.mixer.stopAllAction();
@@ -124,7 +159,7 @@ class ModelViewerStore {
                     new BufferCursor(reader.result, true),
                     this.current_bone_count
                 );
-                this.add_animation(create_animation_clip(this.current_model, njm));
+                this.set_animation(create_animation_clip(this.current_model, njm));
             }
         } else {
             logger.error(`Unknown file extension in filename "${file.name}".`);
@@ -145,37 +180,14 @@ class ModelViewerStore {
         }
     }
 
-    private add_animation = action("add_animation", (clip: AnimationClip) => {
-        if (!this.current_obj3d) return;
-
-        let mixer: AnimationMixer;
-
-        if (this.animation) {
-            this.animation.mixer.stopAllAction();
-            mixer = this.animation.mixer;
-        } else {
-            mixer = new AnimationMixer(this.current_obj3d);
-        }
-
-        this.animation = {
-            mixer,
-            clip,
-            action: mixer.clipAction(clip),
-        };
-
-        this.animation.action.play();
-        this.animation_playing = true;
-        this.animation_frame_count = Math.round(PSO_FRAME_RATE * clip.duration) + 1;
-    });
-
-    private get_player_ninja_object(model: PlayerModel): Promise<NinjaObject<NinjaModel>> {
-        let ninja_object = cache.get(model.name);
+    private async get_player_ninja_object(model: PlayerModel): Promise<NinjaObject<NinjaModel>> {
+        let ninja_object = nj_object_cache.get(model.name);
 
         if (ninja_object) {
             return ninja_object;
         } else {
             ninja_object = this.get_all_assets(model);
-            cache.set(model.name, ninja_object);
+            nj_object_cache.set(model.name, ninja_object);
             return ninja_object;
         }
     }
@@ -215,6 +227,21 @@ class ModelViewerStore {
 
         return body;
     }
+
+    private async get_nj_motion(animation: PlayerAnimation): Promise<NjMotion> {
+        let nj_motion = nj_motion_cache.get(animation.id);
+
+        if (nj_motion) {
+            return nj_motion;
+        } else {
+            nj_motion = get_player_animation_data(animation.id).then(motion_data =>
+                parse_njm(new BufferCursor(motion_data, true), this.current_bone_count)
+            );
+
+            nj_motion_cache.set(animation.id, nj_motion);
+            return nj_motion;
+        }
+    }
 }
 
 export const model_viewer_store = new ModelViewerStore();

src/stores/binary_assets.ts

@@ -38,10 +38,10 @@ export async function get_player_data(
     return await get_asset(player_class_to_url(player_class, body_part, no));
 }
 
-function get_asset(url: string): Promise<ArrayBuffer> {
-    const base_url = process.env.PUBLIC_URL;
-    const promise = fetch(base_url + url).then(r => r.arrayBuffer());
-    return promise;
+export async function get_player_animation_data(animation_id: number): Promise<ArrayBuffer> {
+    return await get_asset(
+        `/player/animation/animation_${animation_id.toString().padStart(3, "0")}.njm`
+    );
 }
 
 const area_base_names = [
@@ -228,3 +228,9 @@ function object_type_to_url(object_type: ObjectType): string {
 function player_class_to_url(player_class: string, body_part: string, no?: number): string {
     return `/player/${player_class}${body_part}${no == null ? "" : no}.nj`;
 }
+
+function get_asset(url: string): Promise<ArrayBuffer> {
+    const base_url = process.env.PUBLIC_URL;
+    const promise = fetch(base_url + url).then(r => r.arrayBuffer());
+    return promise;
+}

src/ui/model_viewer/AnimationSelectionComponent.less

@@ -0,0 +1,20 @@
+.mv-AnimationSelectionComponent {
+    margin: 0 10px;
+
+    & > ul {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        overflow: auto;
+        list-style-type: none;
+
+        & > li {
+            cursor: pointer;
+            padding: 2px 5px;
+
+            &:hover {
+                color: lighten(@primary-color, 30%);
+            }
+        }
+    }
+}

src/ui/model_viewer/AnimationSelectionComponent.tsx

@@ -0,0 +1,22 @@
+import React, { Component, ReactNode } from "react";
+import { model_viewer_store } from "../../stores/ModelViewerStore";
+import "./AnimationSelectionComponent.less";
+
+export class AnimationSelectionComponent extends Component {
+    render(): ReactNode {
+        return (
+            <section className="mv-AnimationSelectionComponent">
+                <ul>
+                    {model_viewer_store.animations.map(animation => (
+                        <li
+                            key={animation.id}
+                            onClick={() => model_viewer_store.load_animation(animation)}
+                        >
+                            {animation.name}
+                        </li>
+                    ))}
+                </ul>
+            </section>
+        );
+    }
+}

src/ui/model_viewer/ModelSelectionComponent.less

@@ -4,4 +4,8 @@
 
 .mv-ModelSelectionComponent-model {
     cursor: pointer;
-}
+
+    &:hover {
+        color: lighten(@primary-color, 30%);
+    }
+}

src/ui/model_viewer/ModelViewerComponent.less

@@ -27,7 +27,7 @@
     display: flex;
     overflow: hidden;
 
-    & > div:nth-child(2) {
+    & > div:nth-child(3) {
         flex: 1;
     }
 }

src/ui/model_viewer/ModelViewerComponent.tsx

@@ -1,9 +1,10 @@
-import { Button, InputNumber, Upload, Switch } from "antd";
+import { Button, InputNumber, Switch, Upload } from "antd";
 import { UploadChangeParam } from "antd/lib/upload";
 import { UploadFile } from "antd/lib/upload/interface";
 import { observer } from "mobx-react";
-import React, { ReactNode, Component } from "react";
+import React, { Component, ReactNode } from "react";
 import { model_viewer_store } from "../../stores/ModelViewerStore";
+import { AnimationSelectionComponent } from "./AnimationSelectionComponent";
 import { ModelSelectionComponent } from "./ModelSelectionComponent";
 import "./ModelViewerComponent.less";
 import { RendererComponent } from "./RendererComponent";
@@ -22,6 +23,7 @@ export class ModelViewerComponent extends Component {
                 <Toolbar />
                 <div className="mv-ModelViewerComponent-main">
                     <ModelSelectionComponent />
+                    <AnimationSelectionComponent />
                     <RendererComponent model={model_viewer_store.current_obj3d} />
                 </div>
             </div>