THREE绘制线段、虚线 THREE.LineSegments_javascript

​​THREE.Line​​​ 适合实线 ​​LineSegments​​适合虚线 传递两个点即可

/*
 * @Author: hongbin
 * @Date: 2023-01-21 18:54:38
 * @LastEditors: hongbin
 * @LastEditTime: 2023-01-21 19:17:49
 * @Description: 刻度线
 * @link: https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_lines.html
 */
import * as THREE from "three";

export class TickMark {

    constructor(length, step) {
        this.material = new THREE.LineBasicMaterial({
            color: 0xffffff
        })
        this.createLine(length, step);
    }

    createLine(length, step) {
        const stepSpace = Math.floor(length / step);
        const lineGeometry = new THREE.BufferGeometry()
        const points = [];
        //线段宽度
        const lineLength = 10;

        for (let i = 0; i < step; i++) {
            const x1 = lineLength / 2;
            const y1 = 0;
            const z1 = i * stepSpace;
            const x2 = lineLength / -2;
            const y2 = 0;
            const z2 = i * stepSpace;
            points.push(x1, y1, z1, x2, y2, z2);
        }

        lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(points, 3));
        this.line = new THREE.LineSegments(lineGeometry, this.material);
    }
}
const mark = new TickMark(720, 30);
 td.add(mark.line);