drei
OrbitControls
TransformControls
在使用transform组建移动的时候 camera 也跟着移动了，
所以坐标轴方向会改变
解决方法： 在 orbitControler上面增加 makeDefault
(表示这是默认的，其他的控制器在使用的时候，可以决定是否暂时停用这个)这样就在使用
transform组建的时候，不会同时使用 orbit 了
因为控制器也在拖动
- 嵌套在里面 TransformControls 会添加进去，transform就像是一个父容器
如何修改位置的问题
可以将 变换都加在 transform 上面 或者使用 ref 来关联
这种方式更好，同一级别更加方便管理，二者通过 ref 来关联
不需要在 transform上面添加一些 额外的属性
mode属性 translate / rotate / scale
PivotControls
尽管它是包裹其他mesh,但是不像transform一样是一个 group
怎样让他剧中在物体上 anchor = [ 0, 0, 0 ] 表示在物体的中心，值是相对于里面的物体的
它可能会被其他东西隐藏，如果想要强制渲染 使用 depthTest = false
lineWidth / axisColors = [] / scale
默认有一个透视效果，变远会变小，
如果想要 不管远近，大小都一直 可以使用 fixed
但是同时需要设置 scale 默认的太小了
html 添加一个DOM到你的 object
可以添加到 任何 object3D的物体中
参数
position = []
wrapperClass = "label"
center = true 文字的中心点
如果场景缩小的话，文字会很大 distanceFactor={8}
还可以藏起来在对应的位置，如果object在文字的前面 occlude=[ref]
Text组件 SDF font
前面的3d text 不支持多行(要实现就必须要创建多个)，会耗费CPU资源 需要font
调试 debug
StrictMode
无限循环 / 无用的引入 / hook依赖 / 不推荐的用法 将会在控制台中显示
你可能在控制台看见2次打印，对于生产环境无效 会渲染2次
leva 是单独运行的 就像是一个单独的react实例 / lil-gui
useControls 可以在任何组件中使用
{ value / min / max / step }
修改向量 value: { x: -2, y: 0 }
interval: { value: [3,5], min / max }
button clickMe: button(() => { })
select options: []
folder 如果你想要在 文件夹里面在放文件夹 就需要 folder函数来完成
color 各种格式都可以 rgb / orange / hsl() / hsla / { r:200, g:106, b:125, a:0.4 } 是对象(最好别用这种)
透明度要生效 必须开启 材质的透明属性
配置
不能在canvas 里面 加上 Leva 组建配置
性能监控 r3f-perf Perf组建放在 canvas 里面，因为是专门为它开发的
也可以使用Stat.js
