Class TransformGizmo

The base class for all transform gizmos.

Hierarchy (View Summary)

Constructors

constructor

Properties

_app _camera _coordSpace _device _dragging _guideColors _layer _meshColors _rootStartPos _rootStartRot _scale _selectedAxis _selectedIsPlane _selectionStartAngle _selectionStartPoint _shading _shapes intersectShapes nodes root snapIncrement

Accessors

colorAlpha coordSpace facing layer shading size snap xAxisColor yAxisColor zAxisColor

Methods

_createPlane _createRay _createTransform _projectToAxis _screenToPoint _updatePosition _updateRotation _updateScale attach destroy detach enableShape fire hasEvent isShapeEnabled off on once createLayer

Events

EVENT_NODESATTACH EVENT_NODESDETACH EVENT_POINTERDOWN EVENT_POINTERMOVE EVENT_POINTERUP EVENT_POSITIONUPDATE EVENT_RENDERUPDATE EVENT_ROTATIONUPDATE EVENT_SCALEUPDATE EVENT_TRANSFORMEND EVENT_TRANSFORMMOVE EVENT_TRANSFORMSTART

Constructors

constructor

Properties

Protected_app

_app: AppBase

Internal reference to the app containing the gizmo.

Protected_camera

_camera: CameraComponent

Internal reference to camera component to view the gizmo.

Protected_coordSpace

_coordSpace: string = GIZMOSPACE_WORLD

Internal version of coordinate space. Defaults to GIZMOSPACE_WORLD.

Protected_device

_device: GraphicsDevice

Internal reference to the graphics device of the app.

Protected_dragging

_dragging: boolean = false

Internal state for if the gizmo is being dragged.

Protected_guideColors

_guideColors: Record<string, Color> = ...

Internal version of the guide line color.

Protected_layer

_layer: Layer

Internal reference to layer to render the gizmo..

Protected_meshColors

_meshColors: {
    axis: Record<string, Color>;
    disabled: Color;
    hover: Record<string, Color>;
} = ...

Internal color for meshes.

Protected_rootStartPos

_rootStartPos: Vec3 = ...

Internal gizmo starting rotation in world space.

Protected_rootStartRot

_rootStartRot: Quat = ...

Internal gizmo starting rotation in world space.

Protected_scale

_scale: number = 1

Internal version of the gizmo scale. Defaults to 1.

Protected_selectedAxis

_selectedAxis: string = ''

Internal currently selected axis.

Protected_selectedIsPlane

_selectedIsPlane: boolean = false

Internal state of if currently selected shape is a plane.

Protected_selectionStartAngle

_selectionStartAngle: number = 0

Internal selection starting angle in world space.

Protected_selectionStartPoint

_selectionStartPoint: Vec3 = ...

Internal selection starting coordinates in world space.

Protected_shading

_shading: boolean = false

Internal state of if shading is enabled. Defaults to true.

Protected_shapes

_shapes: {} = {}

Internal object containing the gizmo shapes to render.

intersectShapes

intersectShapes: Shape[] = []

The intersection shapes for the gizmo.

nodes

nodes: GraphNode[] = []

The graph nodes attached to the gizmo.

root

root: Entity

The root gizmo entity.

snapIncrement

snapIncrement: number = 1

Snapping increment. Defaults to 1.

Accessors

colorAlpha

coordSpace

Protectedfacing

layer

shading

size

snap

xAxisColor

yAxisColor

zAxisColor

Methods

Protected_createPlane

Protected_createRay

Protected_createTransform

Protected_projectToAxis

Protected_screenToPoint

  • _screenToPoint(
        x: number,
        y: number,
        isFacing?: boolean,
        isLine?: boolean,
    ): { angle: number; point: Vec3 }
  • Protected

    Parameters

    • x: number

      The x coordinate.

    • y: number

      The y coordinate.

    • isFacing: boolean = false

      Whether the axis is facing the camera.

    • isLine: boolean = false

      Whether the axis is a line.

    Returns { angle: number; point: Vec3 }

    • The point and angle.

Protected_updatePosition

Protected_updateRotation

Protected_updateScale

attach

destroy

detach

enableShape

fire

  • fire(
        name: string,
        arg1?: any,
        arg2?: any,
        arg3?: any,
        arg4?: any,
        arg5?: any,
        arg6?: any,
        arg7?: any,
        arg8?: any,
    ): EventHandler

  • Fire an event, all additional arguments are passed on to the event listener.

    Parameters

    • name: string

      Name of event to fire.

    • Optionalarg1: any

      First argument that is passed to the event handler.

    • Optionalarg2: any

      Second argument that is passed to the event handler.

    • Optionalarg3: any

      Third argument that is passed to the event handler.

    • Optionalarg4: any

      Fourth argument that is passed to the event handler.

    • Optionalarg5: any

      Fifth argument that is passed to the event handler.

    • Optionalarg6: any

      Sixth argument that is passed to the event handler.

    • Optionalarg7: any

      Seventh argument that is passed to the event handler.

    • Optionalarg8: any

      Eighth argument that is passed to the event handler.

    Returns EventHandler

    Self for chaining.

    Example

    obj.fire('test', 'This is the message');

hasEvent

  • hasEvent(name: string): boolean

  • Test if there are any handlers bound to an event name.

    Parameters

    • name: string

      The name of the event to test.

    Returns boolean

    True if the object has handlers bound to the specified event name.

    Example

    obj.on('test', function () { }); // bind an event to 'test'
    obj.hasEvent('test'); // returns true
    obj.hasEvent('hello'); // returns false

