<arrowHelper /> Object3DNode overwritten type not updatable

[lancemk]

Hi all,

I am facing some issue when using some of the helper Object3DNode. As shown below:

import React, { Component }  from 'react'
import * as THREE from 'three'

export default class App extends Component {
  
  MyArrow = () => {
    var from = new THREE.Vector3( 2, 2, 2 );
    var to = new THREE.Vector3( 0, 0, 0 );
    var direction = to.clone().sub(from);
    var length = direction.length();
    // var arrowHelper = new THREE.ArrowHelper(direction.normalize(), from, length, 0xff0000 ); 

    return (
      <>
        <arrowHelper position={[0,0,0]} setDirection={direction} setLength={length, 1, 1} > </arrowHelper>
      </>
    )
  }

  render() {
    return(
      <this.MyArrow />
    )
  }
}

The defined Object3DNode type in r3f, i.e. position={[0,0,0]} is updatable, which position of arrow changees on render. However, <arrowHelper />is pointing in z-direction regardless of setDirection={direction} changes. Is it some issue on r3f type overwrite? Or how should I go about changing threejs inherited parameters? Thank you !!

[drcmda]

you are confusing functions with props, see: #516

also, constructor arguments are passed as <arrowHelper args={[dir, origin, length, hex, headLength, headWidth]} see: https://threejs.org/docs/#api/en/helpers/ArrowHelper