three.js绘制宽度大于1的线,并动态新增顶点

three.js提供的两种线,LineLine2 有所区别。前者只支持宽度为1的线,后者则支持任意线宽。

按照官方示例,可以很容易绘制出已确定顶点位置的线要素(静态的线)

然而很多时候我们都需要动态的往线要素里添加新的顶点,网上查了很多资料,大体思路都是构造新的几何体(LineGeometry)替换已有线对象的几何体,然后重新设置点位(line.geometry = new LineGeometry(); line.geometry.setPositions(positions););或是移除原有的线,然后构造新的线对象。这两种方式原理相似,如果在频繁加入顶点的情况下,会造成明显的性能问题。

我认为更好的做法是对已有线几何体的顶点位置做更新。由于改变顶点缓冲区的大小会耗费性能,基本等同于创建新几何体的开销。因此,初始给一个比较大的顶点容量,这样不用担心顶点不够用要去重新构建几何体对象了。

javascript 复制代码
const maxPoints = 100; // 最多支持的顶点个数
const geometry = new LineGeometry();
geometry.setPositions(new Float32Array(maxPoints * 3));
const material = new LineMaterial({ 
  color: 0xffffff,
  linewidth: 3,
});
const line = new Line2(geometry, material);
scene.add(line);

创建线要素时分配较大的缓冲区用于存放顶点位置

在有新顶点加入时更新缓冲区内的顶点数据就行。Line2 继承了 LineSegments2 ,由一系列线段组成,同时采用实例化方式绘制,因此使用方式和 Line 有些区别。更新 instanceStart 属性改变某一段的起点位置,更新 instanceEnd 属性改变某一段的终点位置,用 instanceCount 属性代替 setDrawRange 方法限制实际绘制的顶点个数(预留的缓冲区较大,实际只用到了一部分)。示例代码如下。

javascript 复制代码
const instanceIndex = pointsCount < 3 ? 0 : (pointsCount - 3) + 1; // 折线的第几段,从0开始计数
if (pointsCount == 1) {
	line.geometry.attributes.instanceStart.setXYZ(instanceIndex, newPosition[0], newPosition[1], newPosition[2]);
} else {
	line.geometry.attributes.instanceEnd.setXYZ(instanceIndex, newPosition[0], newPosition[1], newPosition[2]);
	line.geometry.attributes.instanceStart.setXYZ(instanceIndex + 1, newPosition[0], newPosition[1], newPosition[2]);
	line.geometry.attributes.instanceStart.needsUpdate = true;
	line.geometry.attributes.instanceEnd.needsUpdate = true;
	line.geometry.instanceCount = pointsCount - 1;
}

添加新的顶点位置到线要素

|---|
| |

动态绘制宽度大于1的线

相关推荐
向宇it1 小时前
【unity组件介绍】URP Decal Projector贴花投影器,将特定材质(贴花)投影到场景中的其他对象上。
游戏·3d·unity·c#·游戏引擎·材质
逐云者1238 小时前
3D Gaussian Splatting (3DGS) 从入门到精通:安装、训练与常见问题全解析
3d·问题·三维重建·高斯泼溅·编译运行
工业3D_大熊8 小时前
HOOPS SDK赋能PLM:打造全生命周期3D数据管理与协作能力
3d·3d web轻量化·3d模型格式转换·3d渲染·3d模型可视化·工业3d·3d模型渲染
小新11016 小时前
3d max 的快捷键
3d
zhongqu_3dnest17 小时前
VR全景园区:开启智慧园区新时代
3d·三维建模·3d楼盘
zhongqu_3dnest19 小时前
什么是3D楼盘?
3d·三维建模·房地产·房产营销·3d楼盘·线上看房
top_designer1 天前
3D材质总监的“光影魔法”:用Substance Sampler AI,“擦除”照片中的光影
人工智能·3d·新媒体运营·aigc·游戏程序·材质·材质设计师
中科米堆1 天前
中科米堆CASAIM手持式三维扫描仪金属铸件三维扫描测量方案
人工智能·3d·自动化·视觉检测
山海鲸可视化1 天前
模型材质一键替换~轻松还原多种三维场景
webgl·数字孪生·材质·3d模型·三维渲染
zhongqu_3dnest1 天前
众趣SDK重磅升级:空间物联IOT新视界,赋能实景三维场景深度应用
人工智能·物联网·计算机视觉·3d·点云处理·点云扫描