Hello !
First of all you don’t need this in the Playground :
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = createScene();
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener("resize", () => {
engine.resize();
});
Just define the createScene function, the rest is handled automatically 
Also, you can detach and reattach camera on pick, in order to keep camera action with the possiblity of stoping in on vertex drag
Fixed PG with the above considerations :
Coming back to your separated faces issue : even if a cube has 8 vertices in theory, here there are 24 :
const positions = cube.getVerticesData(BABYLON.VertexBuffer.PositionKind);
console.log("positions", positions.length/3)// --> Shows 24
The reason is that the default Cube is flat shaded, with 4 vertices per face (6*4 = 24) in order to define different normals on each.
It would not be the same problem with a custom smooth shaded cube :
So at the end, if you want to keep flat shaded (24 vertices), you need to work with a trick to drag all 4 vertices when you drag.
Also, best way to drag is to set an invisible plane perpendicular to the camera at the picked point position. That way you would make sure to drag in right plane. Here you are dragging on a surface your are actually modifying, which is problematic (and the reason why if you move too fast, you leave the picked surface within one frame, and it stops)
Edit : @deet_dev since you already had this function :
setupVertexDrag(marker, cube, i);
Is was quite easy to add the above “trick”. Basically you add markers only if no marker already at this positoin. And the setupVertexDrag function can be called multiple times on the same marker, to move several vertices :
