# RotateGizmo

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

Source: https://github.com/playcanvas/engine/blob/970d89f6d3bc6667f4e1f88153abd6e7e82ed52c/src/extras/gizmo/rotate-gizmo.js#L68

The RotateGizmo provides interactive 3D manipulation handles for rotating/reorienting
[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 a draggable ring for each
axis of rotation, plus a fourth ring for rotation in the camera's view plane, allowing precise
control over object orientation 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 rotate gizmo
const gizmo = new RotateGizmo(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:

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

## Constructors

### constructor

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

Creates a new RotateGizmo 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 RotateGizmo(camera, layer);
```

## Properties

### _shapes

```ts
protected _shapes: { f: ArcShape; x: ArcShape; xyz: SphereShape; y: ArcShape; z: ArcShape }
```

Internal object containing the gizmo shapes to render.

**Properties**

- `f` (`ArcShape`, optional)
- `x` (`ArcShape`, optional)
- `xyz` (`SphereShape`, optional)
- `y` (`ArcShape`, optional)
- `z` (`ArcShape`, optional)

### rotationMode

```ts
rotationMode: "absolute" | "orbit" = 'absolute'
```

The rotation mode of the gizmo. This can be either:

- 'absolute': The rotation is calculated based on the mouse displacement relative to the
initial click point.
- 'orbit': The rotation is calculated based on the gizmos position around the center of
rotation.

### snapIncrement

```ts
snapIncrement: number = 5
```

## Accessors

### angleGuideThickness

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

Gets the angle guide line thickness.

### centerRadius

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

Gets the center radius.

### faceRingRadius

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

Gets the face ring radius.

### faceTubeRadius

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

Gets the face tube radius.

### ringTolerance

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

Gets the ring tolerance.

### xyzRingRadius

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

Gets the XYZ ring radius.

### xyzTubeRadius

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

Gets the XYZ tube radius.

## Methods

### _calculateArcAngle

```ts
protected _calculateArcAngle(point: Vec3, x: number, y: number): number
```

**Parameters**

- `point` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The point.
- `x` (`number`): The x coordinate.
- `y` (`number`): The y coordinate.

**Returns** `number`: The angle.

### _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)).

### destroy

```ts
destroy(): void
```

### 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`
- `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'`