Implement custom scroll handling for ThreeJS scene container

[refoo0]

No description provided.

[Copilot]

Pull request overview

Adds custom wheel/scroll handling around the ThreeJS canvas so mouse-wheel input over the scene scrolls the page instead of being consumed by the ThreeJS controls/canvas.

Changes:

• Wrapped the <Canvas /> in a container <div> with a ref.
• Added a wheel event listener (capture, non-passive) to prevent default wheel behavior and forward scrolling to window.scrollBy.

Comments suppressed due to low confidence (2)

src/components/threejs/ThreeJSScene.tsx:108

• window.scrollBy(0, e.deltaY) assumes deltaY is in pixels. WheelEvent.deltaMode can be LINE or PAGE on some devices/browsers, which will make scrolling far too slow/fast. Consider normalizing the scroll distance based on e.deltaMode before calling scrollBy.

    const handleWheel = (e: WheelEvent) => {
      e.stopPropagation();
      e.preventDefault();
      window.scrollBy(0, e.deltaY);
    };

src/components/threejs/ThreeJSScene.tsx:107

• This handler calls preventDefault() for every wheel event, which will also block browser/page zoom gestures that are implemented as ctrl/trackpad-pinch + wheel (common accessibility workflow). Consider allowing default behavior when e.ctrlKey (and possibly e.metaKey) is pressed, or otherwise scoping the prevention so you don't disable zoom.

    const handleWheel = (e: WheelEvent) => {
      e.stopPropagation();
      e.preventDefault();
      window.scrollBy(0, e.deltaY);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[timbastin]

Just removing the camera controls component doesn't work? Or pointer-events: none