使用ThreeJs搭建BIM模型浏览器，第八步-边缘线

2000年的六年级三好学生

已于 2025-01-23 15:12:26 修改

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

于 2019-10-09 11:15:44 首次发布

本文链接：https://blog.csdn.net/ztz87/article/details/102456945

BIM 同时被 3 个专栏收录

30 篇文章

订阅专栏

Revit

24 篇文章

订阅专栏

webgl

17 篇文章

订阅专栏

本文介绍在 Three.js 中如何为模型边缘添加线条，通过调整角度阈值实现更佳视觉效果，避免三角面边缘线带来的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个辅助线条，一般称为辅助线，类似草图里的草稿线条。下面分别是有线条和没有线条的对比。

在Threejs对面的边缘添加线条，其实很简单。可以从官方示例中找到。

var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var edges = new THREE.EdgesGeometry( geometry ,89);//大于度才添加线条
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

three.js docs

注意：如果以三角面的方式去添加边缘线，往往会出现很多问题，需要依赖正确的法向量，只针对夹角大于等于90度的面添加边缘线效果会好一些，否则线条过多，对性能负担重，效果也很乱。

相关资源：上gitee搜索qmodel