@react-three/drei 9.25.3 → 9.26.2

package/core/pivotControls/PlaneSlider.js

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { Line } from '../Line.js';
+import { context } from './context.js';
+
+const ray = new THREE.Ray();
+const intersection = new THREE.Vector3();
+const offsetMatrix = new THREE.Matrix4();
+const PlaneSlider = ({
+  dir1,
+  dir2,
+  axis
+}) => {
+  const {
+    depthTest,
+    scale,
+    lineWidth,
+    fixed,
+    axisColors,
+    hoveredColor,
+    opacity,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    userData
+  } = React.useContext(context); // @ts-expect-error new in @react-three/fiber@7.0.5
+
+  const camControls = useThree(state => state.controls);
+  const objRef = React.useRef(null);
+  const clickInfo = React.useRef(null);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const onPointerDown = React.useCallback(e => {
+    e.stopPropagation();
+    const clickPoint = e.point.clone();
+    const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
+    const normal = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 2).normalize();
+    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, origin);
+    clickInfo.current = {
+      clickPoint,
+      plane
+    };
+    onDragStart();
+    camControls && (camControls.enabled = false); // @ts-ignore
+
+    e.target.setPointerCapture(e.pointerId);
+  }, [camControls, onDragStart]);
+  const onPointerMove = React.useCallback(e => {
+    e.stopPropagation();
+    if (!isHovered) setIsHovered(true);
+
+    if (clickInfo.current) {
+      const {
+        clickPoint,
+        plane
+      } = clickInfo.current;
+      ray.copy(e.ray);
+      ray.intersectPlane(plane, intersection);
+      ray.direction.negate();
+      ray.intersectPlane(plane, intersection);
+      intersection.sub(clickPoint);
+      offsetMatrix.makeTranslation(intersection.x, intersection.y, intersection.z);
+      onDrag(offsetMatrix);
+    }
+  }, [onDrag, isHovered]);
+  const onPointerUp = React.useCallback(e => {
+    e.stopPropagation();
+    clickInfo.current = null;
+    onDragEnd();
+    camControls && (camControls.enabled = true); // @ts-ignore
+
+    e.target.releasePointerCapture(e.pointerId);
+  }, [camControls, onDragEnd]);
+  const onPointerOut = React.useCallback(e => {
+    e.stopPropagation();
+    setIsHovered(false);
+  }, []);
+  const matrixL = React.useMemo(() => {
+    const dir1N = dir1.clone().normalize();
+    const dir2N = dir2.clone().normalize();
+    return new THREE.Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
+  }, [dir1, dir2]);
+  const pos1 = fixed ? 1 / 7 : scale / 7;
+  const length = fixed ? 0.225 : scale * 0.225;
+  const color = isHovered ? hoveredColor : axisColors[axis];
+  const points = React.useMemo(() => [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, length, 0), new THREE.Vector3(length, length, 0), new THREE.Vector3(length, 0, 0), new THREE.Vector3(0, 0, 0)], [length]);
+  return /*#__PURE__*/React.createElement("group", {
+    ref: objRef,
+    matrix: matrixL,
+    matrixAutoUpdate: false
+  }, /*#__PURE__*/React.createElement("group", {
+    position: [pos1 * 1.7, pos1 * 1.7, 0]
+  }, /*#__PURE__*/React.createElement("mesh", {
+    visible: true,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onPointerOut: onPointerOut,
+    scale: length,
+    userData: userData
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    depthTest: depthTest,
+    color: color,
+    polygonOffset: true,
+    polygonOffsetFactor: -10,
+    side: THREE.DoubleSide
+  })), /*#__PURE__*/React.createElement(Line, {
+    position: [-length / 2, -length / 2, 0],
+    transparent: true,
+    depthTest: depthTest,
+    points: points,
+    lineWidth: lineWidth,
+    color: color,
+    opacity: opacity,
+    polygonOffset: true,
+    polygonOffsetFactor: -10,
+    userData: userData
+  })));
+};
+
+export { PlaneSlider };

package/core/pivotControls/context.cjs.js

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")).createContext(null);exports.context=t;

package/core/pivotControls/context.d.ts

