# ExtrudeGeometry in three.js JSON

**URL:** <https://discourse.threejs.org/t/extrudegeometry-in-three-js-json/29717>\
**Category:** Questions\
**Tags:** json-format\
**Created:** [September 8, 2021, 9:29am UTC](https://discourse.threejs.org/t/extrudegeometry-in-three-js-json/29717 "2021-09-08T09:29:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![HippiE](https://avatars.discourse-cdn.com/v4/letter/h/ac8455/32.png) [@HippiE](https://discourse.threejs.org/u/HippiE)\
**Post date:** [September 8, 2021, 9:29am UTC](https://discourse.threejs.org/t/extrudegeometry-in-three-js-json/29717/1 "2021-09-08T09:29:58Z")

</div>

Hello,

in the Julia project [Modia3D](https://github.com/ModiaSim/Modia3D.jl) we generate three.js JSON files for animation export. This works fine for primitive geometries like `BoxGeometry,` `ConeGeometry...` However, I do not succeed in exporting `ExtrudeGeometry,` e.g.

```javascript
    {
      "name": "beamX.geometry",
      "uuid": "1ee74833-7831-5d2b-8ea8-20e01428cf1f",
      "type": "ExtrudeGeometry",
      "shapes": {
        "type": "Shape",
        "points": [
          [-0.5,-0.2],
          [0.5,-0.2],
          [0.5, 0.2],
          [-0.5, 0.2],
          [-0.5,-0.2]
        ]
      },
      "options": {
        "depth": 0.2,
        "bevelEnabled": false
      }
    },

```

can be imported by the three.js editor and is recognized as geometry of type `ExtrudeGeometry` with its options, but the shape is ignored.

Is it possible to consider `ExtrudeGeometry` in three.js JSON? If yes

- What is wrong with the example?
- Is it possible to use curve generation methods instead of points (like in [this code example](https://threejs.org/docs/#api/en/extras/core/Shape)) in three.js JSON?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 8, 2021, 10:43am UTC](https://discourse.threejs.org/t/extrudegeometry-in-three-js-json/29717/2 "2021-09-08T10:43:19Z")

</div>

`three.js` can serialize/deserialize `ExtrudeGeometry` since `r93`. Here is a live example that demonstrates a complete round-trip: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/zcvLur67/)

> [@HippiE](#):
>
> What is wrong with the example?

I’m not sure but id does not look like like the `three.js` JSON format.

> [@HippiE](#):
>
> Is it possible to use curve generation methods instead of points (like in [this code example](https://threejs.org/docs/#api/en/extras/core/Shape)) in three.js JSON?

Yes. If you check out the logged the serialized JSON you will see that the shape is saved as an array of `LineCurve` objects.

---

<div class="post-metadata">

**Author:** ![HippiE](https://avatars.discourse-cdn.com/v4/letter/h/ac8455/32.png) [@HippiE](https://discourse.threejs.org/u/HippiE)\
**Post date:** [September 9, 2021, 3:30pm UTC](https://discourse.threejs.org/t/extrudegeometry-in-three-js-json/29717/3 "2021-09-09T15:30:06Z")

</div>

Thanks a lot! 😀

```javascript
  const json = JSON.stringify(mesh.toJSON());
  console.log(json);

```

is really useful for investigating the JSON format. The solution was to define `shapes` on top level:

```javascript
    "geometries":[
        {
            "uuid":"D92052C7-9573-41A6-9861-BE74EE6CAC99",
            "type":"ExtrudeGeometry",
            "shapes":["CC3B528C-8940-411B-81A7-25742C62161F"],
            "options":{
                "depth":0.2,
                "bevelEnabled":false
            }
        }
    ],
    "shapes":[
        {
            "type":"Shape",
            "curves":[
                {
                    "type":"LineCurve",
                    "v1":[-0.5,0.2],
                    "v2":[0.5,0.2]
                },
                {
                    "type":"EllipseCurve",
                    "aX":0.5,
                    "aY":0,
                    "xRadius":0.2,
                    "yRadius":0.2,
                    "aStartAngle":1.5707963267948966,
                    "aEndAngle":-1.5707963267948966,
                    "aClockwise":true,
                    "aRotation":0
                },
                {
                    "type":"LineCurve",
                    "v1":[0.5,-0.2],
                    "v2":[-0.5,-0.2]
                },
                {
                    "type":"EllipseCurve",
                    "aX":-0.5,
                    "aY":0,
                    "xRadius":0.2,
                    "yRadius":0.2,
                    "aStartAngle":-1.5707963267948966,
                    "aEndAngle":1.5707963267948966,
                    "aClockwise":true,
                    "aRotation":0
                }
            ],
            "currentPoint":[0,0],
            "uuid":"CC3B528C-8940-411B-81A7-25742C62161F",
            "holes":[]
        }
    ],

```