The base class for all transform gizmos.

Hierarchy (view full)

Constructors

Properties

_app: AppBase

Internal reference to the app containing the gizmo.

_camera: CameraComponent

Internal reference to camera component to view the gizmo.

_coordSpace: string = GIZMO_WORLD

Internal version of coordinate space. Defaults to GIZMO_WORLD.

_device: AppBase

Internal reference to the graphics device of the app.

_dragging: boolean = false

Internal state for if the gizmo is being dragged.

_gizmoRotationStart: Quat = ...

Internal gizmo starting rotation in world space.

_guideColors: {} = ...

Internal version of the guide line color.

Type declaration

    _hoverAxis: string = ''

    Internal currently hovered axis.

    _hoverIsPlane: boolean = false

    Internal state of if currently hovered shape is a plane.

    _hoverShape: AxisShape = null

    Internal currently hovered shape.

    _isRotation: boolean = false

    Internal state if transform is a rotation.

    _layer: Layer

    Internal reference to layer to render the gizmo..

    _meshColors: Object = ...

    Internal color for meshs.

    _scale: number = 1

    Internal version of the gizmo scale. Defaults to 1.

    _selectedAxis: string = ''

    Internal currently selected axis.

    _selectedIsPlane: boolean = false

    Internal state of if currently selected shape is a plane.

    _selectionStartAngle: number = 0

    Internal selection starting angle in world space.

    _selectionStartPoint: Vec3 = ...

    Internal selection starting coordinates in world space.

    _shapeMap: Map<MeshInstance, AxisShape> = ...

    Internal mapping of mesh instances to axis shapes.

    _shapes: {} = {}

    Internal object containing the axis shapes to render.

    Type declaration

      _snap: boolean = false

      Internal state for if snapping is enabled. Defaults to false.

      _useUniformScaling: boolean = false

      Internal state if transform should use uniform scaling.

      intersectData: IntersectData[] = []

      The intersection data object.

      nodes: GraphNode[] = []

      The graph nodes attached to the gizmo.

      root: Entity

      The root gizmo entity.

      snapIncrement: number = 1

      Snapping increment. Defaults to 1.

      Accessors

      Methods

      • Attach an array of graph nodes to the gizmo.

        Parameters

        • Optional nodes: GraphNode[] = []

          The graph nodes. Defaults to [].

        Returns void

        Example

        const gizmo = new pcx.Gizmo(app, camera, layer);
        gizmo.attach([boxA, boxB]);
      • Detaches all graph nodes from the gizmo.

        Returns void

        Example

        const gizmo = new pcx.Gizmo(app, camera, layer);
        gizmo.attach([boxA, boxB]);
        gizmo.detach();
      • Set the shape to be enabled or disabled.

        Parameters

        • shapeAxis: string

          The shape axis. Can be:

          SHAPEAXIS_X SHAPEAXIS_Y SHAPEAXIS_Z SHAPEAXIS_YZ SHAPEAXIS_XZ SHAPEAXIS_XY SHAPEAXIS_XYZ SHAPEAXIS_FACE

        • enabled: boolean

          The enabled state of shape.

        Returns void

      • Get the enabled state of the shape.

        Parameters

        • shapeAxis: string

          The shape axis. Can be:

          SHAPEAXIS_X SHAPEAXIS_Y SHAPEAXIS_Z SHAPEAXIS_YZ SHAPEAXIS_XZ SHAPEAXIS_XY SHAPEAXIS_XYZ SHAPEAXIS_FACE

        Returns boolean

        • Then enabled state of the shape

      Events

      EVENT_NODESATTACH: string = 'nodes:attach'

      Fired when graph nodes are attached.

      Example

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

      Fired when graph nodes are detached.

      Example

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

      Fired when the pointer is down on the gizmo.

      Example

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

      Fired when the pointer is moving over the gizmo.

      Example

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

      Fired when the pointer is up off the gizmo.

      Example

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

      Fired when the gizmo's position is updated.

      Example

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

      Fired when when the gizmo render has updated.

      Example

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

      Fired when the gizmo's rotation is updated.

      Example

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

      Fired when the gizmo's scale is updated.

      Example

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

      Fired when when the transformation has ended.

      Example

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

      Fired during the transformation.

      Example

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

      Fired when when the transformation has started.

      Example

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