Round-edged box

Resources
,
#7

The only thing i notice is that the innermost loop/edge kinda kinks as it goes to the fillet. I think it’s generally a problem of this type of operation, the edges between the straight section and the rounded corner think that there is an angle there, instead of being a straight line. It should be half of 180degrees, but it’s half of 170 or something like that. It becomes obvious when the segments are lower, the square in the middle of the face is smaller than it should be if all the lines were straight.

Still, this makes me think if the shape abstraction should be used nonetheless. Based on the segments we can know how many vertices there should be ahead of any computation. We could extrude and lathe an arc multiple times, mirror it, translate it, writing to the same buffer each time. Should be much more compact and just as precise as my super long solution.

1 Like
#8

44 PM

The top square is bigger than the square in the front. The rounded corner meets at a sharp angle, but it should be 90 degrees exactly.

In 3ds max land, the push modifier could never do this right, while the shell modifier could.

1 Like
#9

Yeah, the solution is as imperfect as simple )
When I made it, I had a thought that that stuff is just a sphere, split at 8 parts (8 pieces) - they are corners; then the corners are joined with edges made of a fourth of a cylinder (12 pieces, 4 for width, 4 for height, 4 for depth) and finally the sides of a box are made of planes (6 pieces).

Round-edged box 2
#10

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.

#11

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

1 Like
#12

Extended variant:

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

#13

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.

#14

@ShankarG
Looks like you bumped into this issue:

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

#15

MultiMaterial should be fully functional from R95.

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

1 Like
#16

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.

#17

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”);

#18

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

#19

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

#20

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)

#21

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

planets
planets800×494 293 KB

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

#22

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

#23

yep. I did. I have this code on https://jsfiddle.net/al3xpisani/percg73n/6/

#24

@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,
    });
#25

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

#26

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