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 https://jsfiddle.net/shankarg/p47jv92z/11/

Is there any other way to achieve this.

@ShankarG
Hi!
You can try another approach:
https://discourse.threejs.org/t/round-edged-box-3/1481?u=prisoner849

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.

@ShankarG
Looks like you bumped into this issue:

If you apply a single material, intersection works as expected:
https://jsfiddle.net/prisoner849/sowvhpm0/

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(“https://i.ibb.co/3srcxqp/Sol.jpg”);

@alexandre_pisani
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

https://jsfiddle.net/al3xpisani/percg73n/1/

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?

https://jsfiddle.net/prisoner849/5acjyq36/ (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 : https://i.ibb.co/D7B8ChD/eso-dark.jpg 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 https://jsfiddle.net/al3xpisani/percg73n/6/

@alexandre_pisani
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

@alexandre_pisani
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 discourse.threejs.org :
RoundEdgedBoxFlat

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