71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import * as React from 'react';
|
|
import { Shape } from 'three';
|
|
import { toCreasedNormals } from 'three-stdlib';
|
|
|
|
const eps = 0.00001;
|
|
function createShape(width, height, radius0) {
|
|
const shape = new Shape();
|
|
const radius = radius0 - eps;
|
|
shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
|
|
shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
|
|
shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
|
|
shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
|
|
return shape;
|
|
}
|
|
const RoundedBox = /* @__PURE__ */React.forwardRef(function RoundedBox({
|
|
args: [width = 1, height = 1, depth = 1] = [],
|
|
radius = 0.05,
|
|
steps = 1,
|
|
smoothness = 4,
|
|
bevelSegments = 4,
|
|
creaseAngle = 0.4,
|
|
children,
|
|
...rest
|
|
}, ref) {
|
|
return /*#__PURE__*/React.createElement("mesh", _extends({
|
|
ref: ref
|
|
}, rest), /*#__PURE__*/React.createElement(RoundedBoxGeometry, {
|
|
args: [width, height, depth],
|
|
radius: radius,
|
|
steps: steps,
|
|
smoothness: smoothness,
|
|
bevelSegments: bevelSegments,
|
|
creaseAngle: creaseAngle
|
|
}), children);
|
|
});
|
|
const RoundedBoxGeometry = /* @__PURE__ */React.forwardRef(function RoundedBoxGeometry({
|
|
args: [width = 1, height = 1, depth = 1] = [],
|
|
radius = 0.05,
|
|
steps = 1,
|
|
smoothness = 4,
|
|
bevelSegments = 4,
|
|
creaseAngle = 0.4,
|
|
...rest
|
|
}, ref) {
|
|
const shape = React.useMemo(() => createShape(width, height, radius), [width, height, radius]);
|
|
const params = React.useMemo(() => ({
|
|
depth: depth - radius * 2,
|
|
bevelEnabled: true,
|
|
bevelSegments: bevelSegments * 2,
|
|
steps,
|
|
bevelSize: radius - eps,
|
|
bevelThickness: radius,
|
|
curveSegments: smoothness
|
|
}), [depth, radius, smoothness, bevelSegments, steps]);
|
|
const geomRef = React.useRef(null);
|
|
React.useLayoutEffect(() => {
|
|
if (geomRef.current) {
|
|
geomRef.current.center();
|
|
toCreasedNormals(geomRef.current, creaseAngle);
|
|
}
|
|
}, [shape, params, creaseAngle]);
|
|
React.useImperativeHandle(ref, () => geomRef.current);
|
|
return /*#__PURE__*/React.createElement("extrudeGeometry", _extends({
|
|
ref: geomRef,
|
|
args: [shape, params]
|
|
}, rest));
|
|
});
|
|
|
|
export { RoundedBox, RoundedBoxGeometry };
|