【three.js学习笔记】线

线

一条连续的线

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3( -10, 0, 0 ),
    new THREE.Vector3( 0, 10, 0 ),
    new THREE.Vector3( 10, 0, 0 )
);

var line = new THREE.Line( geometry, material,THREE.LineSegments);
scene.add( line );

线条Line api

构造器

Line( geometry, material, mode );

• geometry:表示线段的顶点
• material:线条材料。默认为 LineBasicMaterial
• mode:线条绘制方式(THREE.LineSegments);

属性

• geometry:表示线段的顶点
• material:线条材料

方法

.raycast ( raycaster, intersects )

得到光线投射和该线条之间的交点。 Raycaster.intersectObject 将调用该方法。

.clone ()

返回该线条对象及其后代的克隆。

三维向量(Vector3)api

var a = new THREE.Vector3( 1, 0, 0 );
var b = new THREE.Vector3( 0, 1, 0 );

var c = new THREE.Vector3();
c.crossVectors( a, b );

构造器（Constructor）

Vector3( x, y, z )

• x: Float 向量的x值。
• y: Float 向量的y值。
• z: Float 向量的z值。

使用

创建几何体并将三维向量放入几何体

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3( -10, 0, 0 ),
    new THREE.Vector3( 0, 10, 0 ),
    new THREE.Vector3( 10, 0, 0 )
);

线材质

简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在程序中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

THREE.LineBasicMaterial

THREE.LineBasicMaterial = function ( parameters )

• Color：线条的颜色，用16进制来表示，默认的颜色是白色。
• Linewidth：线条的宽度，默认时候1个单位宽度。
• Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
• Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
• VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。

线条绘制

THREE.LinePieces(GL_LINES)

var line = new THREE.Line( geometry, material, THREE.LinePieces );

THREE.LineSegments(GL_LINE_STRIP)

var line = new THREE.Line( geometry, material, THREE.LineSegments );

实例