three.js 笔记三画线

一、 Line, LineLoop, LineSegments

参考深入理解Three.js中线条Line，LineLoop，LineSegments
看生成的图片，就知道差别了，4个点的位置如下：

geometry.vertices.push(
    new THREE.Vector3(20,20,0),
    new THREE.Vector3(20,-20,0),
    new THREE.Vector3(-20,-20,0),
    new THREE.Vector3(-20,20,0)
 )

Line

LineLoop

LineSegments

Line会从第一个点至最后一个点，依次连接起来。
LineLoop和Line的区别在于，会自动把最后一个点和第一个点连结起来。
LineSegments会把两个点变成一组连接起来。

LineSegments. LineSegments用于将两个点连接为一条线，它会将我们传递的一系列点自动分配成两个为一组，然后将分配好的两个点连接。

二、虚线

参考
three.js 04-10 之 LineDashedMaterial 材质

lines.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({
    vertexColors: true,
    color: 0xffffff,
    dashSize: 0.6,
    gapSize: 0.2,
    scale: 1.0 // 比例越大，虚线越密；反之，虚线越疏
});

scale （缩放比例）缩放 dashSize 和 gapSize。如果 scale 小于 1，dashSize 和 gapSize 就会增大；反之，就会缩小
dashSize （短划线长度）定义虚线短划线的长度
gapSize （间隔长度）定义虚线间隔的长度

参考
https://github.com/mrdoob/three.js/blob/dev/src/materials/LineDashedMaterial.js

        this.scale = 1;
        this.dashSize = 3;
        this.gapSize = 1;

三、注意geometry版本差异

参考画线（Drawing lines）

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));
var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var line = new THREE.Line(geometry, material);
scene.add(line);

但是，这段代码报错了：

Uncaught TypeError: THREE.Geometry is not a constructor

参考Three.js 新旧版本创建几何对象差异，发现是版本升级导致的，新代码是这样的：

let start = new THREE.Vector3(7, 1.8, -2);
let end = new THREE.Vector3(1.6, 1.8, -2);

let lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
let pointsArray = [start, end];
let lineGeometry = new THREE.BufferGeometry().setFromPoints(pointsArray);
let line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

在 three.js画线，报错THREE.Geometry is not a constructor中，有评论说125版本就不再支持这个api了，类似有这样的写法：

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [-10, 0, 0, 0, 10, 0, 10, 0, 0] );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

四、默认threejs的线宽是无法调节的，需要用有厚度的线 THREE.Line2

参考
THREE.js（二）：设置材质线条宽度(lineWidth) 无效
 关于 ThreeJS 线宽 lineWidth 无法正常显示太大需要缩小窗口缩放会影响线粗细等问题

官方示例：
https://threejs.org/examples/?q=line#webgl_lines_fat
https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html

/** 添加线条宽度测试*/
private addLineTestCode(): void {
      
        // 1. 赋值空间点坐标，三个一组
        var pointArr = [0, 0, 0, 0, 10, 0];
           
        // 2. 创建 LineGeometry，并设置空间点
        var geometry = new LineGeometry();
        geometry.setPositions(pointArr);
        // 3. 创建 LineMaterial，设置颜色和线宽
        var material = new LineMaterial({
            color: 0xff0000,
            linewidth: 15
        })
        // 4. 设置材质分辨率
        material.resolution.set(window.innerWidth, window.innerHeight);
        // 5. 创建 Line2
        var line = new Line2(geometry, material);
        // 6. 计算下线条长度
        line.computeLineDistances();
        // 7. 添加到场景
        this.scene.add(line)
    }

image.png

参考
three.js+WebGL踩坑经验合集(4.1):THREE.Line2的射线检测问题（注意本篇说的是Line2，同样也不是阈值方面的问题）
使用了shader处理，摘抄一下步骤，图片见原文：

在排查问题之前，笔者先给大家简单介绍一下THREE.Line2的实现原理。核心逻辑在LineMaterial.js的shader里面，小伙伴们可以对照着代码进行理解。
1 以一段线为单位，取其start和end。
2 对start和end应用世界矩阵，相机矩阵和投影矩阵后，转换到WebGL使用的NDC坐标系上。此过程跟笔者前面的一篇博文中提到的THREE.Vector3.project方法有共通之处。
3 在步骤2的基础上，分别过S和E作垂直于SE（代码中为dir）的法线，共4条，如下图所示。
4 然后对法线向量进行缩放，使其长度等于linewidth的一半，这个法线向量在代码中对应offset属性。
此处为shader代码，需要把linewidth转换到ndc坐标系，但是shader在GPU层是无法直接获取到画布大小的，所以才有了LineMaterial的resolution属性，它是屏幕坐标转ndc坐标的条件之一。
5 取出上图中的ABCD点生成两个三角面。

五、实现鼠标离线有一定距离时就响应交互(射线检测的threshold属性)

官方示例
https://threejs.org/examples/?q=lines#webgl_interactive_lines

raycaster = new THREE.Raycaster();
raycaster.params.Line.threshold = 3;

其他参考：
THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2
https://www.cnblogs.com/sunnysnow0527/p/13926264.html

六、线就会莫名选不中

参考
UnityShader精要笔记二数学基础 MVP实例
 three.js+WebGL踩坑经验合集(4.1):THREE.Line2的射线检测问题（注意本篇说的是Line2，同样也不是阈值方面的问题）
three.js+WebGL踩坑经验合集(4.2):为什么不在可视范围内的3D点投影到2D的结果这么不可靠

three.js 笔记三 画线