首页 / three.js / 使用示例
描边高亮
十八栋楼围成一圈,鼠标指到哪栋,哪栋就多一圈琥珀色轮廓。 被前面物体挡住的那段描边会变暗,仍能看出完整的轮廓形状。
源码与运行效果
选中列表就是全部开关
outlinePass.selectedObjects 是一个数组,放进去的对象才会被描边。
换选时直接替换数组内容,不需要销毁重建 pass。
多选时就往数组里多加几个对象,描边会逐个绘制。
示例在 pointermove 里做射线拾取,命中则更新数组。
每一帧都在合成器里跑一次边缘检测,与选中数量无关,
所以高亮十八栋和只高亮一栋,开销几乎一样。
| 参数 | 取值 | 作用 |
|---|---|---|
edgeStrength | 3.0 | 描边亮度,可调到 8 |
edgeGlow | 0.35 | 外发光比例 |
edgeThickness | 1.6 | 描边宽度 |
visibleEdgeColor | #ffd166 | 可见段的颜色 |
遮挡段为什么会暗
hiddenEdgeColor 决定被遮挡部分的描边颜色。默认偏暗,
这样轮廓仍然可读,但不会盖住前面的物体造成穿模感。
设成与可见段同色,被挡住的建筑会像透视一样浮在最上层。
描边对透明物体无效。半透明材质写入的深度信息不完整, 描边检测会把整片透明区域当成边缘,得到脏乱的轮廓。 透明要素通常改用轮廓线几何体单独描边,而不是走屏幕空间。