Canvas behind web content, can't use orbit controls

I’m rendering my canvas behind (z-index =1) the rest of my webpage (z-index=2) so it can be full screen and not conflict with the rest of the elements on the page.
Generally to rotate a model, the user would drag it with orbit controls. But seeing as I’m rending page divs on top of the canvas, the model is not selectable. Is there a way to create a div on z-index 2, where orbit controls can be used? Ideally I’d like to have a little sphere that can be grabbed and rotated, but I’m not sure how this could be implemented.

Add pointer-events: none to div css.