@@ -0,0 +1,19 @@
+import * as THREE from 'three';
+import * as React from 'react';
+export declare type PivotContext = {
+    onDragStart: () => void;
+    onDrag: (mdW: THREE.Matrix4) => void;
+    onDragEnd: () => void;
+    axisColors: [string | number, string | number, string | number];
+    hoveredColor: string | number;
+    opacity: number;
+    scale: number;
+    lineWidth: number;
+    fixed: boolean;
+    depthTest: boolean;
+    userData?: {
+        [key: string]: any;
+    };
+    annotationsClass?: string;
+};
+export declare const context: React.Context<PivotContext>;

package/core/pivotControls/context.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const context = /*#__PURE__*/React.createContext(null);
+
+export { context };

package/core/pivotControls/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),i=require("meshline"),o=require("./AxisArrow.cjs.js"),n=require("./PlaneSlider.cjs.js"),a=require("./AxisRotator.cjs.js"),c=require("./context.cjs.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../Line.cjs.js"),require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("../../web/Html.cjs.js"),require("react-dom/client");var s=l(e),u=l(r);const d=new s.Vector3,x=new s.Vector3,p=new s.Vector3,m=(e,r,t,i=1)=>{const o=d.set(e.x/t.width*2-1,-e.y/t.height*2+1,i);return o.unproject(r),o},y=(e,r,t,i)=>{const o=((e,r,t)=>{const i=t.width/2,o=t.height/2;r.updateMatrixWorld(!1);const n=e.project(r);return n.x=n.x*i+i,n.y=-n.y*o+o,n})(p.copy(e),t,i);let n=0;for(let a=0;a<2;++a){const c=x.copy(o).setComponent(a,o.getComponent(a)+r),l=m(c,t,i,c.z);n=Math.max(n,e.distanceTo(l))}return n},f=new s.Matrix4,w=new s.Matrix4,h=new s.Matrix4,g=new s.Matrix4,v=new s.Matrix4,M=new s.Matrix4,j=new s.Matrix4,E=new s.Matrix4,b=new s.Box3,A=new s.Box3,q=new s.Vector3,V=new s.Vector3,P=new s.Vector3,S=new s.Vector3,D=new s.Vector3(1,0,0),R=new s.Vector3(0,1,0),W=new s.Vector3(0,0,1),C=u.forwardRef((({matrix:e,onDragStart:r,onDrag:l,onDragEnd:d,autoTransform:x=!0,anchor:p,activeAxes:m=[!0,!0,!0],offset:C=[0,0,0],rotation:O=[0,0,0],scale:B=1,lineWidth:L=4,fixed:z=!1,depthTest:T=!0,axisColors:_=["#ff2060","#20df80","#2080ff"],hoveredColor:k="#ffff40",opacity:F=1,visible:H=!0,userData:I,children:U},G)=>{t.extend({MeshLine:i.MeshLine,MeshLineMaterial:i.MeshLineMaterial});const J=u.useRef(null),K=u.useRef(null),N=u.useRef(null),Q=u.useRef(null);u.useLayoutEffect((()=>{p&&(Q.current.updateWorldMatrix(!0,!0),g.copy(Q.current.matrixWorld).invert(),b.makeEmpty(),Q.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),M.copy(e.matrixWorld).premultiply(g),A.copy(e.geometry.boundingBox),A.applyMatrix4(M),b.union(A))})),q.copy(b.max).add(b.min).multiplyScalar(.5),V.copy(b.max).sub(b.min).multiplyScalar(.5),P.copy(V).multiply(new s.Vector3(...p)).add(q),S.set(...C).add(P),N.current.position.copy(S))}));const X=u.useMemo((()=>({onDragStart:()=>{f.copy(K.current.matrix),w.copy(K.current.matrixWorld),r&&r()},onDrag:e=>{h.copy(J.current.matrixWorld),g.copy(h).invert(),v.copy(w).premultiply(e),M.copy(v).premultiply(g),j.copy(f).invert(),E.copy(M).multiply(j),x&&K.current.matrix.copy(M),l&&l(M,E,v,e)},onDragEnd:()=>d&&d(),axisColors:_,hoveredColor:k,opacity:F,scale:B,lineWidth:L,fixed:z,depthTest:T,userData:I})),[r,l,d,T,B,L,z,..._,k,F,I]),Y=new s.Vector3;return t.useFrame((e=>{if(z){const o=y(N.current.getWorldPosition(Y),B,e.camera,e.size);var r,t,i;if(N.current)(null==(r=N.current)?void 0:r.scale.x)===o&&(null==(t=N.current)?void 0:t.scale.y)===o&&(null==(i=N.current)?void 0:i.scale.z)===o||(N.current.scale.setScalar(o),e.invalidate())}})),u.useImperativeHandle(G,(()=>K.current),[]),u.createElement(c.context.Provider,{value:X},u.createElement("group",{ref:J},u.createElement("group",{ref:K,matrix:e,matrixAutoUpdate:!1},u.createElement("group",{visible:H,ref:N,position:C,rotation:O},m[0]&&u.createElement(o.AxisArrow,{axis:0,direction:D}),m[1]&&u.createElement(o.AxisArrow,{axis:1,direction:R}),m[2]&&u.createElement(o.AxisArrow,{axis:2,direction:W}),m[0]&&m[1]&&u.createElement(n.PlaneSlider,{axis:2,dir1:D,dir2:R}),m[0]&&m[2]&&u.createElement(n.PlaneSlider,{axis:1,dir1:W,dir2:D}),m[2]&&m[1]&&u.createElement(n.PlaneSlider,{axis:0,dir1:R,dir2:W}),m[0]&&m[1]&&u.createElement(a.AxisRotator,{axis:2,dir1:D,dir2:R}),m[0]&&m[2]&&u.createElement(a.AxisRotator,{axis:1,dir1:W,dir2:D}),m[2]&&m[1]&&u.createElement(a.AxisRotator,{axis:0,dir1:R,dir2:W})),u.createElement("group",{ref:Q},U))))}));exports.PivotControls=C,exports.calculateScaleFactor=y;

