# How to deform vertices in a planeBufferGeometry in a circular/smooth shape

Hello! I am trying to make it so that when I drag points to deform a geometry, the vertices move to create a smooth, circular shape rather than going up and down to make a straight point currently VS end goal.

Here is the code I’m working with at the moment to deform the plane (after creating a planeBufferGeometry and aligning points):

``````var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 0.40;
var mouse = new THREE.Vector2();
var intersects = null;
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var currentIndex = null;
var planePoint = new THREE.Vector3();
var dragging = false;

function mouseDown(event) {
setRaycaster(event);
getIndex();
dragging = true;
}

function mouseMove(event) {
if (dragging && currentIndex !== null) {
controls.enabled = false;
setRaycaster(event);
raycaster.ray.intersectPlane(plane, planePoint);
geometry.attributes.position.setZ(currentIndex, planePoint.z);
geometry.attributes.position.needsUpdate = true;
}
}

function mouseUp(event) {
controls.enabled = true;
dragging = false;
currentIndex = null;
updateCoordinates();
}

function getIndex() {
intersects = raycaster.intersectObject(points);
if (intersects.length === 0) {
currentIndex = null;
return;
}
currentIndex = intersects.index;
setPlane(intersects.point);
}

function setPlane(point) {
planeNormal.subVectors(camera.position, point).normalize();
plane.setFromNormalAndCoplanarPoint(planeNormal, point);
}

function setRaycaster(event) {
getMouse(event);
raycaster.setFromCamera(mouse, camera);
}

function getMouse(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
``````

I’ve also posted this here.