Suggestions on how to implement svg's viewbox effect

Questions
1

I was wondering how three js users would implement a functionality like the viewBox of SVG in a 2d three js scenario.

With viewBox specified the SVG is cut, hiding shapes (or part of them) that locate outside the rectangle defined by the two viewBox coordinates.

I have a software where I need to implement viewBox in order to cut some ShapeBufferGeometry but I don’t want to hide other 2d objects, for example the grid helper.

I was thinking to instantiate 4 big rectangular shapes and use them as “holes” for the geometries, but I’m not sure this will work: in my early prototypes I have strange results; plus, this technique seems to corrupts uvs coordinates, breaking a big piece of code I’ve written some months ago.

So… any advice? There’s something already done? Someone had to do this same thing in the past?

2

Have you considered to use a CSG library after generating your shape geometry? There are actually various projects available, see: Looking for Updated plug-in for CSG

I’m not sure this helps but a subtract operation could a possible solution for your issue.

3

I would look into the Material.clippingPlanes capability to cull fragments outside the box you want to render. Depending on the details of your use case you could use stencil buffer rendering / testing, as well.

4

Thanks to everyone.
I’ll leave this message here in case someone wants to achieve the same result.

I’ve decided to try with Material.clippingPlanes since it seemed easier, and it worked. It’s necessary to create 4 planes - one for every limit - and the trick is done.

My code looks more or less like this, but don’t take it too seriously: I still need to work on that and maybe something is missing.

const viewbox = [
	new Plane(new Vector3(0, 1, 0), -scheme.viewBox[1]),
	new Plane(new Vector3(0, -1, 0), scheme.viewBox[1] + scheme.viewBox[3]),
	new Plane(new Vector3(1, 0, 0), -scheme.viewBox[0]),
	new Plane(new Vector3(-1, 0, 0), scheme.viewBox[0] + scheme.viewBox[2])
];

I haven’t tried a CSG plugin, it seemed too far from my reach. Can’t say if this approach will work or not.

Thanks again!