diff --git a/docs/abstractions/outlines.mdx b/docs/abstractions/outlines.mdx index ad3e926e4..942ee35f1 100644 --- a/docs/abstractions/outlines.mdx +++ b/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 } ``` diff --git a/src/core/Outlines.tsx b/src/core/Outlines.tsx index 0d33e8924..f85185aba 100644 --- a/src/core/Outlines.tsx +++ b/src/core/Outlines.tsx @@ -16,6 +16,7 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial( `#include #include #include + #include uniform float thickness; uniform bool screenspace; uniform vec2 size; @@ -31,6 +32,7 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial( #include #include #include + #include 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 void main(){ + #include gl_FragColor = vec4(color, opacity); #include #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() @@ -150,6 +156,8 @@ export function Outlines({ toneMapped, polygonOffset, polygonOffsetFactor, + clippingPlanes, + clipping: clippingPlanes && clippingPlanes.length > 0, }) } })