three.js 笔记三 画线

参考
ThreeJS 中线的那些事

一、 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)
    }

五、鼠标离线有一定距离时就响应交互(射线检测的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