Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stencils seem not to work #876

Closed
5 tasks done
AndreasFaust opened this issue Nov 30, 2024 · 3 comments
Closed
5 tasks done

Stencils seem not to work #876

AndreasFaust opened this issue Nov 30, 2024 · 3 comments

Comments

@AndreasFaust
Copy link

AndreasFaust commented Nov 30, 2024

Describe the bug

I am trying to reproduce Drei’s Mask component.
I have set up a red sphere as a mask for an orange plane behind it.
The sphere should be invisible and the plane should only be visible through the mask of the invisible sphere.
Unfortunately it does not work. Am I doing something wrong or has it something to do with TresJS?

INFO: To make it work in React colorWrite must be set to false. I set it to true, because the Sphere would be invisible otherwise.

Reproduction

https://stackblitz.com/edit/vitejs-vite-zqtnhb?file=src%2FApp.vue

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

@andretchen0 andretchen0 added bug Something isn't working investigation p3-minor-bug An edge case that only affects very specific usage (priority) labels Nov 30, 2024
@andretchen0
Copy link
Contributor

andretchen0 commented Nov 30, 2024

I can confirm. I've encountered the same recently when trying to make a <Mask /> component for Cientos.

Am I doing something wrong or has it something to do with TresJS?

I'm not sure. I'm guessing that it's an issue with Tres core, but I haven't found a culprit yet. I have a working stencil in plain THREE.js using the same THREE version as Tres core. When those same material settings are used in Tres, the stencil doesn't work.

Probably important to note that in recent versions of THREE, you now have to specifically enable stencil:

https://threejs.org/docs/#api/en/renderers/WebGLRenderer

I'm currently on the road and will probably look at this again next week. In the meantime, @AndreasFaust if you make any progress, please post your findings. Thanks!

@AndreasFaust
Copy link
Author

Thank you @andretchen0! Adding the stencil-prop to TresCanvas made it work!
I updated my example on stackblitz. Also thank you for these amazing libraries!

@andretchen0
Copy link
Contributor

Great to hear! Thanks for following up!

@andretchen0 andretchen0 removed investigation bug Something isn't working p3-minor-bug An edge case that only affects very specific usage (priority) labels Dec 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants