How can i make my side div with an overflow work (respond to mouse scroll wheel), while making use of the orbit control

I have this mini project i am working on , , i noticed when i put the orbit control, the side menu which is scrollable cannot be scrolled with the touch pad two finger gesture or the mouse scroll wheel cause it controls the 3D model, how best can i achieve the two feats ?

Why do you use var controls = new THREE.OrbitControls( camera ); instead of var controls = new THREE.OrbitControls( camera, renderer.domElement );?

i used var controls = new THREE.OrbitControls( camera );

Yes, I see that. But why do you use it like that, without the second parameter?

i honestly had no idea it had a second parameter. will try that now

If you don’t provide the second parameter, OrbitControls will pick document as its internal DOM element. That means all related event handlers are registered on document and not on your renderers canvas.

That’s why we have the documentation. It’s useful to read it time to time.