Threejs Object local clipping

[paulsoning]

Hey there,

I would like to use local clipping of 3D Object that I inserted to the map.
The clipping plane is working, but unfortunately when I move the map the the clipping plane "stays" in the same place

Could someone point me in a right direction how to solve this problem.

        // ***** Clipping planes: *****
        const local = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.8);

        // Geometry
        const material = new THREE.MeshPhongMaterial({
            color: 0x80EE10,
            shininess: 100,
            side: THREE.DoubleSide,
            // ***** Clipping setup (material): *****
            clippingPlanes: [local],
            clipShadows: true,
        });

        const geometry = new THREE.TorusKnotBufferGeometry(0.4, 0.08, 95, 20);
        const mesh = new THREE.Mesh(geometry, material);
        mesh.scale.set(45, 45, 45);
        mesh.castShadow = true;
        
        group.add(mesh);
        group.anchor = figureGeoPosition;
        group.overlay = true;
        map.mapAnchors.add(group);

Screen.Recording.2021-10-22.at.12.59.26.mov

Br,
Marek

[nzjony]

hi @paulsoning , we render objects relative to the camera, see:

harp.gl/@here/harp-mapview/lib/TileObjectsRenderer.ts

Line 66 in bd9d86e

object.position.sub(cameraPosition);

As such, you need to transform the plane based on the position of the object, see: https://stackoverflow.com/questions/45611247/local-clipping-of-planes-based-on-local-axis

Something like:

        const updateListener = () => {
            // update position of plane based on the object's position
        };
        mapView.addEventListener(MapViewEventNames.Render, updateListener);

[paulsoning]

thanks, this works!

[nzjony]

@paulsoning , look forward to see what cool stuff you make!