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

Questions
,
1

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:
image

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

Here demo: https://codepen.io/DYDOI-NSK/pen/wvjWYom?editors=0011

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 )
  scene.add( cylinder )
  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;
2

  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.

3

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?

4

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 :relieved:)

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 :sweat_smile:

1 Like
5

Thanks, you are right