Update Mesh with Hole in Scene

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.

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])   
  allSelectedConc[0].geometry.parameters.shapesNeedsUpdate = true
  allSelectedConc[0].geometryNeedsUpdate = true

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

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

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