Three.js: How to create a transition between two objects?

Question

I created a tunnel out of a cylinders. When the mouse is in a corner, it removes the old cylinder and creates a new one with a different number of radial segments.

But now the change between the objects is without any transition. Is there a possibility to do that?

Maybe removing the objects is the wrong way?

var w = window.innerWidth;
var h = window.innerHeight;

var circle = new THREE.Mesh(
  new THREE.CylinderGeometry( 50, 50, 1024, 32, 1, true ),
  new THREE.MeshBasicMaterial({
    transparent: true,
    alphaMap: tunnelTexture,
    side: THREE.BackSide,
  })

);

The other objects are created similar, just with 3/4/6 Segments

  if (mouseX < w/4 && h-(h/4) < mouseY < h/4) {
              scene.remove(circle);
              scene.remove(triangle);
              scene.remove(hexagon);

              scene.add(rect);

            }
            if (mouseY > h-(h/4)) {

              scene.remove(circle);
              scene.remove(rect);
              scene.remove(hexagon);

              scene.add(triangle);


            }

            if (mouseX> w-(w/4) && h-(h/4) < mouseY < h/4) {

              scene.remove(triangle);
              scene.remove(rect);
              scene.remove(hexagon);

              scene.add(circle);


            }
            if (mouseY < h/4) {

              scene.remove(triangle);
              scene.remove(rect);
              scene.remove(circle);

              scene.add(hexagon);
}

Thanks for your help! :)

Answer 1

You can morph geometry which is "topologically identical" but it is not so simple to just say convert one object into another.

Similar question where "topologically identical" is explained: morphing a cube into sphere

You could maybe think about a way to do it differently.

1) You could shrink one geometry and spawn and grow another geometry at the same time so that it perhaps looks like a transition at least.

2) You could swipe one of the screen and bring in another?