package/core/pivotControls/index.d.ts

@@ -0,0 +1,30 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { Size } from '@react-three/fiber';
+export declare const calculateScaleFactor: (point3: THREE.Vector3, radiusPx: number, camera: THREE.Camera, size: Size) => number;
+declare type PivotControlsProps = {
+    scale?: number;
+    lineWidth?: number;
+    fixed?: boolean;
+    offset?: [number, number, number];
+    rotation?: [number, number, number];
+    matrix?: THREE.Matrix4;
+    anchor?: [number, number, number];
+    autoTransform?: boolean;
+    activeAxes?: [boolean, boolean, boolean];
+    axisColors?: [string | number, string | number, string | number];
+    hoveredColor?: string | number;
+    annotationsClass?: string;
+    onDragStart?: () => void;
+    onDrag?: (l: THREE.Matrix4, deltaL: THREE.Matrix4, w: THREE.Matrix4, deltaW: THREE.Matrix4) => void;
+    onDragEnd?: () => void;
+    depthTest?: boolean;
+    opacity?: number;
+    visible?: boolean;
+    userData?: {
+        [key: string]: any;
+    };
+    children?: React.ReactNode;
+};
+export declare const PivotControls: React.ForwardRefExoticComponent<PivotControlsProps & React.RefAttributes<THREE.Group>>;
+export {};

package/core/pivotControls/index.js

