Working on transform gizmo

This commit is contained in:
2024-06-15 23:32:42 +02:00
parent 8f0100c466
commit c01f4bd8c6
6 changed files with 117 additions and 84 deletions

View File

@@ -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();
}

View File

@@ -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);
}
}
}