# ExtrudeGeometry - question

**URL:** <https://discourse.threejs.org/t/extrudegeometry-question/57566>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [October 30, 2023, 11:46am UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566 "2023-10-30T11:46:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [October 30, 2023, 11:46am UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/1 "2023-10-30T11:46:14Z")

</div>

Hi,

I have a question about extruding geometry and applying texture onto it. Is it possible to cover only a part of extruded geometry? I mean: I have a ring and I want to divide it into 2 colors

---

<div class="post-metadata">

**Author:** ![Man](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/man/32/34985_2.png) [@Man](https://discourse.threejs.org/u/Man)\
**Post date:** [October 30, 2023, 12:00pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/2 "2023-10-30T12:00:04Z")

</div>

Hello, @rciepichal  
could you explain what you are going to do now in more detail?

---

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [October 30, 2023, 12:27pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/3 "2023-10-30T12:27:32Z")

</div>

Yes, of course.  
First I made a shape as a cross section of a ring (for example rectangle). After that I created ellipse path and with ExtrudeGeometry I’ve created a ring with a shape cross section.

Now I need to do 2 things.  
First is to cover left part of extruded ring with white color and right part with black color.  
Second - apply a texture only on outer part.

---

<div class="post-metadata">

**Author:** ![Akroob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akroob/32/41267_2.png) [@Akroob](https://discourse.threejs.org/u/Akroob)\
**Post date:** [October 30, 2023, 12:43pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/4 "2023-10-30T12:43:00Z")

</div>

Not sure how and what kinda crazy geometry you are managing to create based on your descriptions. But if you wish to color your geometry, it is possible, but Im not understanding if you have a texture map or are using simple polygon colors. You can do this in code, if you want. If you have a model and its a child (meaning separate from other models), you can color the whole thing with hex colors. If its the same model, you can locate the polygons and color them separately with hex colors. If you have a texture map then locate your UV islands and move them to the part of the texture coordinates you want them to be colored as. Now if you are a sane person, you should probably use Blender to do the same, but with 10x less effort.

---

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [October 30, 2023, 12:50pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/5 "2023-10-30T12:50:49Z")

</div>

The problem is that is not that crazy geometry, its just a simple wedding ring but requirement is to change a cross-section shape. So far we don’t have any blender models and I tried to recreate it in pure threeJS - thats why there is a lot of craziness 😃  
As I understood - It will be easier to recreate a ring in blender with f.e. two zones (childs) and that zones can be colored separately, right? Sadly, Im a newbie in a three js and trying to catch up

---

<div class="post-metadata">

**Author:** ![Akroob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akroob/32/41267_2.png) [@Akroob](https://discourse.threejs.org/u/Akroob)\
**Post date:** [October 30, 2023, 12:56pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/6 "2023-10-30T12:56:38Z")

</div>

I mean if you want you can create it out of shapes in threejs you can, not a big deal. But if your model has details and specific coloring requirements its best to use Blender. Not sure what do you mean by cross-section shape, if its a cross section, its always a plane. As for the ring, no just create the ring as one or two models, as long as you are satisfied with it, then assign polygon colors where you want, or if you have a texture map, place your UVs on the map.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 30, 2023, 1:10pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/7 "2023-10-30T13:10:49Z")

</div>

I thought of something like this:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/3/138349378c2e68238d250a305040b267abb1e1b6.jpeg)

---

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [October 30, 2023, 1:16pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/8 "2023-10-30T13:16:09Z")

</div>

With a cross section shape I mean that ring can have a rectangle/ellipse/circle in a cross section - Image a wire with a square cross section and then connect two edges to make a ring.  
I need to recreate (for example) something like that (with a rounded corner - rectangle)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/b/6bf3b1baa48f28578dbef4bb4fbd14345ba2ee2b.jpeg) source: [His & Hers 4&6mm 9ct Two Colour Wedding Ring Bands - 9ct 2 Colour Gold at Elma UK Jewellery](https://www.elmajewellery.co.uk/his-hers-46mm-9ct-two-colour-wedding-ring-bands-p-729.html)

And is there any guide how to assign polygon and color them to desired color?

---

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [October 30, 2023, 1:16pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/9 "2023-10-30T13:16:57Z")

</div>

That can also be helpful, could provide a method how did you apply 2 colors here?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 30, 2023, 1:20pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/10 "2023-10-30T13:20:03Z")

</div>

> [@rciepichal](#):
>
> Image a wire with a square cross section and then connect two edges to make a ring

The first thought is about `LatheGeometry` (the ring above made with this type of geometry)

> [@rciepichal](#):
>
> That can also be helpful, could provide a method how did you apply 2 colors here?

Here you are:  
https://codepen.io/prisoner849/embed/preview/eYxZgMN?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=eYxZgMN

---

<div class="post-metadata">

**Author:** ![Akroob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akroob/32/41267_2.png) [@Akroob](https://discourse.threejs.org/u/Akroob)\
**Post date:** [October 30, 2023, 2:54pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/11 "2023-10-30T14:54:44Z")

</div>

I see, was kinda confused from what you ment, since a rings cross section isnt a rectangle. Is the ultimate goal just the ring or is it the ring made out of the cross sections ? If its the ring itself, then its a 2 minute work in Blender without sweat. If its the ring made out of planes, then it can probably done like this:

```javascript
// Create a circle for the path extrude follows
const circleRadius = 50;
const circlePoints = [];

const circle = new THREE.Circle(new THREE.Vector2(0, 0), circleRadius, 64);
circlePoints = circle.getPoints(100);

// This is where you create the cross sectional shape.
var planeWidth = 30;
var planeHeight = 20;
const shape = new THREE.Shape();
shape.moveTo(-planeWidth / 2, -planeHeight / 2);
shape.lineTo(planeWidth / 2, -planeHeight / 2);
shape.lineTo(planeWidth / 2, planeHeight / 2);
shape.lineTo(-planeWidth / 2, planeHeight / 2);

// Create an extrusion settings object
const extrudeSettings = {
  steps: 100,
  extrudePath: new THREE.CatmullRomCurve3(circlePoints),
};

// Create the extruded geometry
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial( { color: 0x000000 } ); // Yellow, golden...
const mesh = new THREE.Mesh(geometry, material);

```

Now this should create you the geometry and color. This makes one model called “mesh”, you can create some additional ornaments on the ring by creating a second model with a different cross section and a slightly bigger circle radius. Alternatively, you can create one full model with a crazy cross section and then add color to the polygons individually.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 30, 2023, 7:56pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/12 "2023-10-30T19:56:08Z")

</div>

I’m still having fun with rings 🙂

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/9/893a6446eceb0d1a725a8b31ed97dc614b4a6a0f.jpeg)

---

<div class="post-metadata">

**Author:** ![rciepichal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rciepichal/32/41325_2.png) [@rciepichal](https://discourse.threejs.org/u/rciepichal)\
**Post date:** [October 30, 2023, 8:20pm UTC](https://discourse.threejs.org/t/extrudegeometry-question/57566/13 "2023-10-30T20:20:28Z")

</div>

is that a combination of shaders? To achieve this mesh?