Skip to content

Commit

Permalink
Gizmo transform shape toggling (#5995)
Browse files Browse the repository at this point in the history 
* gizmo-disable-axes

* added toggling of shapes for transform gizmo

* changed color to material for clarity

* updated material on shsape being either enabled or disabled

* change coord space constant names

* renamed GIZMO_GLOBAL to GIZMO_WORLD

* Fixed color static prop GRAY

* resolved inconsistencies with axis shape materials; throw errors if not provided

* moved possible coordSpace values jsdoc to setter

* change toggle to set/get shape enabled
  • Loading branch information
@kpal81xd
kpal81xd authored Jan 26, 2024
1 parent 6cd570a commit 032d312
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 75 deletions.
46 changes: 39 additions & 7 deletions extras/gizmo/axis-shapes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
createPlane,
createMesh,
createTorus,
Color,
Material,
MeshInstance,
Entity,
Quat,
Expand Down Expand Up @@ -85,9 +85,13 @@ class AxisShape {

_layers = [];

_defaultColor;
_disabled;

_hoverColor;
_defaultMaterial;

_hoverMaterial;

_disabledMaterial;

device;

Expand All @@ -106,10 +110,35 @@ class AxisShape {
this._rotation = options.rotation ?? new Vec3();
this._scale = options.scale ?? new Vec3(1, 1, 1);

this._disabled = options.disabled ?? false;

this._layers = options.layers ?? this._layers;

this._defaultColor = options.defaultColor ?? Color.BLACK;
this._hoverColor = options.hoverColor ?? Color.WHITE;
if (!(options.defaultMaterial instanceof Material)) {
throw new Error('No default material provided.');
}
this._defaultMaterial = options.defaultMaterial;

if (!(options.hoverMaterial instanceof Material)) {
throw new Error('No hover material provided.');
}
this._hoverMaterial = options.hoverMaterial;

if (!(options.disabledMaterial instanceof Material)) {
throw new Error('No disabled material provided.');
}
this._disabledMaterial = options.disabledMaterial;
}

set disabled(value) {
for (let i = 0; i < this.meshInstances.length; i++) {
this.meshInstances[i].material = value ? this._disabledMaterial : this._defaultMaterial;
}
this._disabled = value ?? false;
}

get disabled() {
return this._disabled;
}

_createRoot(name) {
Expand All @@ -126,7 +155,7 @@ class AxisShape {
_addRenderMeshes(entity, meshes) {
const meshInstances = [];
for (let i = 0; i < meshes.length; i++) {
const mi = new MeshInstance(meshes[i], this._defaultColor);
const mi = new MeshInstance(meshes[i], this._disabled ? this._disabledMaterial : this._defaultMaterial);
meshInstances.push(mi);
this.meshInstances.push(mi);
}
Expand All @@ -143,7 +172,10 @@ class AxisShape {
}

hover(state) {
const material = state ? this._hoverColor : this._defaultColor;
if (this._disabled) {
return;
}
const material = state ? this._hoverMaterial : this._defaultMaterial;
for (let i = 0; i < this.meshInstances.length; i++) {
this.meshInstances[i].material = material;
}
Expand Down
19 changes: 12 additions & 7 deletions extras/gizmo/gizmo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ const ORTHO_SCALE_RATIO = 0.32;
*
* @type {string}
*/
export const LOCAL_COORD_SPACE = 'local';
export const GIZMO_LOCAL = 'local';

/**
* World coordinate space.
*
* @type {string}
*/
export const WORLD_COORD_SPACE = 'world';
export const GIZMO_WORLD = 'world';

/**
* The base class for all gizmos.
Expand Down Expand Up @@ -165,12 +165,12 @@ class Gizmo extends EventHandler {
_scale = 1;

/**
* Internal version of coordinate space. Defaults to {@link WORLD_COORD_SPACE}.
* Internal version of coordinate space. Defaults to {@link GIZMO_WORLD}.
*
* @type {string}
* @protected
*/
_coordSpace = WORLD_COORD_SPACE;
_coordSpace = GIZMO_WORLD;

/**
* Internal reference to the app containing the gizmo.
Expand Down Expand Up @@ -291,12 +291,17 @@ class Gizmo extends EventHandler {
}

/**
* The gizmo coordinate space. Defaults to {@link WORLD_COORD_SPACE}.
* The gizmo coordinate space. Can be:
*
* {@link GIZMO_LOCAL}
* {@link GIZMO_WORLD}
*
* Defaults to {@link GIZMO_WORLD}.
*
* @type {string}
*/
set coordSpace(value) {
this._coordSpace = value ?? WORLD_COORD_SPACE;
this._coordSpace = value ?? GIZMO_WORLD;
this._updateRotation();
}

Expand Down Expand Up @@ -345,7 +350,7 @@ class Gizmo extends EventHandler {

_updateRotation() {
tmpV1.set(0, 0, 0);
if (this._coordSpace === LOCAL_COORD_SPACE && this.nodes.length !== 0) {
if (this._coordSpace === GIZMO_LOCAL && this.nodes.length !== 0) {
tmpV1.copy(this.nodes[this.nodes.length - 1].getEulerAngles());
}
this.root.setEulerAngles(tmpV1);
Expand Down
26 changes: 15 additions & 11 deletions extras/gizmo/rotate-gizmo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from 'playcanvas';

import { AxisDisk } from './axis-shapes.js';
import { LOCAL_COORD_SPACE } from './gizmo.js';
import { GIZMO_LOCAL } from './gizmo.js';
import { TransformGizmo } from "./transform-gizmo.js";

// temporary variables
Expand All @@ -29,32 +29,36 @@ class RotateGizmo extends TransformGizmo {
axis: 'z',
layers: [this._layer.id],
rotation: new Vec3(90, 0, 90),
defaultColor: this._materials.axis.z.cullBack,
hoverColor: this._materials.hover.z.cullBack,
defaultMaterial: this._materials.axis.z.cullBack,
hoverMaterial: this._materials.hover.z.cullBack,
disabledMaterial: this._materials.disabled.cullBack,
sectorAngle: 180
}),
x: new AxisDisk(this._device, {
axis: 'x',
layers: [this._layer.id],
rotation: new Vec3(0, 0, -90),
defaultColor: this._materials.axis.x.cullBack,
hoverColor: this._materials.hover.x.cullBack,
defaultMaterial: this._materials.axis.x.cullBack,
hoverMaterial: this._materials.hover.x.cullBack,
disabledMaterial: this._materials.disabled.cullBack,
sectorAngle: 180
}),
y: new AxisDisk(this._device, {
axis: 'y',
layers: [this._layer.id],
rotation: new Vec3(0, 0, 0),
defaultColor: this._materials.axis.y.cullBack,
hoverColor: this._materials.hover.y.cullBack,
defaultMaterial: this._materials.axis.y.cullBack,
hoverMaterial: this._materials.hover.y.cullBack,
disabledMaterial: this._materials.disabled.cullBack,
sectorAngle: 180
}),
face: new AxisDisk(this._device, {
axis: 'face',
layers: [this._layer.id],
rotation: this._getLookAtEulerAngles(this._camera.entity.getPosition()),
defaultColor: this._materials.axis.face,
hoverColor: this._materials.hover.face,
defaultMaterial: this._materials.axis.face,
hoverMaterial: this._materials.hover.face,
disabledMaterial: this._materials.disabled.cullBack,
ringRadius: 0.55
})
};
Expand Down Expand Up @@ -333,7 +337,7 @@ class RotateGizmo extends TransformGizmo {

tmpQ1.setFromAxisAngle(tmpV1, angleDelta);

if (!isFacing && this._coordSpace === LOCAL_COORD_SPACE) {
if (!isFacing && this._coordSpace === GIZMO_LOCAL) {
tmpQ2.copy(this._nodeLocalRotations.get(node)).mul(tmpQ1);
node.setLocalRotation(tmpQ2);
} else {
Expand All @@ -347,7 +351,7 @@ class RotateGizmo extends TransformGizmo {
}
}

if (this._coordSpace === LOCAL_COORD_SPACE) {
if (this._coordSpace === GIZMO_LOCAL) {
this._updateRotation();
}
}
Expand Down
38 changes: 22 additions & 16 deletions extras/gizmo/scale-gizmo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
} from 'playcanvas';

import { AxisBoxCenter, AxisBoxLine, AxisPlane } from './axis-shapes.js';
import { LOCAL_COORD_SPACE } from './gizmo.js';
import { GIZMO_LOCAL } from './gizmo.js';
import { TransformGizmo } from "./transform-gizmo.js";

// temporary variables
Expand All @@ -20,57 +20,63 @@ class ScaleGizmo extends TransformGizmo {
xyz: new AxisBoxCenter(this._device, {
axis: 'xyz',
layers: [this._layer.id],
defaultColor: this._materials.axis.xyz,
hoverColor: this._materials.hover.xyz
defaultMaterial: this._materials.axis.xyz,
hoverMaterial: this._materials.hover.xyz
}),
yz: new AxisPlane(this._device, {
axis: 'x',
flipAxis: 'y',
layers: [this._layer.id],
rotation: new Vec3(0, 0, -90),
defaultColor: this._materials.axis.x.cullNone,
hoverColor: this._materials.hover.x.cullNone
defaultMaterial: this._materials.axis.x.cullNone,
hoverMaterial: this._materials.hover.x.cullNone,
disabledMaterial: this._materials.disabled.cullNone
}),
xz: new AxisPlane(this._device, {
axis: 'y',
flipAxis: 'z',
layers: [this._layer.id],
rotation: new Vec3(0, 0, 0),
defaultColor: this._materials.axis.y.cullNone,
hoverColor: this._materials.hover.y.cullNone
defaultMaterial: this._materials.axis.y.cullNone,
hoverMaterial: this._materials.hover.y.cullNone,
disabledMaterial: this._materials.disabled.cullNone
}),
xy: new AxisPlane(this._device, {
axis: 'z',
flipAxis: 'x',
layers: [this._layer.id],
rotation: new Vec3(90, 0, 0),
defaultColor: this._materials.axis.z.cullNone,
hoverColor: this._materials.hover.z.cullNone
defaultMaterial: this._materials.axis.z.cullNone,
hoverMaterial: this._materials.hover.z.cullNone,
disabledMaterial: this._materials.disabled.cullNone
}),
x: new AxisBoxLine(this._device, {
axis: 'x',
layers: [this._layer.id],
rotation: new Vec3(0, 0, -90),
defaultColor: this._materials.axis.x.cullBack,
hoverColor: this._materials.hover.x.cullBack
defaultMaterial: this._materials.axis.x.cullBack,
hoverMaterial: this._materials.hover.x.cullBack,
disabledMaterial: this._materials.disabled.cullBack
}),
y: new AxisBoxLine(this._device, {
axis: 'y',
layers: [this._layer.id],
rotation: new Vec3(0, 0, 0),
defaultColor: this._materials.axis.y.cullBack,
hoverColor: this._materials.hover.y.cullBack
defaultMaterial: this._materials.axis.y.cullBack,
hoverMaterial: this._materials.hover.y.cullBack,
disabledMaterial: this._materials.disabled.cullBack
}),
z: new AxisBoxLine(this._device, {
axis: 'z',
layers: [this._layer.id],
rotation: new Vec3(90, 0, 0),
defaultColor: this._materials.axis.z.cullBack,
hoverColor: this._materials.hover.z.cullBack
defaultMaterial: this._materials.axis.z.cullBack,
hoverMaterial: this._materials.hover.z.cullBack,
disabledMaterial: this._materials.disabled.cullBack
})
};

_coordSpace = LOCAL_COORD_SPACE;
_coordSpace = GIZMO_LOCAL;

/**
* Internal mapping from each attached node to their starting scale.
Expand Down
Loading

0 comments on commit 032d312

Please sign in to comment.