0

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>
  </>
  );
}

0 Answers0