three.js ArrowHelpler学习

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 的注册点(本地坐标系原点)位于棍子的底部

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值