Can't right-click inspect page / mouse events not bubbling up?

[onetwothreebutter]

I took @mattdesl project from his FrontEnd Masters course and I'm using it to make a weather visualizer (here's the first draft: https://weather-orb.netlify.com/). However, I can't seem to right-click on the canvas. The code is here: https://github.com/onetwothreebutter/weather-orbs/blob/master/src/weather-orbs.js

Am I missing something? Or do you need me to create a more whittled-down version to debug?

[neiltron]

I think this is related to OrbitControls. By default, it binds its mouse/click events to document. You can pass a DOM element to it, though, which should help your issue. See this stackoverflow post.

[mattdesl]

Ah yup, I should change the default template to fix that.

Here is how you can fix it in yours, just by passing the context.canvas (or pulling canvas from props) to the OrbitControls.

const sketch = ({ context }) => {
  ... 
  const controls = new THREE.OrbitControls(camera, context.canvas);
  ...
});

[neiltron]

@mattdesl Hope you don't mind that I created a small PR for this change.

Note that you still can't right click on the canvas with this. OrbitControls calls preventDefault unless the controls are disabled entirely. I think you'd actually have to modify OrbitControls to enable right-clicking on the canvas. Or you can also set controls.enabled to false – maybe temporarily via dat.gui or something similar.

[onetwothreebutter]

@neiltron @mattdesl thanks for your great tips! I think for my use-case I'm going to make THREE's controls into a global so I can toggle them on and off. Or maybe I'll just move my settings form (to update the user's lat/long) to its own page. UPDATE: Actually I may load the canvas-sketch project in an iframe and see if that gets me anywhere.