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

Entities can be rotated via the entity info view.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-09-29 18:53:01 +02:00
parent 1498b37f67
commit 4bf2148b39
4 changed files with 110 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
FEATURES.md
View File

@ -66,7 +66,9 @@ Features that are in ***bold italics*** are planned and not yet implemented.
- Translation
- Via 3D view
- Via entity view
- ***Rotation***
- Rotation
- Via 3D view
- Via entity view
- ***Multi select and translate/rotate/edit***
## Events

24
src/core/math.ts Normal file
View File

@ -0,0 +1,24 @@
const TO_DEG = 180 / Math.PI;
const TO_RAD = 1 / TO_DEG;
/**
* Converts radians to degrees.
*/
export function rad_to_deg(rad: number): number {
return rad * TO_DEG;
}
/**
* Converts degrees to radians.
*/
export function deg_to_rad(deg: number): number {
return deg * TO_RAD;
}
/**
* @returns the floored modulus of its arguments. The computed value will have the same sign as the
* `divisor`.
*/
export function floor_mod(dividend: number, divisor: number): number {
return ((dividend % divisor) + divisor) % divisor;
}

107
src/quest_editor/gui/EntityInfoView.ts
View File

@ -7,9 +7,9 @@ import { entity_data } from "../../core/data_formats/parsing/quest/entities";
import "./EntityInfoView.css";
import { NumberInput } from "../../core/gui/NumberInput";
import { Disposer } from "../../core/observable/Disposer";
import { Property } from "../../core/observable/property/Property";
import { QuestEntityModel } from "../model/QuestEntityModel";
import { Vector3 } from "three";
import { Euler, Vector3 } from "three";
import { deg_to_rad, rad_to_deg } from "../../core/math";
export class EntityInfoView extends ResizableWidget {
readonly element = el.div({ class: "quest_editor_EntityInfoView", tab_index: -1 });
@ -30,13 +30,13 @@ export class EntityInfoView extends ResizableWidget {
private readonly pos_z_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly world_pos_x_element = this.disposable(
private readonly rot_x_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly world_pos_y_element = this.disposable(
private readonly rot_y_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
private readonly world_pos_z_element = this.disposable(
private readonly rot_z_element = this.disposable(
new NumberInput(0, { width: 80, round_to: 3 }),
);
@ -53,7 +53,7 @@ export class EntityInfoView extends ResizableWidget {
el.tr({}, el.th({ text: "Type:" }), (this.type_element = el.td())),
el.tr({}, el.th({ text: "Name:" }), (this.name_element = el.td())),
el.tr({}, el.th({ text: "Section:" }), (this.section_id_element = el.td())),
el.tr({}, el.th({ text: "Section position:", col_span: 2 })),
el.tr({}, el.th({ text: "Position:", col_span: 2 })),
el.tr(
{},
el.th({ text: "X:", class: coord_class }),
@ -69,21 +69,21 @@ export class EntityInfoView extends ResizableWidget {
el.th({ text: "Z:", class: coord_class }),
el.td({}, this.pos_z_element.element),
),
el.tr({}, el.th({ text: "World position:", col_span: 2 })),
el.tr({}, el.th({ text: "Rotation:", col_span: 2 })),
el.tr(
{},
el.th({ text: "X:", class: coord_class }),
el.td({}, this.world_pos_x_element.element),
el.td({}, this.rot_x_element.element),
),
el.tr(
{},
el.th({ text: "Y:", class: coord_class }),
el.td({}, this.world_pos_y_element.element),
el.td({}, this.rot_y_element.element),
),
el.tr(
{},
el.th({ text: "Z:", class: coord_class }),
el.td({}, this.world_pos_z_element.element),
el.td({}, this.rot_z_element.element),
),
);
@ -115,23 +115,7 @@ export class EntityInfoView extends ResizableWidget {
),
);
this.observe(
entity,
entity.position,
false,
this.pos_x_element,
this.pos_y_element,
this.pos_z_element,
);
this.observe(
entity,
entity.world_position,
true,
this.world_pos_x_element,
this.world_pos_y_element,
this.world_pos_z_element,
);
this.observe_entity(entity);
}
}),
);
@ -144,54 +128,89 @@ export class EntityInfoView extends ResizableWidget {
this.entity_disposer.dispose();
}
private observe(
entity: QuestEntityModel,
pos: Property<Vector3>,
world: boolean,
x_input: NumberInput,
y_input: NumberInput,
z_input: NumberInput,
): void {
private observe_entity(entity: QuestEntityModel): void {
const pos = entity.position;
this.entity_disposer.add_all(
pos.observe(
({ value: { x, y, z } }) => {
x_input.value.val = x;
y_input.value.val = y;
z_input.value.val = z;
this.pos_x_element.value.val = x;
this.pos_y_element.value.val = y;
this.pos_z_element.value.val = z;
},
{ call_now: true },
),
x_input.value.observe(({ value }) =>
this.pos_x_element.value.observe(({ value }) =>
quest_editor_store.translate_entity(
entity,
entity.section.val,
entity.section.val,
pos.val,
new Vector3(value, pos.val.y, pos.val.z),
world,
false,
),
),
y_input.value.observe(({ value }) =>
this.pos_y_element.value.observe(({ value }) =>
quest_editor_store.translate_entity(
entity,
entity.section.val,
entity.section.val,
pos.val,
new Vector3(pos.val.x, value, pos.val.z),
world,
false,
),
),
z_input.value.observe(({ value }) =>
this.pos_z_element.value.observe(({ value }) =>
quest_editor_store.translate_entity(
entity,
entity.section.val,
entity.section.val,
pos.val,
new Vector3(pos.val.x, pos.val.y, value),
world,
false,
),
),
);
const rot = entity.rotation;
this.entity_disposer.add_all(
rot.observe(
({ value: { x, y, z } }) => {
this.rot_x_element.value.val = rad_to_deg(x);
this.rot_y_element.value.val = rad_to_deg(y);
this.rot_z_element.value.val = rad_to_deg(z);
},
{ call_now: true },
),
this.rot_x_element.value.observe(({ value }) =>
quest_editor_store.rotate_entity(
entity,
rot.val,
new Euler(deg_to_rad(value), rot.val.y, rot.val.z, "ZXY"),
false,
),
),
this.rot_y_element.value.observe(({ value }) =>
quest_editor_store.rotate_entity(
entity,
rot.val,
new Euler(rot.val.x, deg_to_rad(value), rot.val.z, "ZXY"),
false,
),
),
this.rot_z_element.value.observe(({ value }) =>
quest_editor_store.rotate_entity(
entity,
rot.val,
new Euler(rot.val.x, rot.val.y, deg_to_rad(value), "ZXY"),
false,
),
),
);

22
src/quest_editor/model/QuestEntityModel.ts
View File

@ -4,6 +4,7 @@ import { property } from "../../core/observable";
import { WritableProperty } from "../../core/observable/property/WritableProperty";
import { SectionModel } from "./SectionModel";
import { Euler, Quaternion, Vector3 } from "three";
import { floor_mod } from "../../core/math";
const q1 = new Quaternion();
const q2 = new Quaternion();
@ -120,6 +121,8 @@ export abstract class QuestEntityModel<Type extends EntityType = EntityType> {
}
set_rotation(rot: Euler): this {
floor_mod_euler(rot);
this._rotation.val = rot;
const section = this.section.val;
@ -127,7 +130,9 @@ export abstract class QuestEntityModel<Type extends EntityType = EntityType> {
if (section) {
q1.setFromEuler(rot);
q2.setFromEuler(section.rotation);
this._world_rotation.val = new Euler().setFromQuaternion(q1.multiply(q2), "ZXY");
this._world_rotation.val = floor_mod_euler(
new Euler().setFromQuaternion(q1.multiply(q2), "ZXY"),
);
} else {
this._world_rotation.val = rot;
}
@ -136,6 +141,8 @@ export abstract class QuestEntityModel<Type extends EntityType = EntityType> {
}
set_world_rotation(rot: Euler): this {
floor_mod_euler(rot);
this._world_rotation.val = rot;
const section = this.section.val;
@ -144,7 +151,10 @@ export abstract class QuestEntityModel<Type extends EntityType = EntityType> {
q1.setFromEuler(rot);
q2.setFromEuler(section.rotation);
q2.inverse();
this._rotation.val = new Euler().setFromQuaternion(q1.multiply(q2), "ZXY");
this._rotation.val = floor_mod_euler(
new Euler().setFromQuaternion(q1.multiply(q2), "ZXY"),
);
} else {
this._rotation.val = rot;
}
@ -152,3 +162,11 @@ export abstract class QuestEntityModel<Type extends EntityType = EntityType> {
return this;
}
}
function floor_mod_euler(euler: Euler): Euler {
return euler.set(
floor_mod(euler.x, 2 * Math.PI),
floor_mod(euler.y, 2 * Math.PI),
floor_mod(euler.z, 2 * Math.PI),
);
}