@react-three/csg - npm Package Compare versions

Comparing version 2.0.7 to 2.1.0

CHANGELOG.md

 # @react-three/fiber
 
-## 2.0.7
-
-### Patch Changes
-
-- bcbae0a: feat: export props and ref types for base and operation components
-
-## 2.0.6
-
-### Patch Changes
-
-- fix: hot reload issues
-
-## 2.0.5
-
-### Patch Changes
-
-- feat: show base without ops, support index
-
-## 2.0.4
-
-### Patch Changes
-
-- readme updates
-- fix: compute vertex normals
-- fix: deps
-
-## 2.0.3
-
-### Patch Changes
-
-- readme updates
-- fix: compute vertex normals false by default
-
-## 2.0.2
-
-### Patch Changes
-
-- readme updates
-- feat: make recomputing vertex normals optional
-
-## 2.0.1
-
-### Patch Changes
-
-- fix: recompute vertex normals
-
-## 2.0.0
-
-## Major Changes
-
-- react-three/csg 2.x has been released!
-  - 🎉 simple api to capture constructive solid geometry
-  - 💫 chaining as many ops as you like
-  - 👨‍👧‍👦 hierarchies, nesting, grouping, re-use
-  - 🙌 interop with other eco system components
-
 ## 1.1.7
@@ -60,0 +4,0 @@

dist/index.cjs.js

@@ -167,2 +167,5 @@ 'use strict';
 }, props)));
+function useCSG() {
+  return React__namespace.useContext(csgContext);
+}
 
@@ -175,1 +178,2 @@ exports.Addition = Addition;
 exports.Subtraction = Subtraction;
+exports.useCSG = useCSG;

dist/index.d.ts

@@ -42,18 +42,26 @@ import * as React from 'react';
 export declare const Geometry: React.ForwardRefExoticComponent<CSGGeometryProps & React.RefAttributes<CSGGeometryRef>>;
-export declare type BaseProps = JSX.IntrinsicElements['brush'];
-export declare type BaseRef = Brush;
-export declare const Base: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.Object3DNode<Brush, typeof THREE.Mesh>, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "isBrush" | "markUpdated" | "isDirty" | "prepareGeometry" | "disposeCacheData" | "geometry" | "material" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "type" | "updateMorphTargets" | "raycast" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "operator" | "showOperation" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers> & React.RefAttributes<Brush>>;
-declare type OperationProps = Omit<BaseProps, 'operator'>;
-export declare type AdditionProps = OperationProps;
-export declare type AdditionRef = BaseRef;
-export declare const Addition: React.ForwardRefExoticComponent<Pick<OperationProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "isBrush" | "markUpdated" | "isDirty" | "prepareGeometry" | "disposeCacheData" | "geometry" | "material" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "type" | "updateMorphTargets" | "raycast" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "showOperation" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers> & React.RefAttributes<Brush>>;
-export declare type SubtractionProps = OperationProps;
-export declare type SubtractionRef = BaseRef;
-export declare const Subtraction: React.ForwardRefExoticComponent<Pick<OperationProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "isBrush" | "markUpdated" | "isDirty" | "prepareGeometry" | "disposeCacheData" | "geometry" | "material" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "type" | "updateMorphTargets" | "raycast" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "showOperation" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers> & React.RefAttributes<Brush>>;
-export declare type DifferenceProps = OperationProps;
-export declare type DifferenceRef = BaseRef;
-export declare const Difference: React.ForwardRefExoticComponent<Pick<OperationProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "isBrush" | "markUpdated" | "isDirty" | "prepareGeometry" | "disposeCacheData" | "geometry" | "material" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "type" | "updateMorphTargets" | "raycast" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "showOperation" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers> & React.RefAttributes<Brush>>;
-export declare type IntersectionProps = OperationProps;
-export declare type IntersectionRef = BaseRef;
-export declare const Intersection: React.ForwardRefExoticComponent<Pick<OperationProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "isBrush" | "markUpdated" | "isDirty" | "prepareGeometry" | "disposeCacheData" | "geometry" | "material" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "type" | "updateMorphTargets" | "raycast" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "showOperation" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers> & React.RefAttributes<Brush>>;
+export declare const Base: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<Brush>, ReactThreeFiber.NodeProps<Brush, typeof THREE.Mesh>>>, ReactThreeFiber.NonFunctionKeys<{
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+}>> & {
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "isBrush" | "markUpdated" | "isDirty" | "prepareGeometry" | "disposeCacheData" | "geometry" | "material" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "type" | "updateMorphTargets" | "raycast" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "operator" | "showOperation" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers> & React.RefAttributes<Brush>>;
+export declare const Addition: React.ForwardRefExoticComponent<React.RefAttributes<Brush>>;
+export declare const Subtraction: React.ForwardRefExoticComponent<React.RefAttributes<Brush>>;
+export declare const Difference: React.ForwardRefExoticComponent<React.RefAttributes<Brush>>;
+export declare const Intersection: React.ForwardRefExoticComponent<React.RefAttributes<Brush>>;
+export declare function useCSG(): CSGGeometryApi;
 export {};

dist/index.js

@@ -140,3 +140,6 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 }, props)));
+function useCSG() {
+  return React.useContext(csgContext);
+}
 
-export { Addition, Base, Difference, Geometry, Intersection, Subtraction };
+export { Addition, Base, Difference, Geometry, Intersection, Subtraction, useCSG };

package.json

 {
   "name": "@react-three/csg",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Constructive solid geometry for React",
@@ -17,3 +17,3 @@ "main": "dist/index.cjs",
     "changeset:add": "changeset add",
-    "changeset:version": "yarn changeset version && yarn install --mode update-lockfile",
+    "changeset:version": "yarn changeset version",
     "changeset:release": "yarn build && yarn build-storybook && yarn changeset publish"
@@ -20,0 +20,0 @@ },

README.md

@@ -110,2 +110,23 @@ <p align="center">
 
+#### Using the context API
+
+The `useCSG` hook exposes the `update` function, which can be used to update the geometry. This is useful when you want to update the geometry from a child component.
+
+```jsx
+const Shape = () => (
+  <mesh>
+    <Geometry>
+      <Base geometry={bunnyGeometry} />
+      <Cutter />
+
+function Cutter() {
+  const { update } = useCSG()
+  return (
+    <PivotControls onDrag={update}>
+      <Subtraction>
+        <boxGeometry />
+      </Subtraction>
+    </PivotControls>
+```
+
 #### Using multi-material groups
@@ -112,0 +133,0 @@

No alert changes

Improved metrics

Lines of code

1013

increased by1.3%

Number of lines in readme file

198

increased by11.86%

Worsened metrics

Total package byte prevSize

47500

decreased by-12.39%

Number of package files

28

decreased by-3.45%

No dependency changes