[BUG] Gizmo

[Identity-labs]

You can't switch from translate to rotate mode it's breaking the gizmo, and you can go back to translate mode after that

"ngx-three": "^0.31.0",
"rxjs": "~7.8.1",
"three": "^0.164.1",
"@types/three": "~0.164.0",

<th-canvas [thStats]="true" [renderOnDemand]="renderOnDemand" #canvas>
    <th-scene>
        <th-mesh #model
            [(position)]="selectedElementPosition"
            [(rotation)]="selectedElementRotation"
            [(scale)]="selectedElementScale">
        </th-mesh>

        <th-perspectiveCamera
            [ngSwitch]="controlType"
            #camera
            [position]="cameraPosition"
            [rotation]="cameraRotation"
        >
            <th-orbitControls *ngSwitchCase="'orbit'" />
            <th-mapControls *ngSwitchCase="'map'" />
            <th-arcballControls *ngSwitchCase="'arcball'" />
            <th-transformControls *ngSwitchCase="'transform'"
                [object]="model.objRef"
                [mode]="editorMode"
                [threeEvents]="transformEvents" />
            <th-dragControls
                *ngSwitchCase="'drag'"
                [args]="[[model.objRef], camera.objRef, canvas.hostElement.nativeElement]"
            />
            <th-flyControls *ngSwitchCase="'fly'" />
            <th-trackballControls *ngSwitchCase="'trackball'" />
            <th-firstPersonControls *ngSwitchCase="'firstpersion'" />
        </th-perspectiveCamera>
    </th-scene>
</th-canvas>

I change editorMode width addEventListener on keydown You can go back to translate mode without any error but control is not showing

[demike]

The modified on-demand-rendering example works as expected ```

Render On-Demand orbit map arcball transform drag fly trackball firstpersion

Change Mode

<th-object3D
  #model
  loadGLTF
  [url]="glbPath"
  (onClick)="selected = !selected"
  [scale]="selected ? [2, 2, 2] : [1, 1, 1]"
/>
<th-gridHelper [args]="[10, 10]" />
<th-pointLight [position]="[10, 10, 10]" [decay]="0" />

<th-perspectiveCamera
  [ngSwitch]="controlType"
  #camera
  [args]="[45, 2, 0.1, 100]"
  [position]="[10, 10, 10]"
  [lookAt]="[0, 0, 0]"
>
  <th-orbitControls *ngSwitchCase="'orbit'" />
  <th-mapControls *ngSwitchCase="'map'" />
  <th-arcballControls *ngSwitchCase="'arcball'" />
  <th-transformControls *ngSwitchCase="'transform'" [object]="model.objRef" [mode]="mode" />
  <th-dragControls
    *ngSwitchCase="'drag'"
    [args]="[[model.objRef], camera.objRef, canvas.hostElement.nativeElement]"
  />
  <th-flyControls *ngSwitchCase="'fly'" />
  <th-trackballControls *ngSwitchCase="'trackball'" />
  <th-firstPersonControls *ngSwitchCase="'firstpersion'" />
</th-perspectiveCamera>

```

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ASSET_PATH } from '../assets';
import { TransformControlsMode } from 'three/examples/jsm/controls/TransformControls';

@Component({
  selector: 'app-on-demand-example',
  templateUrl: './on-demand-example.component.html',
  styleUrls: ['./on-demand-example.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OnDemandExampleComponent {
  protected controlType = 'transform';
  protected renderOnDemand = true;
  protected selected = false;
  protected mode: TransformControlsMode = 'translate';
  public readonly glbPath = `${ASSET_PATH}DamagedHelmet.glb`;

  public changeMode() {
    if (this.mode === 'translate') {
      this.mode = 'rotate';
    } else if (this.mode === 'rotate') {
      this.mode = 'translate';
    }
  }
}