diff --git a/src/utils/math.ts b/src/utils/math.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24fda4b065aea7d721f345f2116330555488f9a7
--- /dev/null
+++ b/src/utils/math.ts
@@ -0,0 +1,60 @@
+import { Number2 } from "@manycore/custom-miniapp-sdk"
+import { Vector2 } from "three"
+
+const v = Vector2
+function getV(n: Number2) {
+  return new v(n.x, n.y)
+}
+function getVs(n2: Number2[]) {
+  const vecs = n2.map(n => new v(n.x, n.y))
+  return vecs
+}
+function getPerpVector(vec: Vector2) {
+  const { x, y } = vec
+  const perp = new v(-y, x)
+  perp.normalize();
+  return perp
+}
+export function getArcCenter(p1: Number2, p2: Number2, radius: number, isMinorArc: boolean, isCCW: boolean) {
+  const { pow, sqrt } = Math
+  const [p1v, p2v] = getVs([p1, p2])
+  const dist = p1v.distanceTo(p2v)
+  const len = sqrt(pow(radius, 2) - pow(dist / 2, 2))
+  const midv = p1v.clone().add(p2v).divideScalar(2)
+  const perpv = getPerpVector(p2v.clone().sub(p1v))
+  if (isMinorArc && !isCCW || !isMinorArc && isCCW) {
+    perpv.negate();
+  }
+  const center = midv.clone().add(perpv.multiplyScalar(len))
+  const { x, y } = center
+  return { x, y }
+}
+export function getArc2Angle(center: Number2, p1: Number2, p2: Number2) {
+  const [p1v, p2v] = getVs([p1, p2])
+  const centerV = getV(center)
+  const startAngle = p1v.clone().sub(centerV).angle()
+  const endAngle = p2v.clone().sub(centerV).angle()
+  return [startAngle, endAngle]
+}
+export function getEllArc2Angle(p1: Number2, p2: Number2, isCCW: boolean, curve2d: any) {
+  const { ccs2d: ccs, a, b } = curve2d
+  ccs.dy = getPerpVector(getV(ccs.dx))
+  let [startAngle, endAngle] = [p1, p2].map((p) => {
+    const pv = getV(p)
+    const vec = pv.sub(getV(ccs.o));
+    const x = vec.dot(getV(ccs.dx)) / a;
+    const y = vec.dot(getV(ccs.dy)) / b;
+    let t = Math.atan2(y, x);
+    if (t < 0) {
+      t += 2 * Math.PI;
+    }
+    return t
+  })
+  var clockSign = isCCW ? 1 : -1;
+  if (clockSign < 0) {
+    startAngle = Math.PI * 2 - startAngle;
+    endAngle = Math.PI * 2 - endAngle;
+    return [startAngle, endAngle]
+  }
+  return [startAngle, endAngle]
+}
\ No newline at end of file
diff --git a/src/views/JsonTo3d.vue b/src/views/JsonTo3d.vue
index 28c693587536a010f909da8780b143e6a6f769a4..02577360cd75c440837ee1a7d7af1f7346a58dde 100644
--- a/src/views/JsonTo3d.vue
+++ b/src/views/JsonTo3d.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getArc2Angle, getArcCenter, getEllArc2Angle } from "@/utils/math";
 import { getThreeDatas } from '@/utils/service';
 import { ELineType2, ILineData2, IThreeData } from '@/utils/type';
 import { ELineType, ILineData, Number2 } from '@manycore/custom-miniapp-sdk';
@@ -80,24 +81,35 @@ function addShape(threeData: IThreeData) {
     shape.moveTo(startPoint.x, startPoint.y)
     otherPoints.forEach((point, index) => {
       const line = lines[index]
+      const get2p = () => {
+        const p1 = (points[index])
+        const p2 = (point)
+        return [p1, p2]
+      }
+      const getLine = () => line as ILineData2
       switch (line.type as ELineType | ELineType2) {
         case ELineType.SEGMENT:
           shape.lineTo(point.x, point.y)
           break;
-        // TODO: CIRCLE_ARC
-        // case ELineType.CIRCLE_ARC:
-        //   {
-
-        //     // shape.absarc(cx, cy, radius, startAngle, endAngle, clockwise);
-        //   }
-        //   break;
-        // TODO: ELLIPSE_ARC
-        // case ELineType2.ELLIPSE_ARC:
-        //   {
-
-        //     // shape.absellipse(cx, cy, a, b, startParam, endParam, clockwise, 0)
-        //   }
-        //   break;
+        case ELineType.CIRCLE_ARC:
+          {
+            const [p1, p2] = get2p()
+            const { minorArc, clockwise, radius } = getLine()
+            const center = getArcCenter(p1, p2, radius, minorArc, !clockwise)
+            const [startAngle, endAngle] = getArc2Angle(center, p1, p2)
+            const { x: cx, y: cy } = center
+            shape.absarc(cx, cy, radius, startAngle, endAngle, clockwise);
+          }
+          break;
+        case ELineType2.ELLIPSE_ARC:
+          {
+            const [p1, p2] = get2p()
+            const { clockwise, curve2d, curve2d: { a, b, c } } = getLine()
+            const { x: cx, y: cy } = c
+            const [startAngle, endAngle] = getEllArc2Angle(p1, p2, !clockwise, curve2d)
+            shape.absellipse(cx, cy, a, b, startAngle, endAngle, clockwise, 0)
+          }
+          break;
 
         default: shape.lineTo(point.x, point.y)
           break;