Three.js clipping

Questions
,
1

Hello
Have some problem with clipping.

I have two objects.
geometry cube and model.
everything is ok with the cube, but clipping does not work for the model.

0
02560×1278 170 KB

let localPlane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 1 );
renderer.localClippingEnabled = true;
{

 const geometry = new THREE.BoxGeometry( 5,5,5 );
 const material = new  THREE.MeshNormalMaterial({
      clippingPlanes: [ localPlane ],
      clipShadows: true,
      side: THREE.DoubleSide
 });

 const mesh = new THREE.Mesh(geometry,material);
 scene.add(mesh);

}

    var loader = new THREE.GLTFLoader();
loader.load( gallery[current], handle_load );
let car;

function handle_load( object) {
     car = object.scene;
     car.material = new THREE.MeshNormalMaterial({
          clippingPlanes: [ localPlane ],
          clipShadows: true,
          side: THREE.DoubleSide
     });
     car.position.y = -1.1;
     car.position.z = -3;
     car.scale.set(3.7,3.7,3.7);
     car.castShadow = true;
     car.receiveShadow = true;
     car.traverse( function ( child ) {

          if ( child.isMesh ) {

               child.castShadow = true;
               child.receiveShadow = true;

          }

     } );
      scene.add(car);
}

also if I do clipping globally then it works but I don’t need it.

1
12560×1278 122 KB

what could be the problem ?

2

It seems you didn’t replace the loaded object material the right way.
The object contained in the scene parameter of the object returned by GLTFLoader.load is generally not the mesh itself, but has your mesh as child. You should attribute the new material when you loop through children.

Try replacing the content of handle_load with this :

const parent = object.scene;

const myMaterial = new THREE.MeshNormalMaterial({
  clippingPlanes: [ localPlane ],
  clipShadows: true,
  side: THREE.DoubleSide
});

parent.position.y = -1.1;
parent.position.z = -3;
parent.scale.setScalar( 3.7 );

parent.traverse( function ( child ) {

  if ( child.isMesh ) {

       child.castShadow = true;
       child.receiveShadow = true;
       child.material = myMaterial.clone();

  }

});

scene.add(parent);
3

there is no other way?

it’s just that when we duplicate the material, we lose the texture mapping property from the model.

4

Sorry I don’t get that, what do you mean ?
You want to keep the textures from the original model ?

5

yes, i want to save textures from original model.
is it possible?

6

Did you try to add the properties you need to the imported model’s material ?

parent.traverse( function ( child ) {

  if ( child.isMesh ) {

       child.castShadow = true;
       child.receiveShadow = true;
       
       child.material.clippingPlanes = [ localPlane ],
       child.material.clipShadows = true,
       child.material.side = THREE.DoubleSide

  }

});
2 Likes
7 
function handle_load( object) {
 car = object.scene;

 const myMaterial = new THREE.MeshPhongMaterial({
      clippingPlanes: [ localPlane ],
      clipShadows: true,
      side: THREE.DoubleSide
 });

 car.position.y = -1.1;
 car.position.z = -3;
 car.scale.set(3.7,3.7,3.7);
 car.castShadow = true;
 car.receiveShadow = true;
 car.traverse( function ( child ) {
      if ( child.isMesh ) {
           child.castShadow = true;
           child.receiveShadow = true;
           child.material = myMaterial;
      }
 } );
  scene.add(car);

}

999
9992467×1221 95.3 KB

8

clipping works but texturing lost )))

9

Did you see my last suggestion ?

10

This ?

Did you try to add the properties you need to the imported model’s material ?

11

yes, and the snippet bellow

12

super !!!

1 Like