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: