Three.js線寬.lineWidth無效

Three.js線寬.lineWidth無效

在編寫Three.js程序的時候，你設置線模型Line對應線材質LineBasicMaterial的線寬屬性.lineWidth，多是無效果。

我的技術博客

.lineWidth屬性

關於線材質LineBasicMaterial和虛線材質LineDashedMaterial的線寬屬性.lineWidth的介紹能夠查看Three.js文檔。

.lineWidth屬性的主要功能是控制線條粗細,默認值是1。

通常在windows操做系統平臺上使用Three.js引擎的WebGL渲染器WebGLRenderer進行渲染的時候，.lineWidth屬性值設置爲多少都是無效的，也就是說不管如何設置，線模型線寬都顯示爲1。

// 基礎線材質
var mat = new THREE.LineBasicMaterial({
  color: 0xee1111,
  // 設置無效，線寬顯示爲1
  linewidth: 6,
});
//線條模型對象
var line = new THREE.Line(geo, mat);

解決方案

總體思路就是使用帶狀網格模型Mesh表示線條模型Line。

參考Three.js官方庫案例three.js-master/examples/webgl_lines_fat.html

參考github MeshLine：https://github.com/quzheqing/...

webgl_lines_fat.html案例

引入相關文件，注意LineGeometry.js依賴LineSegmentsGeometry.js，Line2.js依賴LineSegments2.js。

<script src='/js/lines/LineSegmentsGeometry.js'></script>
<script src='/js/lines/LineGeometry.js'></script>
<script src='/js/lines/LineMaterial.js'></script>
<script src='/js/lines/LineSegments2.js'></script>
<script src='/js/lines/Line2.js'></script>

寫一個案例，引入頂點座標，繪製一個字母M效果，若是用曲線返回足夠多的頂點也能夠繪製一個光滑的曲線

閱讀/examples/js/lines目錄下的文件，能夠看出來Line2的基類是LineSegments2，LineSegments2的基類是Mesh，Line2和LineSegments2本質上都是一個網格模型，你能夠把代碼中THREE.Line2替換爲THREE.Mesh，顯示效果是同樣的。

var geometry = new THREE.LineGeometry();
// 頂點座標構成的數組pointArr
var pointArr = [-100,0,0,
                -100,100,0,
                0,0,0,
                100,100,0,
                100,0,0,]
// 幾何體傳入頂點座標
geometry.setPositions( pointArr);
// 自定義的材質
var material  = new THREE.LineMaterial( {
  color: 0xdd2222,
  // 線寬度
  linewidth: 5,
} );
// 把渲染窗口尺寸分辨率傳值給材質LineMaterial的resolution屬性
// resolution屬性值會在着色器代碼中參與計算
material.resolution.set(window.innerWidth,window.innerHeight);
var line = new THREE.Line2(geometry, material);

每一個頂點對應一個顏色，顏色會進行插值計算。

var colorArr = [
1,0,0,
0,1,0,
0,0,1,
0,1,0,
1,0,0,
]
// 設定每一個頂點對應的顏色值
geometry.setColors( colorArr );

var material  = new THREE.LineMaterial( {
  // color: 0xfd1232,
  linewidth: 5,
  // 註釋color設置，啓用頂點顏色渲染
  vertexColors: THREE.VertexColors,
} );