Image Cropping, How to Approach This Problem?

Questions
#1

Hey,

How would I go about implementing image cropping?

I’ve done this with regular DOM and with 2D canvas, but I’d prefer to use Three (well, I’m using react-three-fiber)

I’ve tried playing with clippingPlanes and alphaMap and I’m kinda struggling. I don’t feel like I even know how I should be approaching the problem at a high level at the moment to be honest.

This is what I’m going for implemented with the DOM and the 2D canvas: dream-builder-crop-demo - CodeSandbox

Edit: bleh not sure why my codesandbox doesn’t want to work, works fine locally, code is here: GitHub - mysterybear/dream-builder-crop

I want to implement the same thing but with Three.js (using react-three-fiber but I’m comfortable porting to that)

If someone could at least tell me which Three.js primitives would be most appropriate to use, and perhaps a pseudo-code explanation or something, that would probably get me going.

Cheers!

#2

that’s a common mistake. threes webglrenderer takes only a limited amount of arguments, localClippingEnabled isn’t among them, see: three.js docs

it’s a prop on the existing instance. why that is i don’t know, i’ve ran into this more than once, but this is where typescript really comes in handy because it wouldn’t let you set it.