Stencil does not work on STL model

Questions
,
1

Hello everyone,
i’m trying to scrape my stl model thorugh x ,y and z planes.There is an example on example which demonstrates perfectly. As I check for the source code there is a line that initializes the model and sends the geometry variable to createPlaneStencilGroup as parameter.

const geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 220, 60 );   
const stencilGroup = createPlaneStencilGroup( geometry, plane, i + 1 );

source code

However, I’m trying to perform same operation on my stl model. I add my stl model without an issue. Place the 3 planes on it just like in the example. As the planes go over on the model nothing happens.

function getMesh(){

    loader.load("models/Melekstl.stl", function(geometry) {

        var material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF66 , wireframe:true});      

        let mesh = new THREE.Mesh(geometry, material);

        console.log("function works");

        scene.add(mesh);

        return mesh;

      });

 }

and then I get my stl model and send it to the function

var mesh = getMesh();

planeObjects = [];

                const planeGeom = new THREE.PlaneBufferGeometry( 30, 30 );

                for ( let i = 0; i < 3; i ++ ) {

                    const poGroup = new THREE.Group();

                    const plane = planes[ i ];

                    const stencilGroup = createPlaneStencilGroup( mesh, plane, i + 1 );

                    // plane is clipped by the other clipping planes

                    const planeMat =

                        new THREE.MeshStandardMaterial( {

                            color: 0xE91E63,

                            metalness: 0.1,

                            roughness: 0.75,

                            clippingPlanes: planes.filter( p => p !== plane ),

                            stencilWrite: true,

                            stencilRef: 0,

                            stencilFunc: THREE.NotEqualStencilFunc,

                            stencilFail: THREE.ReplaceStencilOp,

                            stencilZFail: THREE.ReplaceStencilOp,

                            stencilZPass: THREE.ReplaceStencilOp,

                        } );

                    const po = new THREE.Mesh( planeGeom, planeMat );

                    po.onAfterRender = function ( renderer ) {

                        renderer.clearStencil();

                    };

                    po.renderOrder = i + 1.1;

                    object.add( stencilGroup );

                    poGroup.add( po );

                    planeObjects.push( po );

                    scene.add( poGroup );

                }

basically instead of TorusKnotBufferGeometry i created my stl model and send it to the createPlaneStencilGroup method and added planes. But it does not scrapes what am I missing ?

issue
issue896×657 29.8 KB

2

As far as I know, it may have to be converted to gltf format to be able to be operated on given the way the clipping planes work.

3

There aren’t any file format requirements for using stencils – once a file has been loaded it’s all the same to three.js so there’s something else about the code here.

The first thing that sticks out to me is that getMesh() does not return anything and is asynchronous so this line is just setting mesh to undefined:

var mesh = getMesh();

That aside the first step is to make sure the material clipping planes are working at all and that your model is getting clipped in the ways expected, which does not look to be the case in your screenshot. After that the stencil effect is very sensitive to draw order so it’s important to make sure that all steps are drawn in the correct order. See this post where I lay out the specific order:

2 Likes
4

Great info

5

Finally i found out the problem, I should have added the planes into my MeshBasicMaterial

function getMesh(){

  loader.load("models/Melekstl.stl", function(geometry) {

    var material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF66 , wireframe:true , clippingPlanes: Testplanes});      

    let mesh = new THREE.Mesh(geometry, material);

    console.log("function works");

    scene.add(mesh);

  });

 }
6

Heh, that will do it! Gotta clip the model. Glad you got it working!

7

Haha yeah I had to think simple I guess, thanks for your help btw