I'm trying to create a functionality where i can stretch a bezier curve in such a way that when the pointer moves it also scales the curve to the position of the pointer,but the issue i have now is that even though the curve stretches when i drag the pointer using useDrag hook, it doesn't move exactly to the position of the pointer,there's always space between them. Here's a screen record of what i mean : https://youtu.be/J4H6ybiHOwA
the code for the curve is below:
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import { extend, useLoader } from "@react-three/fiber";
import * as THREE from 'three';
import { useDrag } from '@use-gesture/react'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
const drawCurve=()=>{
const [curCoord,setCurCoord]=useState({x:100,y:-30});
const curve = new THREE.CubicBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 15 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( curCoord.x, curCoord.y )
);
const curPoints = curve.getPoints( 50 );
const curGeometry = new THREE.BufferGeometry().setFromPoints( curPoints );
const trigVertices = [
100, -25, 0,
100, -35, 0,
108, -30, 0,
]
const indices = [
0, 1, 2,
]
const Trigeometry = new THREE.BufferGeometry()
Trigeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(trigVertices), 3))
Trigeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1))
const groupRef = useRef();
const bind = useDrag(({ offset: [x, y] }) => {
groupRef.current.position.set(x, -y, 0);
setCurCoord({x:groupRef.current.position.x,y:groupRef.current.position.y});
});
return (
<>
<mesh position={[0,0,0]}>
<line geometry={curGeometry}>
<lineBasicMaterial color="red" />
</line>
</mesh>
<mesh ref={groupRef} geometry={Trigeometry} {...bind()}>
<meshBasicMaterial color="red" />
</mesh>
</>
);
}