# \#shapes

**URL:** https://discourse.threejs.org/tag/shapes/345.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Custom face material on ExtrudeGeometry](https://discourse.threejs.org/t/custom-face-material-on-extrudegeometry/90550)

<div class="topic-metadata">

**Author:** [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Replies:** 10\
**Last updated:** [March 25, 2026, 11:48am UTC](https://discourse.threejs.org/t/custom-face-material-on-extrudegeometry/90550 "2026-03-25T11:48:09Z")

</div>

Hi there, in one of my apps i use ExtrudeGeometries heavily. I know that there is a way to give the caps and the faces created by the extrusion different materials with material groups 1 and 2. Today i thought if the fo…

---

## [Outline Generation for 2D Shape](https://discourse.threejs.org/t/outline-generation-for-2d-shape/81608)

<div class="topic-metadata">

**Author:** [@Faustoo](https://discourse.threejs.org/u/Faustoo)\
**Replies:** 1\
**Last updated:** [April 25, 2025, 5:55pm UTC](https://discourse.threejs.org/t/outline-generation-for-2d-shape/81608 "2025-04-25T17:55:49Z")

</div>

Hi community! Is it possible to generate an outline (optionally dashed) for a generic 2D shape (random polygon) using shading? I’ve already tried to research the topic and came across edge detection. Unfortunately, I wa…

---

## [How do i export shapes/paths from blender to threejs?](https://discourse.threejs.org/t/how-do-i-export-shapes-paths-from-blender-to-threejs/79841)

<div class="topic-metadata">

**Author:** [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Replies:** 17\
**Last updated:** [March 27, 2025, 2:26pm UTC](https://discourse.threejs.org/t/how-do-i-export-shapes-paths-from-blender-to-threejs/79841 "2025-03-27T14:26:32Z")

</div>

Hi there, i’ve got this mesh in blender, that i want to export as a threejs path / shape: Is there a convenient way to do it? I imported it as glb and extracted the points and tried to set a shape from those points …

---

## [Extruded arc shape geometry not closing](https://discourse.threejs.org/t/extruded-arc-shape-geometry-not-closing/78435)

<div class="topic-metadata">

**Author:** [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Replies:** 7\
**Last updated:** [February 22, 2025, 3:06am UTC](https://discourse.threejs.org/t/extruded-arc-shape-geometry-not-closing/78435 "2025-02-22T03:06:18Z")

</div>

Can someone please tell me why the geometry isn’t closing properly? I just spent over an hour on what was supposed to be “aesthetic”. My brain has officially stopped functioning. (I’m out, touching some asphalt) I…

---

## [Undesired results when parsing large SVG files](https://discourse.threejs.org/t/undesired-results-when-parsing-large-svg-files/77342)

<div class="topic-metadata">

**Author:** [@Joe\_At](https://discourse.threejs.org/u/Joe_At)\
**Replies:** 9\
**Last updated:** [February 2, 2025, 6:03pm UTC](https://discourse.threejs.org/t/undesired-results-when-parsing-large-svg-files/77342 "2025-02-02T18:03:54Z")

</div>

When parsing complex and large SVG files (\> ~20 MB), I encountered several undesired results, as shown in the screenshot. These issues seem to concern \<path/\> elements, as far as I can tell. I’m not entirely sure of …

---

## [We made a parametric table design generator](https://discourse.threejs.org/t/we-made-a-parametric-table-design-generator/75900)

<div class="topic-metadata">

**Author:** [@Madz\_R](https://discourse.threejs.org/u/Madz_R)\
**Replies:** 0\
**Last updated:** [January 2, 2025, 7:46am UTC](https://discourse.threejs.org/t/we-made-a-parametric-table-design-generator/75900 "2025-01-02T07:46:18Z")

</div>

Hello everyone, We built a parametric design generator that can create random tabletop shapes by playing with two simple sliders. You can also swap between two textures for the desk top. It was more of a weekend projec…

---

## [Draw polygons/lines and attach labels](https://discourse.threejs.org/t/draw-polygons-lines-and-attach-labels/74281)

<div class="topic-metadata">

**Author:** [@Emaborsa](https://discourse.threejs.org/u/Emaborsa)\
**Replies:** 5\
**Last updated:** [November 22, 2024, 3:57pm UTC](https://discourse.threejs.org/t/draw-polygons-lines-and-attach-labels/74281 "2024-11-22T15:57:37Z")

</div>

Hi, I must confess this is my first approach to canvas drawing. I developed a web app in React+Typescript and need to allow to the user to draw a shape on google maps and show him the lenght of the lines. I have a record…

---

## [Can an ExtrudeGeometry's normals "remember" the shape it was made from?](https://discourse.threejs.org/t/can-an-extrudegeometrys-normals-remember-the-shape-it-was-made-from/74029)

<div class="topic-metadata">

**Author:** [@ericman314](https://discourse.threejs.org/u/ericman314)\
**Replies:** 9\
**Last updated:** [November 14, 2024, 10:06pm UTC](https://discourse.threejs.org/t/can-an-extrudegeometrys-normals-remember-the-shape-it-was-made-from/74029 "2024-11-14T22:06:59Z")

</div>

I am creating a Shape that can contain lines and arcs, and then extruding that using an ExtrudeGeometry. Here’s an example of the result I am getting (this one just contains arcs, no lines): You can see that when th…

---

## [Changing dimensions of a extruded shape geometry without stretching in vertex shader](https://discourse.threejs.org/t/changing-dimensions-of-a-extruded-shape-geometry-without-stretching-in-vertex-shader/72986)

<div class="topic-metadata">

**Author:** [@Cheung-KaWai](https://discourse.threejs.org/u/Cheung-KaWai)\
**Replies:** 4\
**Last updated:** [October 23, 2024, 7:06pm UTC](https://discourse.threejs.org/t/changing-dimensions-of-a-extruded-shape-geometry-without-stretching-in-vertex-shader/72986 "2024-10-23T19:06:02Z")

</div>

I’m creating shapes for a table configurator using the Shape and ExtrudeGeometry and I want to change the dimensions of my table shapes but with the current logic I recreate the geometry shape the whole time and I notice…

---

## [Can't understand why result is a triangle instead of rectangle when creating 3d polygon](https://discourse.threejs.org/t/cant-understand-why-result-is-a-triangle-instead-of-rectangle-when-creating-3d-polygon/69105)

<div class="topic-metadata">

**Author:** [@evgenyshaikovskiy](https://discourse.threejs.org/u/evgenyshaikovskiy)\
**Replies:** 8\
**Last updated:** [August 16, 2024, 4:23am UTC](https://discourse.threejs.org/t/cant-understand-why-result-is-a-triangle-instead-of-rectangle-when-creating-3d-polygon/69105 "2024-08-16T04:23:53Z")

</div>

I am relatively new to Three.JS and tried to implement something to build polygons in 3D space. I tried using earcut library to triangulate points - did not help that much, tried to use Hull.js, which did work, but only …

---

## [I want to calculate the area of a polygon with empty space](https://discourse.threejs.org/t/i-want-to-calculate-the-area-of-a-polygon-with-empty-space/68660)

<div class="topic-metadata">

**Author:** [@1\_1](https://discourse.threejs.org/u/1_1)\
**Replies:** 6\
**Last updated:** [July 27, 2024, 11:41am UTC](https://discourse.threejs.org/t/i-want-to-calculate-the-area-of-a-polygon-with-empty-space/68660 "2024-07-27T11:41:17Z")

</div>

The picture is strange, but the red circles are vertices, the blue lines are lines or linesegments, the gray is empty space, and the green is the filled space to be calculated. How do I calculate this if the vertex i…

---

## [The effect of a 2D shape being distorted by another shape](https://discourse.threejs.org/t/the-effect-of-a-2d-shape-being-distorted-by-another-shape/66923)

<div class="topic-metadata">

**Author:** [@Jay2](https://discourse.threejs.org/u/Jay2)\
**Replies:** 0\
**Last updated:** [June 17, 2024, 5:02am UTC](https://discourse.threejs.org/t/the-effect-of-a-2d-shape-being-distorted-by-another-shape/66923 "2024-06-17T05:02:53Z")

</div>

As shown in the picture above, I am trying to create an effect where the points of a 2D circle are distorted by another shape. When another shape approaches the circle, the circle should be distorted. Which way is best…

---

## [ExtrudeGeometry has extra faces and not closed like the curve](https://discourse.threejs.org/t/extrudegeometry-has-extra-faces-and-not-closed-like-the-curve/66495)

<div class="topic-metadata">

**Author:** [@Cube\_3js](https://discourse.threejs.org/u/Cube_3js)\
**Replies:** 2\
**Last updated:** [June 12, 2024, 7:44pm UTC](https://discourse.threejs.org/t/extrudegeometry-has-extra-faces-and-not-closed-like-the-curve/66495 "2024-06-12T19:44:57Z")

</div>

Hello! In this screenshot, I am having two issues with this extruded geometry. There are some extra geometries that I did not intend to be drawn upon creation of the THREE.Shape. Here is the shape I was expecting …

---

## [Holes don't remove the border of a shape](https://discourse.threejs.org/t/holes-dont-remove-the-border-of-a-shape/38300)

<div class="topic-metadata">

**Author:** [@IvanPeevski](https://discourse.threejs.org/u/IvanPeevski)\
**Replies:** 3\
**Last updated:** [May 19, 2022, 12:49pm UTC](https://discourse.threejs.org/t/holes-dont-remove-the-border-of-a-shape/38300 "2022-05-19T12:49:23Z")

</div>

Hello, I am trying to achieve a shape similar to that of a donut segment. My first thought was to create one big quarter circle and then a smaller one which will hide the inner part let shape = new THREE.Shape(); shape.…

---

## [Separate shapes in one ExtrudeGeometry](https://discourse.threejs.org/t/separate-shapes-in-one-extrudegeometry/61853)

<div class="topic-metadata">

**Author:** [@jeryrep](https://discourse.threejs.org/u/jeryrep)\
**Replies:** 1\
**Last updated:** [February 23, 2024, 12:13pm UTC](https://discourse.threejs.org/t/separate-shapes-in-one-extrudegeometry/61853 "2024-02-23T12:13:32Z")

</div>

Greetings. I have code as follows: var shape = new THREE.Shape(); shape.moveTo(0, 0); shape.lineTo(1, 0); shape.lineTo(1, 1); shape.lineTo(0, 0); // Close the first triangle shape.moveTo(2, 2); shape.lineTo(2, 3); sh…

---

## [ShapeGeometry is not giving expected result from svg path data](https://discourse.threejs.org/t/shapegeometry-is-not-giving-expected-result-from-svg-path-data/61475)

<div class="topic-metadata">

**Author:** [@harshilHexa](https://discourse.threejs.org/u/harshilHexa)\
**Replies:** 4\
**Last updated:** [February 21, 2024, 10:00am UTC](https://discourse.threejs.org/t/shapegeometry-is-not-giving-expected-result-from-svg-path-data/61475 "2024-02-21T10:00:19Z")

</div>

I am trying to load shape with svg path in three js using THREE.ShapeGeometry but I did not get expected result sometimes. Here is the code I used to load shape let loader = new SVGLoader() loader.load('./test.svg', fu…

---

## [ShapeGeometry is giving incorrect result](https://discourse.threejs.org/t/shapegeometry-is-giving-incorrect-result/61478)

<div class="topic-metadata">

**Author:** [@RAUMIK\_RANA](https://discourse.threejs.org/u/RAUMIK_RANA)\
**Replies:** 1\
**Last updated:** [February 15, 2024, 7:22pm UTC](https://discourse.threejs.org/t/shapegeometry-is-giving-incorrect-result/61478 "2024-02-15T19:22:35Z")

</div>

I am getting issue with ShapeGeometry. As you can see in below image, when I use same set of points for ShapeGeometry, I am getting intersected result. When add lines passing through those points, I am getting proper r…

---

## [Native JavaScript implementation of Clipper2 for Union, Intersection and Difference operations on threejs shapes](https://discourse.threejs.org/t/native-javascript-implementation-of-clipper2-for-union-intersection-and-difference-operations-on-threejs-shapes/55672)

<div class="topic-metadata">

**Author:** [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Replies:** 7\
**Last updated:** [February 5, 2024, 3:15pm UTC](https://discourse.threejs.org/t/native-javascript-implementation-of-clipper2-for-union-intersection-and-difference-operations-on-threejs-shapes/55672 "2024-02-05T15:15:35Z")

</div>

Clipper2 provides Union, Intersection and Difference clipping operations for shapes. Threejs shape points can be passed to Clipper2 and the resulting clipped shape can be added back into threejs. See the following exam…

---

## [How to make the process more efficient?](https://discourse.threejs.org/t/how-to-make-the-process-more-efficient/59515)

<div class="topic-metadata">

**Author:** [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Replies:** 15\
**Last updated:** [January 19, 2024, 3:31pm UTC](https://discourse.threejs.org/t/how-to-make-the-process-more-efficient/59515 "2024-01-19T15:31:57Z")

</div>

Hi there, I am cutting out specific geometries out of a rectangle. There are many different Cutouts i have to visualize. Currently my method is as follows: I create the geometry in Blender: Beginning, MiddlePart, En…

---

## [Add hole to geometry face](https://discourse.threejs.org/t/add-hole-to-geometry-face/58794)

<div class="topic-metadata">

**Author:** [@DYDOI](https://discourse.threejs.org/u/DYDOI)\
**Replies:** 6\
**Last updated:** [December 2, 2023, 11:07am UTC](https://discourse.threejs.org/t/add-hole-to-geometry-face/58794 "2023-12-02T11:07:28Z")

</div>

Hi! Faced an interesting situation in the task of creating holes inside graphic objects. What is the essence - you need to provide the user with a tool for creating a hole inside the geometries of 3D objects. The Three…

---

## [Idea for CSS-like Styling for Three.js Geometries and Materials](https://discourse.threejs.org/t/idea-for-css-like-styling-for-three-js-geometries-and-materials/57969)

<div class="topic-metadata">

**Author:** [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Replies:** 2\
**Last updated:** [November 10, 2023, 12:31am UTC](https://discourse.threejs.org/t/idea-for-css-like-styling-for-three-js-geometries-and-materials/57969 "2023-11-10T00:31:20Z")

</div>

Concept: The idea is to bridge the familiar world of CSS with the dynamic realm of 3D graphics in Three.js. The goal is to create a library that allows developers to style Three.js geometries and materials using a subset…

---

## [UV map difference between Plane and Shape geometry](https://discourse.threejs.org/t/uv-map-difference-between-plane-and-shape-geometry/56132)

<div class="topic-metadata">

**Author:** [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Replies:** 2\
**Last updated:** [September 18, 2023, 4:04pm UTC](https://discourse.threejs.org/t/uv-map-difference-between-plane-and-shape-geometry/56132 "2023-09-18T16:04:56Z")

</div>

When I apply a texture to a plane, it appears correctly. However, when i create a plane using shape and ShapeGeometry, the position and scale of the texture is incorrect It appears the UV maps are different. Is th…

---

## [How to add the border lines just for the edges in custom shapes](https://discourse.threejs.org/t/how-to-add-the-border-lines-just-for-the-edges-in-custom-shapes/54844)

<div class="topic-metadata">

**Author:** [@Ravi\_Tej](https://discourse.threejs.org/u/Ravi_Tej)\
**Replies:** 2\
**Last updated:** [August 11, 2023, 5:58am UTC](https://discourse.threejs.org/t/how-to-add-the-border-lines-just-for-the-edges-in-custom-shapes/54844 "2023-08-11T05:58:21Z")

</div>

private generateCurvedCube(): void { const shape = new THREE.Shape(); shape.lineTo(0,3); shape.absarc(0,0,3,1.4,0,true); shape.lineTo(0,0); const extrudeSettings = { depth: 2.5, bevelEnabled: false, bevelSegme…

---

## [How to build surface using QuadraticBezierCurve3](https://discourse.threejs.org/t/how-to-build-surface-using-quadraticbeziercurve3/54499)

<div class="topic-metadata">

**Author:** [@Bittu\_Kumar](https://discourse.threejs.org/u/Bittu_Kumar)\
**Replies:** 0\
**Last updated:** [August 1, 2023, 10:47am UTC](https://discourse.threejs.org/t/how-to-build-surface-using-quadraticbeziercurve3/54499 "2023-08-01T10:47:11Z")

</div>

I’m trying to render a surface using QuadraticBezierCurve3 which right now able to render a shape which lie on same z coordinates but when I try to change the position of z axis the curve won’t shift to that particular …

---

## [Bounding box bigger than concave object (ExtrudeGeometry)](https://discourse.threejs.org/t/bounding-box-bigger-than-concave-object-extrudegeometry/26073)

<div class="topic-metadata">

**Author:** [@Andrey](https://discourse.threejs.org/u/Andrey)\
**Replies:** 6\
**Last updated:** [July 14, 2023, 1:02pm UTC](https://discourse.threejs.org/t/bounding-box-bigger-than-concave-object-extrudegeometry/26073 "2023-07-14T13:02:08Z")

</div>

I create a rectangle with cut or rounded corners using ExtrudeGeometry and after rotating its mesh I get a bounding box larger than this geometry. If I rotate the geometry itself, the problem disappears, but when I group…

---

## [How to create a Z-like Shape?](https://discourse.threejs.org/t/how-to-create-a-z-like-shape/17452)

<div class="topic-metadata">

**Author:** [@Siggi](https://discourse.threejs.org/u/Siggi)\
**Replies:** 4\
**Last updated:** [July 8, 2023, 4:37pm UTC](https://discourse.threejs.org/t/how-to-create-a-z-like-shape/17452 "2023-07-08T16:37:06Z")

</div>

Hi, I’m new to three.js, and for the last couple of hours, I tried creating this shape: What is the simplest way of creating it? I tried to create it by extruding a path but failed miserably. Any help is much apprec…

---

## [Help adding thickness to a cylinder with no caps](https://discourse.threejs.org/t/help-adding-thickness-to-a-cylinder-with-no-caps/52308)

<div class="topic-metadata">

**Author:** [@Daniyal\_H](https://discourse.threejs.org/u/Daniyal_H)\
**Replies:** 2\
**Last updated:** [June 1, 2023, 6:29pm UTC](https://discourse.threejs.org/t/help-adding-thickness-to-a-cylinder-with-no-caps/52308 "2023-06-01T18:29:27Z")

</div>

Hello! I’m new to threejs and was creating a visual. Initially I used arccurves and lines but soon learned I needed to make it 3d. All the lines needed to be cubes and all the circles needed to be cylinders. However I ar…

---

## [Custom shape in image not working](https://discourse.threejs.org/t/custom-shape-in-image-not-working/49348)

<div class="topic-metadata">

**Author:** [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Replies:** 30\
**Last updated:** [March 21, 2023, 3:10pm UTC](https://discourse.threejs.org/t/custom-shape-in-image-not-working/49348 "2023-03-21T15:10:46Z")

</div>

From this documentation three.js docs I tried to make a custom shape with an image however the image seems like it doesn’t fit to the custom shape I’d like to happen. Like is there anyway can I make custom image shapes?…

---

## [How can I use text as holes in a shape?](https://discourse.threejs.org/t/how-can-i-use-text-as-holes-in-a-shape/47493)

<div class="topic-metadata">

**Author:** [@x0y0](https://discourse.threejs.org/u/x0y0)\
**Replies:** 3\
**Last updated:** [February 1, 2023, 12:40pm UTC](https://discourse.threejs.org/t/how-can-i-use-text-as-holes-in-a-shape/47493 "2023-02-01T12:40:18Z")

</div>

How can I use text as holes in a shape? if I have a threejs shape const shape = new THREE.Shape(); can I use the text hello as holes of it? shape.holes = \[...\] Thanks in advance.

---

## [Drawing walls in 3d space from X, Y coordinates](https://discourse.threejs.org/t/drawing-walls-in-3d-space-from-x-y-coordinates/42133)

<div class="topic-metadata">

**Author:** [@mrticklespot](https://discourse.threejs.org/u/mrticklespot)\
**Replies:** 1\
**Last updated:** [September 2, 2022, 8:45am UTC](https://discourse.threejs.org/t/drawing-walls-in-3d-space-from-x-y-coordinates/42133 "2022-09-02T08:45:29Z")

</div>

Hi, I am trying to re-create drawing a “map” - walls, floors + ceiling - of 2D coordinates and I am getting in a bit of a muddle. I can draw the floor + ceiling by iterating over the walls and using the x, y coords as …

[Next page](https://discourse.threejs.org/tag/shapes/345.md?match_all_tags=true&page=1&tags%5B%5D=shapes)