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);