Three.js：如何在两个对象之间创建过渡？

Question

我用气缸创造了一个隧道。当鼠标位于角落时，它会移除旧圆柱体并创建一个具有不同数量的径向线段的新圆柱体。

但是现在对象之间的变化没有任何过渡。有可能这样做吗？

也许删除对象是错误的方法？

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,
  })

);

其他对象创建类似，只有3/4/6段

  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);
}

谢谢你的帮助！ :)

Answer 1

您可以变形“拓扑相同”的几何体，但只是说将一个对象转换为另一个对象并不是那么简单。

类似的问题解释了“拓扑相同”：morphing a cube into sphere

你可以考虑采用不同的方式来做到这一点。

1）你可以收缩一个几何体并同时生成和生长另一个几何体，这样它至少看起来像一个过渡。

2）你可以刷一个屏幕并引入另一个屏幕？