diff --git a/src/Components/Arc.ts b/src/Components/Arc.ts index d67d64a..b231d49 100644 --- a/src/Components/Arc.ts +++ b/src/Components/Arc.ts @@ -86,56 +86,62 @@ class Arc extends Component { } _calcAngle() { - const pointAvec2 = toVector2(this.pointA); - const pointBvec2 = toVector2(this.pointB); - const pointCvec2 = toVector2(this.pointC); + const A = toVector2(this.pointA); + const B = toVector2(this.pointB); + const C = toVector2(this.pointC); - const vectorBtoA = pointAvec2.clone().sub(pointBvec2); - const vectorBtoC = pointCvec2.clone().sub(pointBvec2); + const BA = A.sub(B); + const BC = C.sub(B); - const dot = vectorBtoA.dot(vectorBtoC); - const det = vectorBtoA.x * vectorBtoC.y - vectorBtoA.y * vectorBtoC.x; - let angle = Math.atan2(det, dot); + let angle = BA.angle() - BC.angle(); + angle = angle < 0 ? angle + 2 * Math.PI : angle; + return angle; + } - // Normalize the angle to be between 0 and 2π - while (angle < 0) angle += 2 * Math.PI; - while (angle > 2 * Math.PI) angle -= 2 * Math.PI; + _calcVectorAngle(point1: InputPosition, point2: InputPosition) { + const vector = toVector2(point2).sub(toVector2(point1)); + return Math.atan2(vector.y, vector.x); + } - return angle; + _updateArc(angle: number, cameraZoom: number) { + this._arc.geometry.dispose(); + + const B = toVector2(this.pointB); + const C = toVector2(this.pointC); + const BC = C.sub(B); + const startAngle = BC.angle(); + + this._arc.geometry = new CircleGeometry( + this.radius / cameraZoom, + 64, + startAngle, + angle + ); + this._arc.geometry.computeVertexNormals(); } _updateOutline(angle: number, cameraZoom: number) { - const startAngle = 0; - const endAngle = angle; - const clockwise = false; + const B = toVector2(this.pointB); + const C = toVector2(this.pointC); + const BC = C.sub(B); + const startAngle = BC.angle(); + const endAngle = startAngle + angle; - // Create Arc-curve const arcCurve = new ArcCurve( 0, 0, this.radius / cameraZoom, startAngle, endAngle, - clockwise + false ); - // Generate points on ArcCurve + const points = arcCurve.getPoints(50); this._curvedOutline.geometry.setPositions( points.flatMap((v) => [v.x, v.y, 3]) ); } - _updateArc(angle: number, cameraZoom: number) { - this._arc.geometry.dispose(); - this._arc.geometry = new CircleGeometry( - this.radius / cameraZoom, - 64, - 0, - angle - ); - this._arc.geometry.computeVertexNormals(); - } - _updateText(angle: number, cameraZoom: number) { this._text.setText(Math.round((angle * 180) / Math.PI).toString() + "°"); this._text.position.set( @@ -154,7 +160,7 @@ class Arc extends Component { update(camera: OrthographicCamera) { const pointBVec = toVector3(this.pointB); - this.position.set(pointBVec.x, pointBVec.y, 0); + this.position.set(pointBVec.x, pointBVec.y, this.position.z); const angle = this._calcAngle(); this._updateOutline(angle, camera.zoom); diff --git a/src/index.ts b/src/index.ts index 83ce392..c293530 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,8 +28,8 @@ import Graphica from "./Graphica"; const a = new Graphica(); const b = new Grid(); const p = new Point(0, 0, { draggable: "unrestricted" }); -const pp = new Point(5, 0); -const ppp = new Point(0, 5); +const pp = new Point(5, 0, { draggable: "unrestricted" }); +const ppp = new Point(0, 5, { draggable: "unrestricted" }); const c = new Arc(p, pp, ppp); a.add(b); a.add(c);