Clipping not working when rotate and translate object in Three.JS

Question

I`m extension object clipping with 6 planes. And the constant of the plane is controlling by 3 scroll bars as you can see below

[

the original clippingPlanes are as follows.

var localPlane_x = new THREE.Plane( new THREE.Vector3( -1, 0, 0 ), 5000 );
var localPlane_y = new THREE.Plane( new THREE.Vector3( 0, -1, 0 ), 5000 );
var localPlane_z = new THREE.Plane( new THREE.Vector3( 0, 0, -1 ), 5000 );
var localPlane_x1 = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 5000 );
var localPlane_y1 = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 5000 );
var localPlane_z1 = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 5000 );

mesh.material.clippingPlanes = [localPlane_x, localPlane_y, localPlane_z, localPlane_x1, localPlane_y1, localPlane_z1];

when the values changes I updated the clippingPlanes like follow. - for the constant

mesh.material.clippingPlanes[0].constant = clip1.x + mesh.position.x;

• for the normal

var normal = new THREE.Vector3();
normal.set(-1, 0, 0).applyQuaternion(selected_Object.quaternion);
mesh.material.clippingPlanes[0].normal.copy(normal);

This working well when object is translated or rotated.

but this is not working when both rotate and translate.

Answer 1

I found the solution in this article. THREE.js Turn THREE.planeGeometry to THREE.plane

You can create 6 planeGeometry as a children of mesh for each side and move the planeGeometry according to the mesh clipping.

When clipping you can clip the mesh with the PlaneGeometry.