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

您可以变形 "topologically identical" 的几何体，但仅仅说将一个对象转换为另一个对象并不是那么简单。

解释了 "topologically identical" 的类似问题：

您或许可以考虑一种不同的方法。

1) 您可以缩小一个几何体并同时生成和增长另一个几何体，这样它至少看起来像是一个过渡。

2) 您可以滑动其中一个屏幕并带入另一个屏幕吗？

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

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

javascript

textures

transition

three.js

lerp