How to modify default materials loaded with gltf

Questions
1

Hello all,

This is my 6th day with Three.js. Learned a lot from all the resources. I can now load a Draco compressed gltf with the gltf-pipeline. All the textures Automatically load absolutely perfect.

Now I want to use clipping planes to perform a cross section of the loaded gltf.
I got some inspiration from threejs example.

That too was achieved, but by selecting each individual material and assigning the values, including manual loading of the texture. I tried

object.traverse((o) => {       
if (o.isMesh) {
       o.material.emissive = new THREE.Color( 0x00ffff );
      o.material.clippingPlanes= new THREE.clippingPlanes('localPlane');
      o.material.side = new THREE.side.double;
       }
    });

ReferenceError: “Three is not defined”

All I want is to add

// ***** Clipping setup (material): *****
side: THREE.DoubleSide,											
clippingPlanes: [ localPlane ],
clipShadows: true

for all default materials.

Any pointers are much appreciated.
Thanks for you time.
Take care!

2

This bit does not look right. Please try it like the example with THREE.Plane. Besides, when defining the side property, there is no need for using the new operator. Assigning THREE.DoubleSide should be sufficient.

3

Okay! the side property is solved.

I am still struggling to find how to assign value to clippingPlanes

Screenshot 2020-04-10 at 11.40.38 PM
Screenshot 2020-04-10 at 11.40.38 PM1778×724 92.3 KB

4

var localPlane = new THREE.Plane( new THREE.Vector3( -1, 0, 0 ), 900 );

When I do it manually for individual material

var newMaterial1 = new THREE.MeshPhysicalMaterial( {
		color: 0xff0000,
		map: texture,
		side: THREE.DoubleSide,
            clippingPlanes: [ localPlane ],
	        clipShadows: true
} );
5

OKAY! this was easier than I though it was.
Just use

o.material.clippingPlanes= [localPlane];

instead of

o.material.clippingPlanes= new THREE.clippingPlanes('localPlane');

Thanks @Mugen87 for the pointer.

Got it from https://github.com/mrdoob/three.js/blob/7c1424c5819ab622a346dd630ee4e6431388021e/src/renderers/WebGLRenderer.js#L55

1 Like