isShapeEnabled

off

  • off(name?: string, callback?: HandleEventCallback, scope?: object): EventHandler

  • Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.

    Parameters

    • Optionalname: string

      Name of the event to unbind.

    • Optionalcallback: HandleEventCallback

      Function to be unbound.

    • Optionalscope: object

      Scope that was used as the this when the event is fired.

    Returns EventHandler

    Self for chaining.

    Example

    const handler = function () {
    };
    obj.on('test', handler);

    obj.off(); // Removes all events
    obj.off('test'); // Removes all events called 'test'
    obj.off('test', handler); // Removes all handler functions, called 'test'
    obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this

on

  • on(name: string, callback: HandleEventCallback, scope?: object): EventHandle

  • Attach an event handler to an event.

    Parameters

    • name: string

      Name of the event to bind the callback to.

    • callback: HandleEventCallback

      Function that is called when event is fired. Note the callback is limited to 8 arguments.

    • Optionalscope: object = ...

      Object to use as 'this' when the event is fired, defaults to current this.

    Returns EventHandle

    Can be used for removing event in the future.

    Example

    obj.on('test', function (a, b) {
        console.log(a + b);
    });
    obj.fire('test', 1, 2); // prints 3 to the console

    Example

    const evt = obj.on('test', function (a, b) {
        console.log(a + b);
    });
    // some time later
    evt.off();

once

  • once(name: string, callback: HandleEventCallback, scope?: object): EventHandle

  • Attach an event handler to an event. This handler will be removed after being fired once.

    Parameters

    • name: string

      Name of the event to bind the callback to.

    • callback: HandleEventCallback

      Function that is called when event is fired. Note the callback is limited to 8 arguments.

    • Optionalscope: object = ...

      Object to use as 'this' when the event is fired, defaults to current this.

    Returns EventHandle

    • can be used for removing event in the future.

    Example

    obj.once('test', function (a, b) {
        console.log(a + b);
    });
    obj.fire('test', 1, 2); // prints 3 to the console
    obj.fire('test', 1, 2); // not going to get handled

StaticcreateLayer

Events

StaticEVENT_NODESATTACH

EVENT_NODESATTACH: string = 'nodes:attach'

Fired when graph nodes are attached.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('nodes:attach', () => {
    console.log('Graph nodes attached');
});

StaticEVENT_NODESDETACH

EVENT_NODESDETACH: string = 'nodes:detach'

Fired when graph nodes are detached.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('nodes:detach', () => {
    console.log('Graph nodes detached');
});

StaticEVENT_POINTERDOWN

EVENT_POINTERDOWN: string = 'pointer:down'

Fired when the pointer is down on the gizmo.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('pointer:down', (x, y, meshInstance) => {
    console.log(`Pointer was down on ${meshInstance.node.name} at ${x}, ${y}`);
});

StaticEVENT_POINTERMOVE

EVENT_POINTERMOVE: string = 'pointer:move'

Fired when the pointer is moving over the gizmo.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('pointer:move', (x, y, meshInstance) => {
    console.log(`Pointer was moving on ${meshInstance.node.name} at ${x}, ${y}`);
});

StaticEVENT_POINTERUP

EVENT_POINTERUP: string = 'pointer:up'

Fired when the pointer is up off the gizmo.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('pointer:up', (x, y, meshInstance) => {
    console.log(`Pointer was up on ${meshInstance.node.name} at ${x}, ${y}`);
})

StaticEVENT_POSITIONUPDATE

EVENT_POSITIONUPDATE: string = 'position:update'

Fired when the gizmo's position is updated.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('position:update', (position) => {
    console.log(`The gizmo's position was updated to ${position}`);
})

StaticEVENT_RENDERUPDATE

EVENT_RENDERUPDATE: string = 'render:update'

Fired when when the gizmo render has updated.

Example

const gizmo = new pc.TransformGizmo(app, camera, layer);
gizmo.on('render:update', () => {
    console.log('Gizmo render has been updated');
});

StaticEVENT_ROTATIONUPDATE

EVENT_ROTATIONUPDATE: string = 'rotation:update'

Fired when the gizmo's rotation is updated.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('rotation:update', (rotation) => {
    console.log(`The gizmo's rotation was updated to ${rotation}`);
});

StaticEVENT_SCALEUPDATE

EVENT_SCALEUPDATE: string = 'scale:update'

Fired when the gizmo's scale is updated.

Example

const gizmo = new pc.Gizmo(app, camera, layer);
gizmo.on('scale:update', (scale) => {
    console.log(`The gizmo's scale was updated to ${scale}`);
});

StaticEVENT_TRANSFORMEND

EVENT_TRANSFORMEND: string = 'transform:end'

Fired when when the transformation has ended.

Example

const gizmo = new pc.TransformGizmo(app, camera, layer);
gizmo.on('transform:end', () => {
    console.log('Transformation ended');
});

StaticEVENT_TRANSFORMMOVE

EVENT_TRANSFORMMOVE: string = 'transform:move'

Fired during the transformation.

Example

const gizmo = new pc.TransformGizmo(app, camera, layer);
gizmo.on('transform:move', (pointDelta, angleDelta) => {
    console.log('Transformation moved by ${pointDelta} (angle: ${angleDelta})');
});

StaticEVENT_TRANSFORMSTART

EVENT_TRANSFORMSTART: string = 'transform:start'

Fired when when the transformation has started.

Example

const gizmo = new pc.TransformGizmo(app, camera, layer);
gizmo.on('transform:start', () => {
    console.log('Transformation started');
});

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods
Events