Deform vertices and then return to original shape

Im making a button that twists a little when you press it. The below code, a deform function, is called from an update that flips a bool that tells the deform either to twist or untwist. My problem is that while it twists and returns, it is growing! Here is my approach:

  if (firstPartOfAnimation) {
  for (const v in originalVertices) {

    if (timer === 1) {

      const upVec = new THREE.Vector3(0, 15, 0);
      const yPos = originalVertices[v].y
      quaternion.setFromAxisAngle(
        upVec,
        yPos / 180
      );
      geometry.vertices[v].applyQuaternion(quaternion);
      geometry.verticesNeedUpdate = true;
    }
  }
} else {
  for (const v in originalVertices) {

    if (timer === 1) {

      const d = new THREE.Vector3(0, -15, 0);
      const yPos = originalVertices[v].y
      quaternion.setFromAxisAngle(
        d,
        (yPos / 180)
      );
      geometry.vertices[v].applyQuaternion(quaternion);
      geometry.verticesNeedUpdate = true;
    }
  }
}


Im open to doing this in a totally different way, this is just what I came up with, but im very new.

I think the usage of morph targets would be appropriate for this use case. In this way, you can easily animate the transition between different vertex displacements if necessary. Check out to the following fiddle to see this approach in action. If you click on the canvas, the displacement is changed between a morph target and a default state. There are also two lines in the related event listener which are currently commented out. If you comment them in and remove the direct manipulation of morphTargetInfluences, the transition is animated.

https://jsfiddle.net/8j5cpz0y/

1 Like

Thanks for your help, there were too many other things pieces of code getting in the way. In the end I got it to work thanks to your advice