单击时如何使3D对象彼此平滑跳跃？ three.js所

Question

我是Three.JS和3D网络开发人员的新手，我正在尝试做的是模仿这个动作：https://www.youtube.com/watch?v=HWSTxPc8npk&feature=youtu.be&t=7s基本上这是一组3D平面，点击后整个堆栈会做出反应并在点击的那个周围留出空间。

现在，我的基础案例是3架飞机并首先弄清楚我是否可以点击中间飞机，如何让其他人顺利跳回去，好像他们被推动而不是立即出现并消失，就像现在一样点击一个按钮。

长期目标是为每个平面设置一个单独的按钮，以便在单击时，所选平面周围会有填充，堆叠中的其余平面会相应移动。

我看过Tween.js和CSS3D，但作为一个新手很不知所措。任何教程或提示将不胜感激！

getopts

Answer 1

首先，您需要找到2个飞机。

其次，您需要使平面可点击： https://threejs.org/examples/#webgl_interactive_cubes https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/02-selecting-objects.html

第三，您应该使用Tween.js进行转换。 选择正确的平面后，使用补间为其他平面创建一个补间，全部移动到同一个轴上：

示例：

createjs.Tween.get(plane3.position.z).to(
                plane3.position.z + 100
            , 1000, createjs.Ease.cubicOut)

如果您在开始实施后在此处添加一些代码，我将能够提供更多帮助。