# Two.ZUI
Two.ZUI is an extra class to turn your Two.js scene into a Google Maps or Adobe Illustrator style interface. See https://codepen.io/jonobr1/pen/PobMKwb (opens new window) for example usage.
# Constructor
| Argument | Description |
|---|---|
| group | The scene or group to |
| domElement | The HTML Element to attach event listeners to. |
# addLimits
Two.ZUI.addLimits
| Argument | Description |
|---|---|
| min | The minimum scale the ZUI can zoom out to. |
| max | The maximum scale the ZUI can zoom in to. |
# clientToSurface
Two.ZUI.clientToSurface
Overloaded
Returns: Object
- An object with x, y, and z components
| Argument | Description |
|---|---|
| a |
Convert an x, y coordinate in the user’s space to the object's projected space. Optionally pass a z property on the object to apply depth.
# clientToSurface
Two.ZUI.clientToSurface
Overloaded
Returns: Object
- An object with x, y, and z components
| Argument | Description |
|---|---|
| a | The x component of position to be transformed. |
| b | The y component of position to be transformed. |
| c | The optional z component of position to be transformed. |
Convert an x, y coordinate in the user’s space to the object's projected space. Optionally pass a z property on the object to apply depth.
# surfaceToClient
Two.ZUI.surfaceToClient
Overloaded
Returns: Object
- An object with x, y, and z components
| Argument | Description |
|---|---|
| a |
Convert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth.
# surfaceToClient
Two.ZUI.surfaceToClient
Overloaded
Returns: Object
- An object with x, y, and z components
| Argument | Description |
|---|---|
| a | The x component of position to be transformed. |
| b | The y component of position to be transformed. |
| c | The optional z component of position to be transformed. |
Convert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth.
# zoomBy
Two.ZUI.zoomBy
| Argument | Description |
|---|---|
| byF | The factor to scale by. |
| clientX | The x position of the user's input. |
| clientY | The y position of the user's input. |
A function to zoom by an incremental amount and a position. Typically used for pinch-and-zoom or mousewheel effects.
# zoomSet
Two.ZUI.zoomSet
| Argument | Description |
|---|---|
| zoom | The level of the zoom. |
| clientX | The x position of the user's input. |
| clientY | The y position of the user's input. |
A function to set the zoom amount and the origin position. This is used internally by {@Two.ZUI#zoomBy}.
# translateSurface
Two.ZUI.translateSurface
| Argument | Description |
|---|---|
| x | The x amount to pan. |
| y | The y amount to pan. |
Set the position of the ZUI by an incremental translation amount.
← Two.Arc