经纬志
首页 / three.js / 使用示例

描边高亮

十八栋楼围成一圈,鼠标指到哪栋,哪栋就多一圈琥珀色轮廓。 被前面物体挡住的那段描边会变暗,仍能看出完整的轮廓形状。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

选中列表就是全部开关

outlinePass.selectedObjects 是一个数组,放进去的对象才会被描边。 换选时直接替换数组内容,不需要销毁重建 pass。 多选时就往数组里多加几个对象,描边会逐个绘制。

示例在 pointermove 里做射线拾取,命中则更新数组。 每一帧都在合成器里跑一次边缘检测,与选中数量无关, 所以高亮十八栋和只高亮一栋,开销几乎一样。

参数取值作用
edgeStrength3.0描边亮度,可调到 8
edgeGlow0.35外发光比例
edgeThickness1.6描边宽度
visibleEdgeColor#ffd166可见段的颜色

遮挡段为什么会暗

hiddenEdgeColor 决定被遮挡部分的描边颜色。默认偏暗, 这样轮廓仍然可读,但不会盖住前面的物体造成穿模感。 设成与可见段同色,被挡住的建筑会像透视一样浮在最上层。

描边对透明物体无效。半透明材质写入的深度信息不完整, 描边检测会把整片透明区域当成边缘,得到脏乱的轮廓。 透明要素通常改用轮廓线几何体单独描边,而不是走屏幕空间。