three 中的标准材质线材质类型

前言：在前两节已经了解过材质的基础类型，在这一节中详细的了解几个标准的材质类型由基础材质类型延伸而来，线条材质可以通过获取点的方式配合几何体处理各种管道的生成

LineBasicMaterial 基础线条材质 有六个属性

linewidth linecap linejoin 这几个属性在大多数WebGL实现中不生效。这是因为WebGL本身的限制，尤其是在现代GPU上，大多数硬件仅支持1像素宽的线条。Three.js保留了这个属性，可能是为了兼容性或未来的扩展性，但目前它对实际渲染没有影响。

• color 材质颜色，控制材质的颜色
• fog 材质是否受雾影晌 默认为 true 也就是影晌
• linewidth 控制线宽默认值为 1
• linecap 定义两端的样式 可选值为 butt round square 默认 round
• linejoin 定义线连接点的样式 可选值为 round bevel miter 默认 round
• map 纹理对象，一般为加载的图片 定义线色的颜色数据

    const material = new THREE.LineBasicMaterial( {
        color: 0xff0000,
        linewidth: 100,
        linecap: 'round', //ignored by WebGLRenderer
        linejoin:  'round' //ignored by WebGLRenderer
    });
    
    const curve = new THREE.EllipseCurve(
        0,  0,            // 弧中心点
        10, 5,           // X，与Y的半径
        0,  1 * Math.PI,  // X,Y画出一度数（即，一个圈占比）
        false,            // 正向画或反向画
        0                 // 转动触度
    );
    const points = curve.getPoints( 50 );
    const geometry = new THREE.BufferGeometry().setFromPoints( points );

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

    scene.add(line);

LineDashedMaterial 虚线材质 有四个属性

在使用虚线时需要注意新建虚线后要加在计算虚线，否则会使用虚线不生效line.computeLineDistances();

• dashSize 虚线的大小，是指破折号和间隙之和。默认值为 3。
• gapSize 间隙的大小，默认值为 1。
• isLineDashedMaterial 只读属性，是否为虚线材质
• scale 线条中虚线部分的占比。默认值为 1。

    const material = new THREE.LineDashedMaterial( {
        color: 0xff0000,
    });
    
    const curve = new THREE.EllipseCurve(
        0,  0,            // 弧中心点
        10, 5,           // X，与Y的半径
        0,  1 * Math.PI,  // X,Y画出一度数（即，一个圈占比）
        false,            // 正向画或反向画
        0                 // 转动触度
    );
    const points = curve.getPoints( 50 );
    const geometry = new THREE.BufferGeometry().setFromPoints( points );

    const line = new THREE.Line( geometry, material );
    // 如果不加这一行会得虚线不生效
    line.computeLineDistances();
    scene.add(line);

结语：这一节介绍了虚线与实线的使用，还是实线的某些属性为什么不起作用。在虚线中不支持纹理图这点是比较值得关注的点。