线条Line，LinLoop，LineSegments

线条Line&＃xff0c;LinLoop&＃xff0c;LineSegments

  THREE.Line、THREE.LineLoop、THREE.LineSegments三个构造函数定义的是描点划线的方式&＃xff0c;对应WebGL中的绘制模式mode&＃xff0c;初学的时候不用深究&＃xff0c;有个影响即可&＃xff0c; 对于LineSegments方式而言&＃xff0c;两个点确定一条直线&＃xff0c;四个点确定2条直线&＃xff1b;对于Line方式&＃xff0c;四个点可以连续绘制出3条直线&＃xff1b;对于LineLoop方式&＃xff0c;与line模式基本一样&＃xff0c;最后会产生闭合&＃xff0c; 四个点可以连续绘制出4条直线。

  代码如下&＃xff1a;

var geometry &＃61; new THREE.Geometry(); //Geometry 利用 Vector3 或 Color 存储了几何体的相关 attributes&＃xff08;如顶点位置&＃xff0c;面信息&＃xff0c;颜色等&＃xff09;var material &＃61; new THREE.LineBasicMaterial({vertexColors: true}); //用于绘制线段的基础材质// 我们这里使用了顶点颜色vertexColors: THREE.VertexColors&＃xff0c;就是线条的颜色会根据顶点来计算var color1 &＃61; new THREE.Color(0x444444),color2 &＃61; new THREE.Color(0xFF0000),color3 &＃61; new THREE.Color(0x00FF55);color4 &＃61; new THREE.Color(0x002211);// 线的材质可以由2点的颜色决定var p1 &＃61; new THREE.Vector3(-100, 0, 100);var p2 &＃61; new THREE.Vector3(100, 0, -100);var p3 &＃61; new THREE.Vector3(100, -100, 0);var p4 &＃61; new THREE.Vector3(-100, 100, 0);geometry.vertices.push(p1);geometry.vertices.push(p2);geometry.vertices.push(p3);geometry.vertices.push(p4);geometry.colors.push(color1, color2, color3, color4);line &＃61; new THREE.LineLoop(geometry, material);