v2-ui #91
|
@ -160,29 +160,26 @@ export function ArrowOnQuadraticBezier({
|
|||
const arrowRadius = 0.01 * scale;
|
||||
const arrowHeadRadius = arrowRadius * 2.5;
|
||||
|
||||
const curveLength = useMemo(() => fullCurve.getLength(), [fullCurve]);
|
||||
const arrowHeadTOffset = useMemo(() => Math.min(arrowHeadLength / curveLength, 0.5), [arrowHeadLength, curveLength]);
|
||||
|
||||
const endT = 1 - arrowHeadTOffset;
|
||||
|
||||
const subCurve = useMemo(() => {
|
||||
const t1 = Math.max(0, endT - segmentSize / 2);
|
||||
const t2 = Math.min(1, endT + segmentSize / 2);
|
||||
const centerT = 0.5;
|
||||
const t1 = Math.max(0, centerT - segmentSize / 2);
|
||||
const t2 = Math.min(1, centerT + segmentSize / 2);
|
||||
|
||||
const divisions = 10;
|
||||
const subPoints = Array.from({ length: divisions + 1 }, (_, i) => {
|
||||
const t = THREE.MathUtils.lerp(t1, t2, i / divisions);
|
||||
return fullCurve.getPoint(t);
|
||||
});
|
||||
return new THREE.CatmullRomCurve3(subPoints);
|
||||
}, [fullCurve, endT, segmentSize]);
|
||||
}, [fullCurve, segmentSize]);
|
||||
|
||||
const tubeGeometry = useMemo(
|
||||
() => new THREE.TubeGeometry(subCurve, 20, arrowRadius, 8, false),
|
||||
[subCurve, arrowRadius]
|
||||
);
|
||||
|
||||
const arrowPosition = useMemo(() => fullCurve.getPoint(1), [fullCurve]);
|
||||
const arrowTangent = useMemo(() => fullCurve.getTangent(1).normalize(), [fullCurve]);
|
||||
const arrowPosition = useMemo(() => subCurve.getPoint(1), [subCurve]);
|
||||
const arrowTangent = useMemo(() => subCurve.getTangent(1).normalize(), [subCurve]);
|
||||
|
||||
const arrowRotation = useMemo(() => {
|
||||
return new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), arrowTangent);
|
||||
|
|
Loading…
Reference in New Issue