JSPM – @react-three/csg@1.0.0

Package Exports

@react-three/csg
@react-three/csg/dist/index.cjs.js
@react-three/csg/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-three/csg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

yarn add @react-three/csg

A small, abstraction around https://github.com/gkjohnson/three-bvh-csg. It is not feature complete!

You have 4 operations:

Subtraction
Addition
Difference
Intersection

Each can take a <Brush>, which is like a THREE.Mesh, it needs a geometry. A brush must be either slot a or b (first & second operand), which you need to define as a prop.

If you nest operations, the operation itself becomes a brush and must also define a slot.

The outmost operation will yield a buffergeometry, so you can use it in a mesh, an instancedMesh, or whatever needs a goemetry to function.

import { Brush, Subtraction, Addition, Difference, Intersection } from '@react-three/csg'

function Model() {
  return (
    <mesh>
      <Subtraction>
        <Subtraction a>
          <Brush a scale={1.5} position={[0, -1.04, 0]} geometry={nodes.bunny.geometry} />
          <Brush b position={[0.5, -0.75, 1]}>
            <sphereGeometry />
          </Brush>
        </Subtraction>
        <Brush b position={[-1, 1, 1]}>
          <sphereGeometry />
        </Brush>
      </Subtraction>
      <meshNormalMaterial />
    </mesh>
  )
}

Updating the operations

If you update a brush, or an operation, set needsUpdate on it, it will bubble up to its base operation. Keep in mind that although the base CSG implementation is fast, this is something you may want to avoid doing often or runtime, depending on the complexity of your geometry.

function Shape() {
  const brush = useRef()
  useFrame((state, delta) => {
    brush.current.rotation.x += 0.025
    brush.current.needsUpdate = true
  })
  return (
    <mesh>
      <Subtraction castShadow receiveShadow>
        <Brush a rotation={[0, Math.PI / 2, 0]} position={[-0.35, 0.4, 0.4]}>
          <boxGeometry />
        </Brush>
        <Brush b ref={brush} position={[-0.35, 0.4, 0.4]}>
          <boxGeometry />
        </Brush>