@@ -0,0 +1,201 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useFrame } from '@react-three/fiber';
+import { MeshLine, MeshLineMaterial } from 'meshline';
+import { AxisArrow } from './AxisArrow.js';
+import { PlaneSlider } from './PlaneSlider.js';
+import { AxisRotator } from './AxisRotator.js';
+import { context } from './context.js';
+
+const tV0 = new THREE.Vector3();
+const tV1 = new THREE.Vector3();
+const tV2 = new THREE.Vector3();
+
+const getPoint2 = (point3, camera, size) => {
+  const widthHalf = size.width / 2;
+  const heightHalf = size.height / 2;
+  camera.updateMatrixWorld(false);
+  const vector = point3.project(camera);
+  vector.x = vector.x * widthHalf + widthHalf;
+  vector.y = -(vector.y * heightHalf) + heightHalf;
+  return vector;
+};
+
+const getPoint3 = (point2, camera, size, zValue = 1) => {
+  const vector = tV0.set(point2.x / size.width * 2 - 1, -(point2.y / size.height) * 2 + 1, zValue);
+  vector.unproject(camera);
+  return vector;
+};
+
+const calculateScaleFactor = (point3, radiusPx, camera, size) => {
+  const point2 = getPoint2(tV2.copy(point3), camera, size);
+  let scale = 0;
+
+  for (let i = 0; i < 2; ++i) {
+    const point2off = tV1.copy(point2).setComponent(i, point2.getComponent(i) + radiusPx);
+    const point3off = getPoint3(point2off, camera, size, point2off.z);
+    scale = Math.max(scale, point3.distanceTo(point3off));
+  }
+
+  return scale;
+};
+const mL0 = new THREE.Matrix4();
+const mW0 = new THREE.Matrix4();
+const mP = new THREE.Matrix4();
+const mPInv = new THREE.Matrix4();
+const mW = new THREE.Matrix4();
+const mL = new THREE.Matrix4();
+const mL0Inv = new THREE.Matrix4();
+const mdL = new THREE.Matrix4();
+const bb = new THREE.Box3();
+const bbObj = new THREE.Box3();
+const vCenter = new THREE.Vector3();
+const vSize = new THREE.Vector3();
+const vAnchorOffset = new THREE.Vector3();
+const vPosition = new THREE.Vector3();
+const xDir = new THREE.Vector3(1, 0, 0);
+const yDir = new THREE.Vector3(0, 1, 0);
+const zDir = new THREE.Vector3(0, 0, 1);
+const PivotControls = /*#__PURE__*/React.forwardRef(({
+  matrix,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  autoTransform = true,
+  anchor,
+  activeAxes = [true, true, true],
+  offset = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+  lineWidth = 4,
+  fixed = false,
+  depthTest = true,
+  axisColors = ['#ff2060', '#20df80', '#2080ff'],
+  hoveredColor = '#ffff40',
+  opacity = 1,
+  visible = true,
+  userData,
+  children
+}, fRef) => {
+  extend({
+    MeshLine,
+    MeshLineMaterial
+  });
+  const parentRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const gizmoRef = React.useRef(null);
+  const childrenRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!anchor) return;
+    childrenRef.current.updateWorldMatrix(true, true);
+    mPInv.copy(childrenRef.current.matrixWorld).invert();
+    bb.makeEmpty();
+    childrenRef.current.traverse(obj => {
+      if (!obj.geometry) return;
+      if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
+      mL.copy(obj.matrixWorld).premultiply(mPInv);
+      bbObj.copy(obj.geometry.boundingBox);
+      bbObj.applyMatrix4(mL);
+      bb.union(bbObj);
+    });
+    vCenter.copy(bb.max).add(bb.min).multiplyScalar(0.5);
+    vSize.copy(bb.max).sub(bb.min).multiplyScalar(0.5);
+    vAnchorOffset.copy(vSize).multiply(new THREE.Vector3(...anchor)).add(vCenter);
+    vPosition.set(...offset).add(vAnchorOffset);
+    gizmoRef.current.position.copy(vPosition);
+  });
+  const config = React.useMemo(() => ({
+    onDragStart: () => {
+      mL0.copy(ref.current.matrix);
+      mW0.copy(ref.current.matrixWorld);
+      onDragStart && onDragStart();
+    },
+    onDrag: mdW => {
+      mP.copy(parentRef.current.matrixWorld);
+      mPInv.copy(mP).invert(); // After applying the delta
+
+      mW.copy(mW0).premultiply(mdW);
+      mL.copy(mW).premultiply(mPInv);
+      mL0Inv.copy(mL0).invert();
+      mdL.copy(mL).multiply(mL0Inv);
+      if (autoTransform) ref.current.matrix.copy(mL);
+      onDrag && onDrag(mL, mdL, mW, mdW);
+    },
+    onDragEnd: () => onDragEnd && onDragEnd(),
+    axisColors,
+    hoveredColor,
+    opacity,
+    scale,
+    lineWidth,
+    fixed,
+    depthTest,
+    userData
+  }), [onDragStart, onDrag, onDragEnd, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData]);
+  const vec = new THREE.Vector3();
+  useFrame(state => {
+    if (fixed) {
+      const sf = calculateScaleFactor(gizmoRef.current.getWorldPosition(vec), scale, state.camera, state.size);
+
+      if (gizmoRef.current) {
+        var _gizmoRef$current, _gizmoRef$current2, _gizmoRef$current3;
+
+        if (((_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.scale.x) !== sf || ((_gizmoRef$current2 = gizmoRef.current) == null ? void 0 : _gizmoRef$current2.scale.y) !== sf || ((_gizmoRef$current3 = gizmoRef.current) == null ? void 0 : _gizmoRef$current3.scale.z) !== sf) {
+          gizmoRef.current.scale.setScalar(sf);
+          state.invalidate();
+        }
+      }
+    }
+  });
+  React.useImperativeHandle(fRef, () => ref.current, []);
+  return /*#__PURE__*/React.createElement(context.Provider, {
+    value: config
+  }, /*#__PURE__*/React.createElement("group", {
+    ref: parentRef
+  }, /*#__PURE__*/React.createElement("group", {
+    ref: ref,
+    matrix: matrix,
+    matrixAutoUpdate: false
+  }, /*#__PURE__*/React.createElement("group", {
+    visible: visible,
+    ref: gizmoRef,
+    position: offset,
+    rotation: rotation
+  }, activeAxes[0] && /*#__PURE__*/React.createElement(AxisArrow, {
+    axis: 0,
+    direction: xDir
+  }), activeAxes[1] && /*#__PURE__*/React.createElement(AxisArrow, {
+    axis: 1,
+    direction: yDir
+  }), activeAxes[2] && /*#__PURE__*/React.createElement(AxisArrow, {
+    axis: 2,
+    direction: zDir
+  }), activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
+    axis: 2,
+    dir1: xDir,
+    dir2: yDir
+  }), activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(PlaneSlider, {
+    axis: 1,
+    dir1: zDir,
+    dir2: xDir
+  }), activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
+    axis: 0,
+    dir1: yDir,
+    dir2: zDir
+  }), activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
+    axis: 2,
+    dir1: xDir,
+    dir2: yDir
+  }), activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(AxisRotator, {
+    axis: 1,
+    dir1: zDir,
+    dir2: xDir
+  }), activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
+    axis: 0,
+    dir1: yDir,
+    dir2: zDir
+  })), /*#__PURE__*/React.createElement("group", {
+    ref: childrenRef
+  }, children))));
+});
+
+export { PivotControls, calculateScaleFactor };

