useMask hook and Mask component doesn't work with the current version of three.js

[Dooqp]

• three version: 0.164.0
• @react-three/fiber version: 8.16.3
• @react-three/drei version: 9.105.6
• node version: v20.9.0
• npm (or yarn) version: 1.22.19

Problem description:

I've used useMask hook and Mask component without a problem for a while. But today I've upgraded my packages and they don't work properly anymore. They still work with the older version of three.js (0.155.0)

Relevant code:

I've tried to reproduce this issue with the drei's own useMask example and it doesn't work either so I'll just leave the examples link below
https://www.npmjs.com/package/@react-three/drei

Suggested solution:

I don't really have any suggested solution but I tried the older version of three.js (0.155.0) and it works as expected with the updated drei package. Maybe this helps.

[Jarodwr]

as of threejs 163 you need to toggle the stencil flag on your canvas gl property:

[laurentlahmy]

Really worth updating the documentation! I just wasted hours on this.

#2021

[github-actions]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!