扩展或使 THREE.LineSegments 变粗答案

【问题标题】：Expand or make a THREE.LineSegments thicker扩展或使 THREE.LineSegments 变粗
【发布时间】：2016-12-15 12:44:16
【问题描述】：

我正在努力在 Three.JS 中可视化线条的路径，并已成功地将一堆线条添加到场景中，这些线条具有正确的顶点和我想要的材料，但线条很难看到。有没有办法将线段转换成各种管子，而不必从头开始并更改我正在使用的几何类型？

我可能没有使用正确的术语，但我基本上想将生成的THREE.LineSegments() 变成更粗的 3D 线。以下是我的代码的 sn-p：

var geo = new THREE.BufferGeometry();
geo.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2*numTravelVertices), 3));
var travelVertices = geo.attributes.position.array;
var vertIndex = 0;
this.set('travelVertices', travelVertices);

<add vertex indicies for points on the path>

geo.rotateX(-Math.PI / 2);
var mat = new THREE.LineBasicMaterial({color: parseInt(this.get('travelColor')), transparent: false});
var lineSegments = new THREE.LineSegments(geo, new THREE.MultiMaterial([mat]));

【问题讨论】：

Workaround for lack of line width on Windows when using Three.js的可能重复

标签： javascript three.js

【解决方案1】：

可以通过设置LineBasicMateriallinewidth参数来画粗线：

material.linewidth = 4; // default is 1

这目前不适用于某些 Windows 平台。所以另一种解决方案是使用第三方类THREE.MeshLine，它通过绘制一条三角形来呈现粗线。

您可以使用THREE.TubeGeometry，但性能不如MeshLine。

three.js r.82

【讨论】：

我投票决定以重复的形式结束这个问题，但这个答案非常有用。您在linewidth 支持方面的工作，“在某些 Windows 平台上除外”，让我感到惊讶。是否有任何 Windows 浏览器不能在 Angle/DirectX 上运行（即支持线宽）？我通常将 WebGL 线宽描述为“一般不支持”。