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的线

相关推荐
GISer_Jing17 小时前
[3D GIS&Mesh]三角网格模型中的孔洞修补算法
算法·3d
cnbestec17 小时前
MinVerse 3D触觉鼠标的技术原理与创新解析
3d·计算机外设·xr·minverse·minverse 3d触觉鼠标·三维交互·触觉反馈
moonsims2 天前
无人机桥梁3D建模、巡检、检测的航线规划
3d·无人机
西哥写代码2 天前
基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机,复位视图
3d·vue3·vr·cornerstonejs
西哥写代码2 天前
基于cornerstone3D的dicom影像浏览器 第二十五章 自定义VR调窗工具
javascript·3d·vue3·vr·cornerstonejs
JayW就是我3 天前
Unity开发之Webgl自动更新程序包
webgl
SOLIDWORKS硕迪制信3 天前
3D PDF如何制作?SOLIDWORKS MBD模板定制技巧
3d·3d pdf·mbd·solidworks mbd
工业3D_大熊3 天前
从大模型加载到交互:3D Web轻量化引擎HOOPS Communicator如何打造流畅3D体验?
服务器·3d·3d可视化·3d数据格式转换·3d模型可视化·大模型可视化·3d图形渲染引擎
vivo互联网技术3 天前
纯前端实现图片伪3D视差效果
webgl·前端开发·pixi.js