.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.html
webgl
參考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
的基類是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, } );