fix: allow clipping planes to be used with Outlines (#2133)

docs/abstractions/outlines.mdx

@@ -25,6 +25,8 @@ type OutlinesProps = JSX.IntrinsicElements['group'] & {
   thickness: number
   /** Geometry crease angle (0 === no crease), default: Math.PI */
   angle: number
+  /** Clipping planes, default: null (no clipping) works the same as clipping planes on any material */
+  clippingPlanes: THREE.Plane[] | null
 }
 ```
 

src/core/Outlines.tsx

@@ -16,6 +16,7 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial(
   `#include <common>
    #include <morphtarget_pars_vertex>
    #include <skinning_pars_vertex>
+   #include <clipping_planes_pars_vertex>
    uniform float thickness;
    uniform bool screenspace;
    uniform vec2 size;
@@ -31,6 +32,7 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial(
 	   #include <morphtarget_vertex>
 	   #include <skinning_vertex>
      #include <project_vertex>
+     #include <clipping_planes_vertex>
      vec4 tNormal = vec4(normal, 0.0);
      vec4 tPosition = vec4(transformed, 1.0);
      #ifdef USE_INSTANCING
@@ -50,7 +52,9 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial(
    }`,
   `uniform vec3 color;
    uniform float opacity;
+   #include <clipping_planes_pars_fragment>
    void main(){
+     #include <clipping_planes_fragment>
      gl_FragColor = vec4(color, opacity);
      #include <tonemapping_fragment>
      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
@@ -70,6 +74,7 @@ type OutlinesProps = JSX.IntrinsicElements['group'] & {
   thickness?: number
   /** Geometry crease angle (0 === no crease), default: Math.PI */
   angle?: number
+  clippingPlanes?: THREE.Plane[]
   toneMapped?: boolean
   polygonOffset?: boolean
   polygonOffsetFactor?: number
@@ -87,6 +92,7 @@ export function Outlines({
   renderOrder = 0,
   thickness = 0.05,
   angle = Math.PI,
+  clippingPlanes,
   ...props
 }: OutlinesProps) {
   const ref = React.useRef<THREE.Group>()
@@ -150,6 +156,8 @@ export function Outlines({
         toneMapped,
         polygonOffset,
         polygonOffsetFactor,
+        clippingPlanes,
+        clipping: clippingPlanes && clippingPlanes.length > 0,
       })
     }
   })