ExtrudeGeometry - question

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

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

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.

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.

2 Likes

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 :smiley:
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

1 Like

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.

I thought of something like this:

1 Like

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)

source: His & Hers 4&6mm 9ct Two Colour Wedding Ring Bands - 9ct 2 Colour Gold at Elma UK Jewellery

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

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

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

Here you are:

2 Likes

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:

// 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.

I’m still having fun with rings :slight_smile:

4 Likes

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