Cover cutted area when using clipping planes

I have implemented clipping planes already with transformControl to move them and they are working great, but i want to add cover for cutted area similiar to Autodesk Forge ( like in this question https://stackoverflow.com/questions/43829516/cover-cuts-in-cut-planes ). I am looking for suggestions which tools to use to achive this. You can test how it works in AutodeskForge here: https://forge-rcdb.autodesk.io/configurator?id=59041f250007f5c0eef482f2&_ga=2.191013418.1661503043.1575892124-1805239087.1562248066
Thank you in advance for any tips.

Hi!
Are you looking for something like that? https://threejs.org/examples/?q=cli#webgl_clipping_stencil

3 Likes

Hi, sorry for a late response, but i was trying this solution. It works quite good, but i noticed one thing, if I want to create this to work for each element from the whole model (I cannot merge model elements geometries into one because i want to be able to move and rotate each element of the model) I am creating 6 additional draw calls (6 meshes) for each element, according to this method from example:

function createPlaneStencilGroup( geometry, plane, renderOrder ) {
			var group = new THREE.Group();
			var baseMat = new THREE.MeshBasicMaterial();
			baseMat.depthWrite = false;
			baseMat.depthTest = false;
			baseMat.colorWrite = false;
			baseMat.stencilWrite = true;
			baseMat.stencilFunc = THREE.AlwaysStencilFunc;
			// back faces
			var mat0 = baseMat.clone();
			mat0.side = THREE.BackSide;
			mat0.clippingPlanes = [ plane ];
			mat0.stencilFail = THREE.IncrementWrapStencilOp;
			mat0.stencilZFail = THREE.IncrementWrapStencilOp;
			mat0.stencilZPass = THREE.IncrementWrapStencilOp;
			var mesh0 = new THREE.Mesh( geometry, mat0 );
			mesh0.renderOrder = renderOrder;
			group.add( mesh0 );
			// front faces
			var mat1 = baseMat.clone();
			mat1.side = THREE.FrontSide;
			mat1.clippingPlanes = [ plane ];
			mat1.stencilFail = THREE.DecrementWrapStencilOp;
			mat1.stencilZFail = THREE.DecrementWrapStencilOp;
			mat1.stencilZPass = THREE.DecrementWrapStencilOp;
			var mesh1 = new THREE.Mesh( geometry, mat1 );
			mesh1.renderOrder = renderOrder;
			group.add( mesh1 );
			return group;
		}

For small models it is ok, but in my case where i have 10mb model with about 5000 elements it makes performance much worse. Maybe you have any idea how can I get around it so I won’t lose lot of fps?