Three.js - 如何修改ArrowHelper的宽度

时间:2016-03-30 01:20:44

标签: javascript css three.js

我尝试在以下jsfiddle链接上修改粉红色线条的宽度:

animation of object

如您所见,我通过以下方式定义局部基础向量:

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

我不想更改箭头的宽度,而是使用ArrowHelper创建的线条部分。经过一番研究,我没有找到实现这个目标的方法。

例如,我尝试过:

arrowHelperTheta.line.linewidth = 5;

但没有成功。

我在THREE.LineBasicMaterial对象中看到,我们可以使用linewidth指定宽度,但是ArrowHelper对象是什么?

有人可以提出改变这个宽度的建议吗?

感谢您的帮助

1 个答案:

答案 0 :(得分:3)

您可以像这样更改THREE.ArrowHelper的行宽:

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

arrowHelper.line.material.linewidth = width;

线宽设置可能无法在某些Windows平台上运行。

three.js r.75