import * as flexy from 'flexy';
import * as THREE from 'three';

const R = 3;
const startPoint = new Vector3(R, 0, 0);
const controlPoint1 = new Vector3(R, R * 0.55, 0);
const controlPoint2 = new Vector3(R * 0.45, R, 0);
const endPoint = new Vector3(0, R, 0);

// This is a cubic bezier curve. The direction that we're "drawing" the curve, affects the final outcome.
// In this case we're drawing from x = R -> x = 0
// So the point of our geometry with the smallest x coordinate will end up on the x = R position.
// That will make the modified geometry appear as it was also rotated.
const curve = new CubicBezierCurve3(startPoint, controlPoint1, controlPoint2, endPoint);

// A vector that is perpendigular to the plane where most points of the curve lie upon.
// So, if you have a curve that's on the x-y axis, then the orientation could be 0,0,1 or 0,0,-1
// This is usefull to the modifier because it can consistently calculate the tangent lines for each point in the curve, therefore bend every point of the geometry to the correct position.
const orientation = new new THREE.Vector3(0, 0, 1);

flexy.bend({
    THREE,
    axis: 'x' // this is the main dimension that is compressed by the curve
    curve,
    orientation,
    bufferGeometry: mesh.geometry,
});