Overview

This package provides a <Cutter> component based on react-three-fiber that can clip and cap Meshes in an arbitrary scene in a manner similar to this example. A <Cutter> will clip and cap all descendant meshes using a Plane specified via its plane prop. This gives the meshes the appearance of filled solids instead of hollow objects with just surfaces. The caps at the clipping plane position use the same material as the original meshes. This means that each mesh will get a cap that looks like its own material. See Limitations/Bugs section below for some issues with the current implementation that are expected to be fixed in the future.

A simple example of usage is something like:

import Cutter from '@r3f-cutter/r3f-cutter';

// ...later...
<Cutter plane={xPlane}>
  <mesh position={[0, 0.5, 0]}>
    <boxGeometry />
    <meshStandardMaterial color="orange" />
  </mesh>
</Cutter>

Installation

npm i @r3f-cutter/r3f-cutter

Limitation/Bugs

• Only one plane supported at present. Support for multiple planes will be added.
• Caps use the same material as the original Mesh. If the Mesh uses an array of materials then it is capped using the first material from the list.
• If the Mesh is modified after it is initially clipped (for example, via useFrame()) then the caps are not correctly recomputed. This needs to be fixed. An live example that illustrates this issue is available here.
• It might be useful to have an option to disable capping entirely and just use clipping.