# Consider move “EditorControls” outside “viewport” aim to User can oparete controls

**URL:** <https://discourse.threejs.org/t/consider-move-editorcontrols-outside-viewport-aim-to-user-can-oparete-controls/39560>\
**Category:** Questions\
**Tags:** editor\
**Created:** [June 23, 2022, 9:45am UTC](https://discourse.threejs.org/t/consider-move-editorcontrols-outside-viewport-aim-to-user-can-oparete-controls/39560 "2022-06-23T09:45:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cuih](https://avatars.discourse-cdn.com/v4/letter/c/59ef9b/32.png) [@cuih](https://discourse.threejs.org/u/cuih)\
**Post date:** [June 23, 2022, 9:45am UTC](https://discourse.threejs.org/t/consider-move-editorcontrols-outside-viewport-aim-to-user-can-oparete-controls/39560/1 "2022-06-23T09:45:58Z")

</div>

consider move “EditorControls” outside “viewport” aim to User can oparete controls

I feel it dont need to make this control customized

why not use “import { OrbitControls } from “three/examples/jsm/controls/OrbitControls”;” instead?

I have checked this issue, and comform I am using the fixed code. [Use ViewHelper when my camera up is zAxis (0,0,1)](https://discourse.threejs.org/t/use-viewhelper-when-my-camera-up-is-zaxis-0-0-1/27655)

my code has bad smell:

1. **do a hack:** add this line after “Viewport.js” line.56. " editor.viewHelper = viewHelper;"
2. in my script, **import** OrbitControls
3. const controls = **new** OrbitControls(this.editor.camera, this.viewport.dom);
4. **assignment**
5. //@ts-ignore  
this.editor.viewHelper.controls = controls;

I hope I made myself clear 😂

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 23, 2022, 11:32am UTC](https://discourse.threejs.org/t/consider-move-editorcontrols-outside-viewport-aim-to-user-can-oparete-controls/39560/2 "2022-06-23T11:32:57Z")

</div>

> [@cuih](#):
>
> why not use “import { OrbitControls } from “three/examples/jsm/controls/OrbitControls”;” instead?

`EditorControls` and `OrbitControls` are similar in certain ways however `EditorControls` was specifically designed for the editor. By having two classes, one can add editor specific code to `EditorControls` without affecting `OrbitControls`. It is just the more flexible approach.

I think I understand what you are asking for but I’m not sure I get the benefit of including and instantiating `EditorControls` elsewhere in the editor’s code base. Do you mind explaining in more detail?