How to implement image cropping?

[mysterybear]

Hi,

I need to implement crop functionality for planes with image texture materials (regular old crop, think Photoshop/GIMP clone)

I see that Three has "clipping planes" but I'm having trouble finding examples, docs, guidance on how to approach this, especially with r3f.

Can anyone help? Cheers in advance

[drcmda]

i havent used them but it would be the same way you implement them in three. theres really no difference in the api, these are the same ole threejs objects just with brackets around them.

[mysterybear]

Hi @drcmda thanks for reply!

I've made a minimal sandbox to test https://codesandbox.io/s/github/mysterybear/wtf-clipping-planes (I know I'm supposed to memoize three objects for performance but in this simple test case I think it doesn't matter)

Nothing is happening, maybe I'm doing something wrong

I'm not even sure if this is the feature I should be exploring to implement plane cropping though

[mysterybear]

Sorry I've changed the title, and also posted a question here https://discourse.threejs.org/t/image-cropping-how-to-approach-this-problem/25083

[drcmda]

the gl param is wrong, see: https://threejs.org/docs/index.html?q=webg#api/en/renderers/WebGLRenderer

"localClippingEnabled" is not an argument, but a prop on the existing instance. typescript can warn you, that makes such things easier. your code was otherwise fine, but you can express planes declaratively if you wanted.

https://codesandbox.io/s/new-bash-9b8xs?file=/src/App.js

[mysterybear]

Very helpful, thank you, will play with this today and see if I can follow through with image cropping using this approach :D

[drcmda]

image cropping on a plane? imo that can (and should be) easily done with a small shader.

[mysterybear]

Thanks for encouraging me to do this @drcmda ! I've since learned shader fundamentals and how to implement image cropping with them like you suggested and I'm very happy about it! :-))

https://codesandbox.io/s/github/mysterybear/r3f-image-crop?file=/src/App.js

[drcmda]

looking very clean!