three.js 中的箭头显示对象 ArrowHelper 比较常用,去看源码 src/helpers/ArrowHelper.js,只看构造函数,粗略的喵一眼;会比较纠结,觉得不对。组成箭头的头部圆锥位于底部,圆锥顶部杵着一根类似棍子的线段;
这?… , 这样能组成箭头多别扭,箭头是不是该旋转一下?其实答案在成员函数 setLength 中:
setLength( length, headLength = length * 0.2, headWidth = headLength * 0.2 ) {
this.line.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458
this.line.updateMatrix();
this.cone.scale.set( headWidth, headLength, headWidth );
this.cone.position.y = length;
this.cone.updateMatrix();
}
最关键的 this.cone.position.y = length; 这样箭头锥体的底部就和棍子相接了,不用旋转,也不别扭了;该箭头显示类ArrowHelper 的注册点(本地坐标系原点)位于棍子的底部