You've already forked vtt-mapper
Working on transform gizmo
This commit is contained in:
@@ -2,6 +2,7 @@ import * as Three from 'three';
|
||||
import { RESOLUTION_X, RESOLUTION_Y } from '../consts';
|
||||
import Stats from 'stats.js';
|
||||
import { Point } from '../physics/common';
|
||||
import Selector from './selector.class';
|
||||
|
||||
export default class Renderer
|
||||
{
|
||||
@@ -84,6 +85,7 @@ export default class Renderer
|
||||
static render(delta?: number): void
|
||||
{
|
||||
this.#stats.begin();
|
||||
Selector.update();
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.#stats.end();
|
||||
}
|
||||
|
||||
@@ -2,16 +2,20 @@ import * as Three from "three";
|
||||
import Asset from "../assets/asset.class";
|
||||
import { Point } from "../physics/common";
|
||||
import Renderer from "./renderer.class";
|
||||
import { QUAD } from '../consts';
|
||||
|
||||
export default class Selector
|
||||
{
|
||||
static #assets: Asset[];
|
||||
static #selected: boolean = false;
|
||||
static #previousZoom: number = 1;
|
||||
|
||||
static #previewMesh: Three.Box3Helper;
|
||||
static #ghostMesh: Three.Box3Helper;
|
||||
static #selectionMesh: Three.Box3Helper;
|
||||
|
||||
static gizmoScale: Three.Mesh[];
|
||||
|
||||
static get selected(): boolean
|
||||
{
|
||||
return Selector.#selected;
|
||||
@@ -25,10 +29,31 @@ export default class Selector
|
||||
Selector.#previewMesh = new Three.Box3Helper(new Three.Box3(), 0x2980B9);
|
||||
Selector.#ghostMesh = new Three.Box3Helper(new Three.Box3(), 0xffffff);
|
||||
Selector.#selectionMesh = new Three.Box3Helper(new Three.Box3(), 0xffffff);
|
||||
|
||||
|
||||
Selector.gizmoScale = [];
|
||||
Selector.gizmoScale[0] = new Three.Mesh(QUAD, new Three.MeshBasicMaterial({ depthTest: false, depthWrite: false, fog: false, toneMapped: false, transparent: true, color: 0x3498DB, opacity: 0.5 }));
|
||||
Selector.gizmoScale[1] = new Three.Mesh(QUAD, Selector.gizmoScale[0].material);
|
||||
Selector.gizmoScale[2] = new Three.Mesh(QUAD, Selector.gizmoScale[0].material);
|
||||
Selector.gizmoScale[3] = new Three.Mesh(QUAD, Selector.gizmoScale[0].material);
|
||||
|
||||
Selector.gizmoScale[0].renderOrder = Infinity;
|
||||
Selector.gizmoScale[1].renderOrder = Infinity;
|
||||
Selector.gizmoScale[2].renderOrder = Infinity;
|
||||
Selector.gizmoScale[3].renderOrder = Infinity;
|
||||
|
||||
Selector.gizmoScale[0].name = "Gizmo for scale (TL)";
|
||||
Selector.gizmoScale[1].name = "Gizmo for scale (TR)";
|
||||
Selector.gizmoScale[2].name = "Gizmo for scale (BL)";
|
||||
Selector.gizmoScale[3].name = "Gizmo for scale (BR)";
|
||||
|
||||
Renderer.scene.add(Selector.#previewMesh);
|
||||
Renderer.scene.add(Selector.#ghostMesh);
|
||||
Renderer.scene.add(Selector.#selectionMesh);
|
||||
|
||||
Renderer.scene.add(Selector.gizmoScale[0]);
|
||||
Renderer.scene.add(Selector.gizmoScale[1]);
|
||||
Renderer.scene.add(Selector.gizmoScale[2]);
|
||||
Renderer.scene.add(Selector.gizmoScale[3]);
|
||||
|
||||
Selector.hide();
|
||||
}
|
||||
@@ -64,16 +89,35 @@ export default class Selector
|
||||
|
||||
Selector.#selected = true;
|
||||
|
||||
Selector.#selectionMesh.box.setFromArray([
|
||||
assets.map(e => e.aabb.x1).reduce((p, v) => Math.min(p, v), Infinity),
|
||||
assets.map(e => e.aabb.y1).reduce((p, v) => Math.min(p, v), Infinity),
|
||||
0,
|
||||
assets.map(e => e.aabb.x2).reduce((p, v) => Math.max(p, v), -Infinity),
|
||||
assets.map(e => e.aabb.y2).reduce((p, v) => Math.max(p, v), -Infinity),
|
||||
0
|
||||
]);
|
||||
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
||||
for (let i = 0; i < assets.length; i++)
|
||||
{
|
||||
minX = Math.min(minX, assets[i].aabb.x1);
|
||||
minY = Math.min(minY, assets[i].aabb.y1);
|
||||
maxX = Math.max(maxX, assets[i].aabb.x2);
|
||||
maxY = Math.max(maxY, assets[i].aabb.y2);
|
||||
}
|
||||
|
||||
const scale = Math.max((maxX - minX) / 2, (maxY - minY) / 2)
|
||||
|
||||
Selector.#selectionMesh.box.setFromArray([minX, minY, 0, maxX, maxY, 0]);
|
||||
Selector.#selectionMesh.updateMatrix();
|
||||
|
||||
Selector.gizmoScale[0].position.set(minX, minY, 0);
|
||||
Selector.gizmoScale[1].position.set(maxX, minY, 0);
|
||||
Selector.gizmoScale[2].position.set(minX, maxY, 0);
|
||||
Selector.gizmoScale[3].position.set(maxX, maxY, 0);
|
||||
|
||||
Selector.gizmoScale[0].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
Selector.gizmoScale[1].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
Selector.gizmoScale[2].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
Selector.gizmoScale[3].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
|
||||
Selector.gizmoScale[0].visible = true;
|
||||
Selector.gizmoScale[1].visible = true;
|
||||
Selector.gizmoScale[2].visible = true;
|
||||
Selector.gizmoScale[3].visible = true;
|
||||
|
||||
Selector.#selectionMesh.visible = true;
|
||||
}
|
||||
static toggle(assets: Asset[]): void
|
||||
@@ -100,5 +144,22 @@ export default class Selector
|
||||
Selector.#previewMesh.visible = false;
|
||||
Selector.#ghostMesh.visible = false;
|
||||
Selector.#selectionMesh.visible = false;
|
||||
|
||||
Selector.gizmoScale[0].visible = false;
|
||||
Selector.gizmoScale[1].visible = false;
|
||||
Selector.gizmoScale[2].visible = false;
|
||||
Selector.gizmoScale[3].visible = false;
|
||||
}
|
||||
static update(): void
|
||||
{
|
||||
if (Selector.#previousZoom !== Renderer.zoom && Selector.#selected)
|
||||
{
|
||||
Selector.#previousZoom = Renderer.zoom;
|
||||
|
||||
Selector.gizmoScale[0].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
Selector.gizmoScale[1].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
Selector.gizmoScale[2].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
Selector.gizmoScale[3].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user