Clipping position with group

Questions
, ,
1

Hi All,

I have a glb object and When I try to clip it with a plane I get this shape :

image
image1083Ă—1348 62.1 KB

I need to change the position of the plane and I want to clip the object as a group with color.

My code

   let Objobject = gltf.scene;
        const params = {
          clipIntersection: false,
          planeConstant: 0,
          showHelpers: true
        };
  
        let plane = new Plane( new Vector3( 0, 0, measuresZG.min + wallWidth + 0.1 ), 0.1 );

        // Here I tried to change the position of the plane but not worked.
        // plane.position.z = measuresZG.min ;

        let clipPlanes = [
          plane
        ];

        const group = new Group();

				
          gltf.scene.traverse( function ( child ) {

            if ( child.isMesh ) {

                const geometry = child.geometry;

                const material = new MeshLambertMaterial( {
      
           
                  side: DoubleSide,
                  clippingPlanes: clipPlanes,
                  clipIntersection: params.clipIntersection,
                  map:child.material.map
      
                } );
                let mesh = new Mesh( geometry, material );
                mesh.position.x = child.position.x;
                mesh.position.y = child.position.y;
                mesh.position.z = child.position.z;
                mesh.rotation._y = child.rotation._y;
      
                group.add( mesh );
            }else{
              child.traverse( function ( child2 ) {

                if ( child2.isMesh ) {
            
               
                    const geometry = child2.geometry;
    
                    const material = new MeshLambertMaterial( {
          
                      side: DoubleSide,
                      clippingPlanes: clipPlanes,
                      map:child2.material.map,
                      clipIntersection: params.clipIntersection
          
                    } );
                    let mesh = new Mesh( geometry, material );
                    mesh.position.x = child2.position.x;
                    mesh.position.y = child2.position.y;
                    mesh.position.z = child2.position.z;
                    mesh.rotation._y = child2.rotation._y;
          
                    group.add( mesh );
                }});
            }
        
        } );
			
        scene.add( group );
2

Any Answer

3

Hey Hi @Ammar_Kayali , I hope you found the solution but if not here’s my take on this

You can’t actually change the position of the plane like this.
In Three.js, the THREE.Plane object represents an infinite plane defined mathematically by a normal vector and a constant

Why plane.position.x = value Won’t Work

A THREE.Plane is a mathematical representation of a plane, not a three-dimensional object with a position property. Unlike geometries such as THREE.Mesh which have a position attribute representing their location in 3D space, a THREE.Plane is defined by its normal vector and distance from the origin. This means:

  • No Position Property: THREE.Plane does not have a position property because its position is implicitly defined by its equation parameters (normal vector and constant đť‘‘d).
  • Mathematical Definition: Changing the plane’s position involves changing its mathematical representation (normal vector and distance from origin), not a spatial property.

Changing the Constant Value

To change the position of a THREE.Plane, you need to adjust the constant value. This changes the distance of the plane from the origin along the direction of the normal vector, effectively moving the plane.

Here’s the Example:

// Create a plane with normal vector pointing along the x-axis
const normal = new THREE.Vector3(1, 0, 0);
const constant = 2; // initial position at x = -2
const plane = new THREE.Plane(normal, constant);

// Function to move plane to a new position
function movePlane(plane, newConstant) {
    plane.constant = newConstant;
}

// Move the plane to x = -4
movePlane(plane, 4);
1 Like