Hotspots blocking zoom and rotate gestures (pointer events conflict)

[Trolli991]

Hi everyone,

I'm facing an issue with hotspots interfering with the default gestures of .

Normally, on desktop I can rotate the model by dragging with the left mouse button and zoom with the mouse wheel. On mobile, I can rotate by dragging with one finger and zoom using the pinch gesture.

However, when my cursor (or finger) is positioned on a hotspot, the behavior changes unexpectedly:

On desktop:

• If I try to zoom (mouse wheel) while hovering over a hotspot, the page scrolls instead of zooming the model.
• If I try to rotate by clicking and dragging on a hotspot, nothing happens at all.

On mobile:

• If any finger is touching a hotspot during a pinch gesture, the zoom is not detected but the finger thats not on the hotspot, leading to rotation instead.
• When I try to rotate by dragging on a hotspot, instead of rotating the model, it scrolls the page.

It seems like the hotspots are capturing the pointer/touch events and preventing them from reaching the underlying model-viewer gestures.

I'm looking for advice on how to allow the default model-viewer gestures (rotate, zoom) to still work even when interacting over a hotspot. Ideally, I want the hotspots to respond to taps/clicks, but otherwise let pointer events pass through so that zooming and rotating still works as expected.

Any guidance on how to solve this would be much appreciated.
Thank you in advance!

[smirnov-artur]

The hotspots aren't capturing your gestures — they're in a different subtree from the listeners, so the events never reach the camera code at all.

SmoothControls binds everything to the element it is handed, and controls.ts hands it this[$userInputElement], which is the .userInput div:

element.addEventListener('pointerdown', this.onPointerDown);
element.addEventListener('wheel', this.onWheel);

Hotspots live somewhere else. ModelScene mounts the CSS2D layer into .slot.default:

this.element.shadowRoot!.querySelector('.default')!.appendChild(domElement);

and in template.ts .userInput and .slot.default are siblings inside .container. So a pointerdown on your hotspot bubbles hotspot → CSS2D container → .slot.default → .container → shadow root → host, and never passes through .userInput. Nothing blocks or cancels anything; SmoothControls simply never hears the event.

That accounts for all four of your symptoms, and your pinch observation is the proof of it: with one finger on a hotspot, SmoothControls gets exactly one pointerdown, so it takes its single-pointer path — which is rotate. It isn't failing to detect the pinch, it never saw the second finger.

The page-scroll half has the same root. SmoothControls applies its touch-action to its own element only:

const {style} = this.element;
...
style.touchAction = touchAction!;

Your hotspots are outside that element, so the browser's default touch-action governs there and it pans the page. Likewise the wheel: no handler runs, so nothing calls preventDefault, so the document scrolls.

Worth noting what is not the cause: the CSS2D container is explicitly transparent — ModelScene sets style.pointerEvents = 'none' on it. What captures is your own slotted content, via .annotation-wrapper ::slotted(*) { pointer-events: initial; } in template.ts. And model-viewer already handles the mid-gesture case: controls.ts toggles a pointer-tumbling class on pointer-change-start, and template.ts has

.pointer-tumbling .annotation-wrapper ::slotted(*) {
  pointer-events: none;
}

so a drag that begins on the canvas is never interrupted by a hotspot passing under the cursor. The only gap is a gesture that begins on a hotspot.

The fix for rotate/pinch is to stop the hotspot from being a hit target and re-enable only the part that must be tappable:

[slot^="hotspot"]        { pointer-events: none; }
[slot^="hotspot"] .dot   { pointer-events: auto; }

You don't need !important: for slotted elements, rules from the outer document beat ::slotted() rules from the shadow tree regardless of specificity. Keep the auto region small — anything you make tappable is, by definition, a place where a drag can't start.

The fix for the wheel is nicer, because there's a public method for exactly this. controls.ts:

zoom(keyPresses: number) {
  const event = new WheelEvent('wheel', {deltaY: -30 * keyPresses});
  this[$userInputElement].dispatchEvent(event);
}

So on the hotspot itself:

hotspot.addEventListener('wheel', (e) => {
  e.preventDefault();
  modelViewer.zoom(-e.deltaY / 30);
}, {passive: false});

and the wheel zooms the model even with the cursor parked on a label, without touching the shadow DOM.

Two approaches I'd skip:

• stopPropagation / preventDefault juggling on the hotspot. Natural first instinct, and it can't help: the event never travels through .userInput either way, so there is nothing to stop and nothing to let through.
• Re-dispatching a synthetic PointerEvent at shadowRoot.querySelector('.userInput') to forward the drag. It half-works and then betrays you: onPointerDown does element.setPointerCapture(event.pointerId) inside a bare try { } catch { }. A pointerId the browser doesn't own throws, the catch swallows it, and you get no capture — so the drag dies silently the moment the pointer leaves the hotspot's bounds, which is immediately. Plus that selector is an internal detail with no compatibility promise.