# OrbitControls breaks project?

**URL:** <https://discourse.threejs.org/t/orbitcontrols-breaks-project/39732>\
**Category:** Questions\
**Tags:** orbit-controls\
**Created:** [June 28, 2022, 5:11am UTC](https://discourse.threejs.org/t/orbitcontrols-breaks-project/39732 "2022-06-28T05:11:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![VantageNoise](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vantagenoise/32/27509_2.png) [@VantageNoise](https://discourse.threejs.org/u/VantageNoise)\
**Post date:** [June 28, 2022, 5:11am UTC](https://discourse.threejs.org/t/orbitcontrols-breaks-project/39732/1 "2022-06-28T05:11:01Z")

</div>

Hi there !  
I decided to update my code to the latest three.js version and quite literally everything broke, some I was able to fix but some things are quite puzzling, like for example the fact that OrbitControls break the project on call. I thought I must be missing something so I made a codepen [here](https://codepen.io/vantagenoise/pen/oNqNNmX) with the controls commented out so you can see how it breaks the code when implemented. I have no idea what could be the cause, console says domElement is required as the second variable but using  
`const controls = new OrbitControls( camera, renderer.domElement );`  
doesn’t fix the issue either

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [June 28, 2022, 5:50am UTC](https://discourse.threejs.org/t/orbitcontrols-breaks-project/39732/2 "2022-06-28T05:50:45Z")

</div>

`const controls = new OrbitControls( camera, renderer.domElement );`

Yes, the second parameter `domElement` is now required. But you can’t reference `renderer` before _ **creating** _ the renderer. So all it took was a little reordering and now it’s working:

```javascript
let scene, renderer, controls;

//Scene
scene = new THREE.Scene();

//Camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

//Light
directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( directionalLight );

//Renderer
renderer = new THREE.WebGLRenderer({
				antialias : true
			});
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

//Controls
controls = new THREE.OrbitControls( camera, renderer.domElement );

```

Note that I also chose to declare the `scene, renderer, controls` variables. Maybe that wasn’t even necessary.

I left everything else unchanged.

---

<div class="post-metadata">

**Author:** ![VantageNoise](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vantagenoise/32/27509_2.png) [@VantageNoise](https://discourse.threejs.org/u/VantageNoise)\
**Post date:** [June 28, 2022, 7:14am UTC](https://discourse.threejs.org/t/orbitcontrols-breaks-project/39732/3 "2022-06-28T07:14:49Z")

</div>

thank you !!