Cloth/mesh intersection, raycasting

Questions
,
1

Using the cloth simulation demo here:

https://threejs.org/examples/webgl_animation_cloth.html

I’m trying to stop the cloth from intersecting the poles and itself (it seems to fold through itself as well). Unsure if the solution is the same for both (or for the flag intersecting itself I just need to set something) but I’ve tried the following.

setting up a collision list:

var collidableMeshList = [];

adding the flagpole to it:

collidableMeshList.push(flagpole);

Then in my animate loop checking to see if flag intersects anything in the list:

var originPoint = flag.position.clone();

for (var vertexIndex = 0; vertexIndex < flag.geometry.vertices.length; vertexIndex++)
{       
    var localVertex = flag.geometry.vertices[vertexIndex].clone();
    var globalVertex = localVertex.applyMatrix4( flag.matrix );
    var directionVector = globalVertex.sub( flag.position );

    var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
    var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
    console.log(" Hit ");
}

It doesn’t seem to do anything at all. What am I doing wrong, how do I detect (ultimately stop) the flag from intersecting itself and its pole?