package/core/shapes.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),s=o(r);function a(e){const r=e+"BufferGeometry";return s.forwardRef((({args:e,children:t,...o},a)=>s.createElement("mesh",n.default({ref:a},o),s.createElement(r,{attach:"geometry",args:e}),t)))}const c=a("box"),u=a("circle"),p=a("cone"),d=a("cylinder"),l=a("sphere"),x=a("plane"),i=a("tube"),f=a("torus"),h=a("torusKnot"),b=a("tetrahedron"),y=a("ring"),g=a("polyhedron"),O=a("icosahedron"),j=a("octahedron"),m=a("dodecahedron"),v=a("extrude"),P=a("lathe"),C=a("capsule");exports.Box=c,exports.Capsule=C,exports.Circle=u,exports.Cone=p,exports.Cylinder=d,exports.Dodecahedron=m,exports.Extrude=v,exports.Icosahedron=O,exports.Lathe=P,exports.Octahedron=j,exports.Plane=x,exports.Polyhedron=g,exports.Ring=y,exports.Sphere=l,exports.Tetrahedron=b,exports.Torus=f,exports.TorusKnot=h,exports.Tube=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),s=o(r);function a(e){const r=e+"Geometry";return s.forwardRef((({args:e,children:t,...o},a)=>s.createElement("mesh",n.default({ref:a},o),s.createElement(r,{attach:"geometry",args:e}),t)))}const c=a("box"),u=a("circle"),p=a("cone"),d=a("cylinder"),l=a("sphere"),x=a("plane"),i=a("tube"),f=a("torus"),h=a("torusKnot"),b=a("tetrahedron"),y=a("ring"),g=a("polyhedron"),O=a("icosahedron"),j=a("octahedron"),m=a("dodecahedron"),v=a("extrude"),P=a("lathe"),C=a("capsule");exports.Box=c,exports.Capsule=C,exports.Circle=u,exports.Cone=p,exports.Cylinder=d,exports.Dodecahedron=m,exports.Extrude=v,exports.Icosahedron=O,exports.Lathe=P,exports.Octahedron=j,exports.Plane=x,exports.Polyhedron=g,exports.Ring=y,exports.Sphere=l,exports.Tetrahedron=b,exports.Torus=f,exports.TorusKnot=h,exports.Tube=i;

package/core/shapes.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 
 function create(type) {
-  const El = type + 'BufferGeometry';
+  const El = type + 'Geometry';
   return /*#__PURE__*/React.forwardRef(({
     args,
     children,