Round-edged box

I’m looking for this so long, but this method does not respect material indices. I would like to have different color and map for different sides but it’s not working, here is the code

Is there any other way to achieve this.

You can try another approach:

1 Like

Extended variant:

An overview of boxes with rounded corners can be found in the middle of the page.

WOW this method works, but raycaster.intersectObjects() is not working. I need to find object I’m clicking on, is there any workaround for it.

Looks like you bumped into this issue:

If you apply a single material, intersection works as expected:

MultiMaterial should be fully functional from R95.

See contribution @Mugen87
Modify indexed BufferGeometry (mouse or input)

1 Like

This issue is fixed in three r95 and one more issue I’m finding clicked side of object using raycaster with faceIndex property, previously faceindex value is within 0 to 7, right now the values are between 1 to 800(or something). Is there a way to calculate faceIndex or any other way to do this.

hi. thanks for this code. @prisoner849 I need it to let my sphere well defined on the edges. but when I try to add the sun texture it not fits perfect. would you help me with this issue ?
const sunTexture = textureLoader.load(“”);

Hi! Could you provide an editable live code example, that shows the problem? jsfiddle, codepen etc.

@prisoner849 Im using your fiddle example at the top of this topic. I only did some changes to add the sun texture

Just out of curiousity: why do you use this kind of geometry instead of simply THREE.SphereGeometry() or THREE.SphereBufferGeometry(), if you need a sphere? (line 67 on JS tab)

I use SphereBufferGeometry but the planets dont get well defined on the edge.

As you can see the planets (spheres) dont get well defined on the edges and get worst when I zoom in.

try to load the background with these stars : you will see the spheres rounded are not well defined.

I dont know how to fix it. pls

Do you set the default anialiasing to true?
This way: var renderer = new THREE.WebGLRenderer( { antialias: true } );

yep. I did. I have this code on

No, you didn’t.
I see this in your code:

    renderer = new THREE.WebGLRenderer({
      antialias: false, // try to set it to `true`, the result will be much smoother
      logarithmicDepthBuffer: false,
      alpha: true,

RESOLVED yep. you are right. I was trying changing a lot of settings and may be forgot this one. thanks a lot for helping me @prisoner849

You’re welcome :beers: Glad, that it helped.

Hi !

I’m trying to make a “low poly” round edged box version.

i’m trying to reduce the number of triangles resulting of the extrusion of a shape using shape.quadraticCurveTo().

Dreaming of a fifth parameter in shape.quadraticCurveTo(cpx, cpy, x, y, numberOfsegments).

Any help appreciated, including math google keywords.

Possibly you can use that?

From the Collection of examples from :

const w = 16; // width
const h = 9; // height
const t = 0.2; // thick
const r = 2; // radius corner
const s = 36; // smoothness

const geometry = RoundEdgedBoxFlat( w, h, t, r, s );

(see also RoundedRectangle)

Or Addon to create special / extended geometries - #3 by hofk

2022-04-05 08.46.03

Solved, it was in the doc, but not Shape side.
i.e curveSegments in extrude config settings. Sorry for noise.

1 Like