ThreeJS动画

Question

我正在尝试一些ThreeJS，我正在尝试让多个对象出现在场景中，并按一下按钮在这些对象上添加转换。

我已经把我的头围绕着拥有多个对象，并在点击时将对象添加到场景中。但是当我点击一个按钮时，我想要一个平稳的过渡。我创建了这个代码来演示

https://codepen.io/ben456789/pen/rvaJGm

var boxLarge = new THREE.SphereGeometry(5, 5, 5);
var boxMiddle = new THREE.SphereGeometry(5, 5, 5);
var boxSmall = new THREE.SphereGeometry(5, 5, 5);

这些是创建的球体的初始值。我希望每个按钮上的每个按钮都是这样的。

var boxLarge = new THREE.SphereGeometry(170, 70, 60);
var boxMiddle = new THREE.SphereGeometry(100, 50, 40);
var boxSmall = new THREE.SphereGeometry(40, 10, 10);

我想要的是，当用户单击时，扩展球体的几何形状，使其看起来像是来自中间的原始球体。

任何帮助都将不胜感激！

Answer 1

我使用一个名为gsap的库进行缩放动画，您可能需要相应地调整缩放属性，可以使用对象来存储球体和所需的缩放/大小，无论如何，下面是代码：

const spheres = [cubeSmall, cubeMiddle, cubeLarge];

let index = 0;
renderer.domElement.addEventListener('click', clickHandler);

function clickHandler(e) {
  if (index <= 3) {
    gsap.to(spheres[index].scale, 3, {
      x: 2,
      y: 2,
      z: 2
    });
    index++;
  }
}

如果您复制并粘贴在您的代码页，它应该是有效的，希望这有帮助。