ThreeJS动画

Question

我正在尝试一些ThreeJS，我想要在场景中拥有多个对象并在点击按钮上添加这些对象的转换。

我已经绕过多个物体，并在点击时将物体添加到场景中。但是当我点击一个按钮时，我希望平滑过渡。我已创建此codepen以演示
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++;
  }
}

如果将其复制并粘贴到代码笔中，它应该可以工作，希望有帮助。