Update Mesh with Hole in Scene

Questions
1

I have an existing rendered mesh on a scene that I am trying to add a hole into.

I am able to modify the shape geometry, but the rendered shape does not seem to reflect the newly added hole. How can I get the shape to update in the scene?

In the image below, I want to add the interior rectangle as a hole to the base square, my curve and hole properties appear to be correct.

image
image1260×589 32.1 KB

Code interest


function addHole() {
  const holeShape = new THREE.Shape();
  holeShape.currentPoint = allSelectedPnts[0]
  for (const [index, pnt] of allSelectedPnts.entries()) {
    if (index < allSelectedPnts.length-1) {
      var x_values = pnt[0]
      
      var starting = new THREE.Vector2(pnt.geometry.attributes.position.array[0], pnt.geometry.attributes.position.array[1])
      holeShape.currentPoint = starting   
      holeShape.lineTo(allSelectedPnts[index].geometry.attributes.position.array[0], allSelectedPnts[index].geometry.attributes.position.array[1])
    }
    else {
      var starting = new THREE.Vector2(allSelectedPnts[index].geometry.attributes.position.array[0], allSelectedPnts[index].geometry.attributes.position.array[1])
      holeShape.currentPoint = starting
      holeShape.lineTo(allSelectedPnts[0].geometry.attributes.position.array[0], allSelectedPnts[0].geometry.attributes.position.array[1])   
    }
  }
  console.log(allSelectedConc[0])
  allSelectedConc[0].geometry.parameters.shapes.holes.push(holeShape)
  
  allSelectedConc[0].geometry.parameters.shapesNeedsUpdate = true
  allSelectedConc[0].geometryNeedsUpdate = true
  console.log(allSelectedConc[0].geometry.parameters.shapes)
}

Do I need to add a NeedsUpdate = true to something? I can’t seem to figure out the hold up.
Thanks!

2

I think you might be misunderstanding holes. You add a hole to an existing drawn shape. For example,

  // draw the shape
  const shape = new Shape()
    .moveTo(-outer, outer)
    .lineTo(outer, outer)
    .lineTo(outer, -outer)
    .lineTo(-outer, -outer)
    .lineTo(-outer, outer)

 // draw the hole
  const holePath = new Path()
    .moveTo(-inner, inner)
    .lineTo(-inner, -inner)
    .lineTo(inner, -inner)
    .lineTo(inner, inner)
    .lineTo(-inner, inner)

  // add hole to shape
  shape.holes.push(holePath);

Look at code for shapes with holes in this threejs shapes example

From ShapePath, by default solid shapes are defined clockwise (CW) and holes are defined counterclockwise (CCW).

1 Like