Canvas is controlled from the whole page instead of within canvas only

Questions
#1

As the title says. I added the canvas to my webpage. The canvas is inside a 800x600 div for example, but even outside this div, no matter where on the page, when I click or drag my mouse it controls the canvas (3d model). I cannot interact with my website anymore because of this e.g. click on a textfield or something.

Does anyone know where this behavior is comming from?

#2

Hi!
If you’re using, for example, THREE.OrbitControls(), then try this:

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

But it’s better to provide a live code example, thus the other people won’t do fortune-telling.

#3

That was the exact solution, thanks so much for your reply prisoner849. Was going through my HTML, CSS and JS for hours thinking I messed up somewhere lol.