技术笔记：在网页里做一个玻璃魔方
这个主页的首屏放了一个可以拖拽旋转的玻璃魔方。看起来是个小玩具，做起来却踩了不少坑：透明材质、拖拽手感、性能降级，每一个都值得单独记一笔。
为什么用物理材质
要做出"玻璃"质感，关键是材质参数：透明度、粗糙度、折射。Three.js 的 MeshPhysicalMaterial 自带这些能力，把透明度打开、粗糙度调低，光一打上去就有通透感。
六个面复用了同一张 logo 贴图，加载成本几乎为零，视觉上也比六个纯色面更有辨识度。
拖拽与自动旋转
用户拖拽时暂停自动旋转，松手后平滑恢复，这是"顺手"的关键。实现上并不复杂：监听 pointerdown / pointermove / pointerup，把鼠标位移换算成旋转增量；松手后让角速度慢慢衰减，再回到自动旋转。
手感好不好，往往就取决于这两个细节：拖拽时别抢用户的方向，松手后别突然跳变。
降级不是可选项
低端设备、关闭 WebGL 的环境，都不能白屏。我做了一套 CSS 3D 降级：检测到 WebGL 不可用时，用 transform 搭一个同样旋转的魔方；系统开启"减少动态效果"时，干脆停掉所有动画。
功能可以简化，体验不能崩。这句话适用于所有动效。
最值的坑
透明材质在 WebGL 里最容易出问题的是渲染顺序和半透明叠加。遇到"某个角度看穿帮"的情况，先别怀疑数学，先检查 depthWrite 和透明排序。
这次踩得最值的坑：透明物体的 bug，多半不在几何，在渲染管线。