# How to create cylinder with cutted triangle on top side with depth 3 px

Hello, everyone! I still have problems with extrudeGeometry.
I trying to create cylinder (10px - height, 10px - top and bottom radius) with cutted triangle on top side with depth 3 px.

But in result i got this:

The problem, that geometry from 10 px of height, become to 3px
How to fix it? Is possible to do that with extrudeGeometry?

Here code:
I have function createCylinder, that take config and create a cylinder

``````//Function that create cylinder and it to scene
let createCylinder = (config) => {

const raidusTop = config.diameterTop / 2
const raidusBottom = config.diameterBottom / 2
const height = config.height
const segments = config.segments
const color = config.color

const geometry = new THREE.CylinderGeometry( raidusTop, raidusBottom, height, segments )
const material =
[
new THREE.MeshBasicMaterial( {color: color, side: THREE.DoubleSide} ),
new THREE.MeshBasicMaterial( {color: '#e91e63', side: THREE.DoubleSide} ),
new THREE.MeshBasicMaterial( {color: '#e91e63', side: THREE.DoubleSide} )
]
let cylinder = new THREE.Mesh( geometry, material )
return cylinder;
}
``````

I call function and give her config with next parameters

``````// Create cylinder
let cylinder = createCylinder({
diameterTop: 20,
diameterBottom: 20,
height: 10,
segments: 30,
color: '#81c784'
})
``````

Then I copy shape of cylinder

``````// Create and copy shape of cylinder
let shape = new THREE.Shape()
shape.absarc(0, 0, cylinder.geometry.parameters.radiusTop, 0, Math.PI * 2, false)
``````

Create hole Path and added it to shape

``````// Create hole (rectangle)
let hole = new THREE.Path();

hole.moveTo(5, 0)
hole.lineTo(4, -1)
hole.lineTo(4, 1)
hole.lineTo(5, 0)
shape.holes.push(hole);
``````

And finaly extrude geometry and added to cylinder

``````// Extrude settings
let settings = {
steps: 1,
depth: 3,
bevelEnabled: false
}
// Create ExtrudeGeometry
let newGeometry = new THREE.ExtrudeGeometry(shape, settings);
cylinder.geometry.dispose()
cylinder.geometry = newGeometry;
``````
1. Keep in mind, 3D world does not use pixels (`1.0` in three isnâ€™t â€śone pixelâ€ť, itâ€™s just â€śone unit in 3D spaceâ€ť.) Doing anything in 3D space using pixel values may not be very practical.

2. As for your challenge - three-bvh-csg may be the way to go. It can generate new geometries based on adding / subtracting / multiplying 3D shapes - so you should be able to use it to cut a triangular shape in a cylinder using it.

Thanks for your reply. Iâ€™ll try then csg. Am I right understand that in vanilla three.js there is no way to achive my problem?

Thereâ€™s always a way - with or without addons (three-bvh-csg uses just vanilla three.js after all - together with tons of math-magic by @gkjohnson )

The question is whether itâ€™s worth investing time on coding the solution once again in vanilla three, if itâ€™s already done and opensourced as an addon

1 Like

Thanks, you are right