# TransformControlsWidget
**URL:** https://discourse.vtk.org/t/transformcontrolswidget/16066
**Category:** Web
**Tags:** vtkjs
**Created:** [September 28, 2025, 8:43am UTC](https://discourse.vtk.org/t/transformcontrolswidget/16066 "2025-09-28T08:43:37Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@lmj01](https://discourse.vtk.org/u/lmj01)
#### Post date: [September 28, 2025, 8:43am UTC](https://discourse.vtk.org/t/transformcontrolswidget/16066/1 "2025-09-28T08:43:37Z")
[Widget TransformControlsWidget](https://kitware.github.io/vtk-js/api/Widgets_Widgets3D_TransformControlsWidget.html) how work ?
it default is the coordinate origin, how can attach one actor to it ?
or its design purpos is what ? I think i dont’s understand it, but on the code repo at github, it would like three.js transformControl。
From the my confused look, i can’t find some doc with the offices only one demo.
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [September 28, 2025, 9:30am UTC](https://discourse.vtk.org/t/transformcontrolswidget/16066/2 "2025-09-28T09:30:55Z")
You can control the widget by setting the “transform” (translation, scaling, rotation) onto its state (e.g. `getWidgetState().getTransform().setTranslation()`).
Have a look at this example:
> **[vtk.js](https://kitware.github.io/vtk-js/examples/TransformControlsWidget.html)**
>
> TransformControlsWidgetLive example Source/\* eslint-disable \*/// Load the rendering pieces we want to use (for both WebGL and WebGPU)import '@kitware/vtk.js/Rendering/Profiles/Geometry';imp
---
### Author:  [@lmj01](https://discourse.vtk.org/u/lmj01)
#### Post date: [September 29, 2025, 8:06am UTC](https://discourse.vtk.org/t/transformcontrolswidget/16066/3 "2025-09-29T08:06:16Z")
thanks, @finetjul