Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 22:58:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

The selected class and animation are now highlighted in the model viewer.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-07-03 14:27:44 +02:00
parent 27fdefe74a
commit 7335042c53
5 changed files with 69 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/stores/ModelViewerStore.ts
View File

@ -32,11 +32,13 @@ class ModelViewerStore {
.fill(undefined)
.map((_, i) => new PlayerAnimation(i, `Animation ${i + 1}`));
@observable.ref current_player_model?: PlayerModel;
@observable.ref current_model?: NinjaObject<NinjaModel>;
@observable.ref current_bone_count: number = 0;
@observable.ref current_obj3d?: SkinnedMesh;
@observable.ref animation?: {
player_animation?: PlayerAnimation;
mixer: AnimationMixer;
clip: AnimationClip;
action: AnimationAction;
@ -67,7 +69,7 @@ class ModelViewerStore {
load_model = async (model: PlayerModel) => {
const object = await this.get_player_ninja_object(model);
this.set_model(object);
this.set_model(object, model);
// Ignore the bones from the head parts.
this.current_bone_count = 64;
};
@ -76,7 +78,7 @@ class ModelViewerStore {
const nj_motion = await this.get_nj_motion(animation);
if (this.current_model) {
this.set_animation(create_animation_clip(this.current_model, nj_motion));
this.set_animation(create_animation_clip(this.current_model, nj_motion), animation);
}
};
@ -102,7 +104,7 @@ class ModelViewerStore {
}
});
set_animation = action("set_animation", (clip: AnimationClip) => {
set_animation = action("set_animation", (clip: AnimationClip, animation?: PlayerAnimation) => {
if (!this.current_obj3d) return;
let mixer: AnimationMixer;
@ -115,6 +117,7 @@ class ModelViewerStore {
}
this.animation = {
player_animation: animation,
mixer,
clip,
action: mixer.clipAction(clip),
@ -125,20 +128,24 @@ class ModelViewerStore {
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();
this.animation.mixer.uncacheRoot(this.current_obj3d);
this.animation = undefined;
private set_model = action(
"set_model",
(model: NinjaObject<NinjaModel>, player_model?: PlayerModel) => {
if (this.current_obj3d && this.animation) {
this.animation.mixer.stopAllAction();
this.animation.mixer.uncacheRoot(this.current_obj3d);
this.animation = undefined;
}
this.current_player_model = player_model;
this.current_model = model;
this.current_bone_count = model.bone_count();
const mesh = ninja_object_to_skinned_mesh(this.current_model);
mesh.translateY(-mesh.geometry.boundingSphere.radius);
this.current_obj3d = mesh;
}
this.current_model = model;
this.current_bone_count = model.bone_count();
const mesh = ninja_object_to_skinned_mesh(this.current_model);
mesh.translateY(-mesh.geometry.boundingSphere.radius);
this.current_obj3d = mesh;
});
);
// TODO: notify user of problems.
private loadend = async (file: File, reader: FileReader) => {

4
src/ui/model_viewer/AnimationSelectionComponent.less
View File

@ -13,6 +13,10 @@
padding: 2px 5px;
white-space: nowrap;
&.selected {
color: lighten(@primary-color, 15%);
}
&:hover {
color: lighten(@primary-color, 30%);
}

26
src/ui/model_viewer/AnimationSelectionComponent.tsx
View File

@ -1,20 +1,30 @@
import React, { Component, ReactNode } from "react";
import { model_viewer_store } from "../../stores/ModelViewerStore";
import "./AnimationSelectionComponent.less";
import { observer } from "mobx-react";
@observer
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>
))}
{model_viewer_store.animations.map(animation => {
const selected =
model_viewer_store.animation &&
model_viewer_store.animation.player_animation &&
model_viewer_store.animation.player_animation.id === animation.id;
return (
<li
key={animation.id}
className={selected ? "selected" : undefined}
onClick={() => model_viewer_store.load_animation(animation)}
>
{animation.name}
</li>
);
})}
</ul>
</section>
);

4
src/ui/model_viewer/ModelSelectionComponent.less
View File

@ -5,6 +5,10 @@
.mv-ModelSelectionComponent-model {
cursor: pointer;
&.selected {
color: lighten(@primary-color, 15%);
}
&:hover {
color: lighten(@primary-color, 30%);
}

31
src/ui/model_viewer/ModelSelectionComponent.tsx
View File

@ -11,17 +11,26 @@ export class ModelSelectionComponent extends Component {
itemLayout="horizontal"
dataSource={model_viewer_store.models}
size="small"
renderItem={model => (
<List.Item onClick={() => model_viewer_store.load_model(model)}>
<List.Item.Meta
title={
<span className="mv-ModelSelectionComponent-model">
{model.name}
</span>
}
/>
</List.Item>
)}
renderItem={model => {
const selected = model_viewer_store.current_player_model === model;
return (
<List.Item onClick={() => model_viewer_store.load_model(model)}>
<List.Item.Meta
title={
<span
className={
"mv-ModelSelectionComponent-model" +
(selected ? " selected" : "")
}
>
{model.name}
</span>
}
/>
</List.Item>
);
}}
/>
</section>
);