ExtrudeGeometry in three.js JSON

Hello,

in the Julia project Modia3D 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.

    {
      "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) in three.js JSON?

three.js can serialize/deserialize ExtrudeGeometry since r93. Here is a live example that demonstrates a complete round-trip: Edit fiddle - JSFiddle - Code Playground

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

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

Thanks a lot! :grinning:

  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:

    "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":[]
        }
    ],