I've been working on implementing Laplacian smoothing using JavaScript and Three.js, but I'm encountering some unexpected issues. When I hover and smooth over the meshes, instead of achieving a smooth effect, the faces are becoming disconnected and shrinking in size. What could be causing this issue with my code?
indices.forEach( index => {
if (params.brush === 'smooth') {
for (let i = 0; i < 3; i++) {
const currentVector = new THREE.Vector3().fromBufferAttribute(posAttr, index);
const nbI = neighborMap.get(index); // Retrieve neighbors of the current vertex
if (!nbI || nbI.size === 0) return; // Skip if there are no neighbors
const nbIAr = Array.from(nbI); // Convert neighbor Set to array
// Initialize average position to zero
const avgPos = new THREE.Vector3();
const neighborCount = nbIAr.length;
// Calculate the average position of the neighboring vertices
nbIAr.forEach(neighborIndex => {
const neighborPos = new THREE.Vector3().fromBufferAttribute(posAttr, neighborIndex);
avgPos.add(neighborPos); // Accumulate neighbor positions
});
avgPos.divideScalar(neighborCount); // Compute the average
// Compute the Laplacian (difference between average and current position)
const laplacian = new THREE.Vector3().subVectors(avgPos, currentVector);
// Update the vertex position by moving it toward the average
const lamdaValue = 0.005
currentVector.addScaledVector(laplacian, lamdaValue); // λ
tempVec.copy(currentVector);
}
}
posAttr.setXYZ(index, tempVec.x, tempVec.y, tempVec.z);
normalAttr.setXYZ(index, 0, 0, 0);
});
I tried increasing the value of lambda, but it ended up moving the vertex too far away,