Three.js線寬.lineWidth無效

Three.js線寬.lineWidth無效

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

我的技術博客git

.lineWidth屬性

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

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

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

// 基礎線材質
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.htmlwebgl

參考github MeshLine:https://github.com/quzheqing/...操作系統

webgl_lines_fat.html案例

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

<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效果,若是用曲線返回足夠多的頂點也能夠繪製一個光滑的曲線htm

閱讀/examples/js/lines目錄下的文件,能夠看出來Line2的基類是LineSegments2LineSegments2的基類是MeshLine2LineSegments2本質上都是一個網格模型,你能夠把代碼中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,
} );
相關文章
相關標籤/搜索