three.js第五十用 解剖transformcontrol 一

threejs交流群511163089

插句题外话,three121版本已经有webgpu的sandbox了,webgpu指日可待。

这个control代码相当长,可能要点时间解剖。

three.js第五十用 解剖transformcontrol 一

这个control进来就new了个这个

我们先看看这个是啥

three.js第五十用 解剖transformcontrol 一

定义了两种材质

three.js第五十用 解剖transformcontrol 一

然后改改颜色透明度作为每一根axis

three.js第五十用 解剖transformcontrol 一

然后是箭头几何体和缩放用的几何体

还有

three.js第五十用 解剖transformcontrol 一

three.js第五十用 解剖transformcontrol 一

这个应该是一根线,当你平移操作的时候你可以看见

three.js第五十用 解剖transformcontrol 一

three.js第五十用 解剖transformcontrol 一定义了很多很多层级结构,显示不同的axis样式,具体怎么映射后面看

three.js第五十用 解剖transformcontrol 一

顺着层级往下看gizmo带的数据,就是Axis的object以及变换。

three.js第五十用 解剖transformcontrol 一

然后构造出了gizmo本身,picker,helper,picker是用于处理交互的,所以是不需要可见,helper就是辅助你看清你操作的,记得translate的时候可以看见的那个线条么?

到这里先