# TranslateGizmo

Class · extends [`TransformGizmo`](https://api.playcanvas.com/engine/classes/TransformGizmo.md) · category: Gizmo

Source: https://github.com/playcanvas/engine/blob/b5b983982a9860d21e0c1dafb2f85f72e2c01afb/src/extras/gizmo/translate-gizmo.js#L61

The TranslateGizmo provides interactive 3D manipulation handles for translating/moving
[Entity](https://api.playcanvas.com/engine/classes/Entity.md)s in a [Scene](https://api.playcanvas.com/engine/classes/Scene.md). It creates a visual widget with arrows along the X, Y
and Z axes, planes at their intersections, and a center sphere, allowing precise control over
object positioning through direct manipulation. The gizmo's visual appearance can be customized
away from the defaults as required.

Note that the gizmo can be driven by both mouse+keyboard and touch input.

```javascript
// Create a layer for rendering all gizmos
const gizmoLayer = Gizmo.createLayer(app);

// Create a translate gizmo
const gizmo = new TranslateGizmo(cameraComponent, gizmoLayer);

// Create an entity to attach the gizmo to
const entity = new Entity();
entity.addComponent('render', {
    type: 'box'
});
app.root.addChild(entity);

// Attach the gizmo to the entity
gizmo.attach([entity]);
```

Relevant Engine API examples:

- [Translate Gizmo](https://playcanvas.github.io/#/gizmos/transform-translate)
- [Editor](https://playcanvas.github.io/#/misc/editor)

## Constructors

### constructor

```ts
new TranslateGizmo(camera: CameraComponent, layer: Layer)
```

Creates a new TranslateGizmo object. Use [Gizmo.createLayer](https://api.playcanvas.com/engine/classes/Gizmo.md#createlayer) to create the layer
required to display the gizmo.

**Parameters**

- `camera` ([`CameraComponent`](https://api.playcanvas.com/engine/classes/CameraComponent.md)): The camera component.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md)): The layer responsible for rendering the gizmo.

**Example**

```ts
const gizmo = new TranslateGizmo(camera, layer);
```

## Properties

### _shapes

```ts
protected _shapes: { x: ArrowShape; xy: PlaneShape; xyz: SphereShape; xz: PlaneShape; y: ArrowShape; yz: PlaneShape; z: ArrowShape }
```

Internal object containing the gizmo shapes to render.

**Properties**

- `x` (`ArrowShape`, optional)
- `xy` (`PlaneShape`, optional)
- `xyz` (`SphereShape`, optional)
- `xz` (`PlaneShape`, optional)
- `y` (`ArrowShape`, optional)
- `yz` (`PlaneShape`, optional)
- `z` (`ArrowShape`, optional)

### flipPlanes

```ts
flipPlanes: boolean = true
```

Flips the planes to face the camera.

### snapIncrement

```ts
snapIncrement: number = 1
```

## Accessors

### axisArrowLength

```ts
get axisArrowLength(): number
set axisArrowLength(value: number)
```

Gets the arrow length.

### axisArrowThickness

```ts
get axisArrowThickness(): number
set axisArrowThickness(value: number)
```

Gets the arrow thickness.

### axisCenterSize

```ts
get axisCenterSize(): number
set axisCenterSize(value: number)
```

Gets the axis center size.

### axisGap

```ts
get axisGap(): number
set axisGap(value: number)
```

Gets the axis gap.

### axisLineLength

```ts
get axisLineLength(): number
set axisLineLength(value: number)
```

Gets the axis line length.

### axisLineThickness

```ts
get axisLineThickness(): number
set axisLineThickness(value: number)
```

Gets the axis line thickness.

### axisLineTolerance

```ts
get axisLineTolerance(): number
set axisLineTolerance(value: number)
```

Gets the axis line tolerance.

### axisPlaneGap

```ts
get axisPlaneGap(): number
set axisPlaneGap(value: number)
```

Gets the plane gap.

### axisPlaneSize

```ts
get axisPlaneSize(): number
set axisPlaneSize(value: number)
```

Gets the plane size.

## Methods

### _drawGuideLines

```ts
_drawGuideLines(pos: Vec3, rot: Quat, activeAxis: GizmoAxis, activeIsPlane: boolean): void
```

**Parameters**

- `pos` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The position.
- `rot` ([`Quat`](https://api.playcanvas.com/engine/classes/Quat.md)): The rotation.
- `activeAxis` ([`GizmoAxis`](https://api.playcanvas.com/engine/types/GizmoAxis.md)): The active axis.
- `activeIsPlane` (`boolean`): Whether the active axis is a plane.

### _screenToPoint

```ts
protected _screenToPoint(x: number, y: number): Vec3
```

**Parameters**

- `x` (`number`): The x coordinate.
- `y` (`number`): The y coordinate.

**Returns** [`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md): The point (space is [TransformGizmo#coordSpace](https://api.playcanvas.com/engine/classes/TransformGizmo.md#coordspace)).

### prerender

```ts
prerender(): void
```

## Inherited from [TransformGizmo](https://api.playcanvas.com/engine/classes/TransformGizmo.md)

- `protected _app: AppBase`
- `protected _camera: CameraComponent`
- `protected _coordSpace: GizmoSpace = 'world'`
- `protected _device: GraphicsDevice`
- `protected _handles: EventHandle[] = []`
- `protected _layer: Layer`
- `protected _mouseButtons: [boolean, boolean, boolean]`
- `protected _renderUpdate: boolean = false`
- `protected _rootStartPos: Vec3`
- `protected _rootStartRot: Quat`
- `protected _scale: number = 1`
- `protected _selectedAxis: "" | GizmoAxis = ''`
- `protected _selectedIsPlane: boolean = false`
- `protected _selectionStartPoint: Vec3`
- `protected _theme: GizmoTheme`
- `dragMode: GizmoDragMode = 'selected'`
- `intersectShapes: Shape[] = []`
- `nodes: GraphNode[] = []`
- `preventDefault: boolean = true`
- `root: Entity`
- `snap: boolean = false`
- `protected get _dragging(): boolean`
- `get camera(): CameraComponent` · `set camera(camera: CameraComponent)`
- `protected get cameraDir(): Vec3`
- `get coordSpace(): GizmoSpace` · `set coordSpace(value: GizmoSpace)`
- `get enabled(): boolean` · `set enabled(state: boolean)`
- `protected get facingDir(): Vec3`
- `get layer(): Layer` · `set layer(layer: Layer)`
- `get mouseButtons(): [boolean, boolean, boolean]`
- `get size(): number` · `set size(value: number)`
- `get theme(): GizmoTheme`
- `protected _createPlane(axis: string, isFacing: boolean, isLine: boolean): Plane`
- `protected _createRay(mouseWPos: Vec3): Ray`
- `protected _createTransform(): void`
- `protected _dirFromAxis(axis: string, dir: Vec3): Vec3`
- `protected _drawSpanLine(pos: Vec3, rot: Quat, axis: "x" | "y" | "z"): void`
- `protected _projectToAxis(point: Vec3, axis: string): void`
- `protected _updatePosition(): void`
- `protected _updateRotation(): void`
- `protected _updateScale(): void`
- `attach(nodes?: GraphNode | GraphNode[]): void`
- `destroy(): void`
- `detach(): void`
- `enableShape(shapeAxis: "face" | GizmoAxis, enabled: boolean): void`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `isShapeEnabled(shapeAxis: "face" | GizmoAxis): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `setTheme(partial: object): void`
- `update(): void`
- `static createLayer(app: AppBase, layerName?: string, layerIndex?: number): Layer`
- `static EVENT_NODESATTACH: string = 'nodes:attach'`
- `static EVENT_NODESDETACH: string = 'nodes:detach'`
- `static EVENT_POINTERDOWN: string = 'pointer:down'`
- `static EVENT_POINTERMOVE: string = 'pointer:move'`
- `static EVENT_POINTERUP: string = 'pointer:up'`
- `static EVENT_POSITIONUPDATE: string = 'position:update'`
- `static EVENT_RENDERUPDATE: string = 'render:update'`
- `static EVENT_ROTATIONUPDATE: string = 'rotation:update'`
- `static EVENT_SCALEUPDATE: string = 'scale:update'`
- `static EVENT_TRANSFORMEND: string = 'transform:end'`
- `static EVENT_TRANSFORMMOVE: string = 'transform:move'`
- `static EVENT_TRANSFORMSTART: string = 'transform:start'`