时间戳

首页 > 解决方案 > Three.js：如何在两个对象之间创建过渡？

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

问题描述

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

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

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

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

谢谢你的帮助！:)

标签： javascriptthree.jstexturestransitionlerp

解决方案

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

解释“拓扑相同”的类似问题： 将立方体变形为球体

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

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

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

推荐阅读