Open msforest opened 1 year ago
画连线(弧形)
private addFlyLine = (
from: THREE.Vector3,
to: THREE.Vector3,
data: any,
) => {
const group = new THREE.Group();
group.name = Lines.Arc;
const start = from.clone().setY(4).setX(from.x > 0 ? from.x - 2 : from.x + 1);
const end = to.clone().setY(4).setX(to.x > 0 ? to.x - 2 : to.x + 1);
const distance = start.distanceTo(end);
const partCount = 3 + Math.ceil(distance * 3);
let lineY = distance * 0.3;
lineY = Math.max(lineY, start.y * 2);
const v1 = new THREE.Vector3(
(2 * from.x + to.x) / 3,
lineY,
(2 * from.z + to.z) / 3,
);
const v2 = new THREE.Vector3(
(2 * to.x + from.x) / 3,
lineY,
(2 * to.z + from.z) / 3,
);
const curve = new THREE.CubicBezierCurve3(start, v1, v2, end);
const allPoints = curve.getPoints(partCount * 5);
const colors: number[] = [];
let i = 0;
while (i < allPoints.length) {
colors.push(this.lineBaseColor.r, this.lineBaseColor.g, this.lineBaseColor.b, 1);
i++;
}
const geometry = new THREE.BufferGeometry().setFromPoints(allPoints);
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4));
const mesh = new THREE.Line(geometry, meteorMaterial);
group.add(mesh);
return group;
};
三维坐标转屏幕坐标
axis2Screen: (modelPos: THREE.Vector3, camera, dom) => {
const point2 = modelPos.clone().project(camera); // 场景坐标转设备坐标
// 设备坐标转屏幕坐标
const halfWidth = dom.offsetWidth / 2;
const halfHeight = dom.offsetHeight / 2;
const point3 = new THREE.Vector3(0, 0, 0);
point3.x = Math.round(point2.x * halfWidth + halfWidth);
point3.y = Math.round(-point2.y * halfHeight + halfHeight);
return point3;
}