Extruded shape with hole missing inside mesh

[jimtea44]

I created a shape with a hole like this:

const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 5);
shape.lineTo(5, 5);
shape.lineTo(5, 0);
shape.lineTo(0, 0);

const hole = new THREE.Path();
hole.moveTo(0.5, 0.5);
hole.lineTo(0.5, 4.5);
hole.lineTo(4.5, 4.5);
hole.lineTo(4.5, 0.5);
hole.lineTo(0.5, 0.5);

shape.holes = [hole];

const extrudeSettings = {
	depth: 10,
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial());

And it works fine but the entire hole makes the backside of the 3D object transparent, the back wall is not present inside the hole like this:

I think my mesh may be missing “backside” setting or something similar (ability to see polygons of mesh from the inside too).

Can this be fixed somehow?

[jimtea44]

I solved it by adding side: THREE.DoubleSide to the material.

But I have another question: is there a way to do the above shape more easily (without holes)? Like with a line that has thickness?

[Mugen87]

Live example with your solution: Edit fiddle - JSFiddle - Code Playground

@jimtea44

is there a way to do the above shape more easily (without holes)? Like with a line that has thickness?

You consider to author the geometry offline with Blender and then load it via THREE.GLTFLoader. But there is no other geometry generator that produces the same result in an “easier” way.

[jimtea44]

Thank you very much!

[hofk]

You can use this method for a non-hollow rod:

Construction of frames with contour/profile

[Big_Hughes]

Hey Mugen,

I checked your JS Fiddle, just wondering if you know if you add mesh.scale.set(1,2,3) to your code, is there a way to maintain the same thickness of the walls?

The use case for me is that I’ve got this far for a 4-sided room building tool, but when it scales, the thicknesses go all out of whack.

TIA

[Mugen87]

@Big_Hughes

just wondering if you know if you add mesh.scale.set(1,2,3) to your code, is there a way to maintain the same thickness of the walls?

No, that doesn’t work. Neither when scaling the mesh nor the geometry. You have to update the shape before the extrusion process happens, see Edit fiddle - JSFiddle - Code Playground

[Big_Hughes]

Hey Mugen,

Thanks for that.

If I am trying to maintain the wallThickness - is this fundamentally not possible with x/y points and cutout/extrude?

Should I look to build a 4 sided room using a invisible with a around it?

I’ve been really struggling with this scaling problem, so any insight appreciated!