Three.js - How to modify width of ArrowHelper

Question

I try to modify the width of pink lines on the following jsfiddle link :

animation of object

As you can see, I define local basis vector by :

// Add local vector axis of plane
var thetadir = new THREE.Vector3( 1, 0, 0 );
var phidir = new THREE.Vector3( 0, -1, 0 );
var originPlane = new THREE.Vector3( 0, 0, -radius );
var lengthPlane = 5;
var headLengthPlane = 1;
var headWidthPlane = 1;
var hex = 0xff00ff;

var arrowHelperTheta = new THREE.ArrowHelper( thetadir, originPlane, lengthPlane, hex, headLengthPlane, headWidthPlane );
var arrowHelperPhi = new THREE.ArrowHelper( phidir, originPlane, lengthPlane, hex, headLengthPlane, headWidthPlane );
camera.add( arrowHelperTheta );
camera.add( arrowHelperPhi );

I don't want to change the width of arrow but the part of line created with ArrowHelper. After some research, I didn't find a way to achieve this.

For example, I tried with :

arrowHelperTheta.line.linewidth = 5;

but without success.

I saw that for THREE.LineBasicMaterial object, we can specify the width with linewidth , but what's about ArrowHelper object ?

Someone could give some advices to change this width ?

Thanks for your help

Answer 1

You can change the line width for THREE.ArrowHelper like so:

arrowHelper = new THREE.ArrowHelper( dir, origin, length, color );

arrowHelper.line.material.linewidth = width;

The linewidth setting may not work on certain Windows platforms.

three.js r.75