ThreeJS 动画答案

【问题标题】：ThreeJS AnimationThreeJS 动画
【发布时间】：2018-09-30 03:30:10
【问题描述】：

我正在尝试一些 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);

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

任何帮助将不胜感激！

【问题讨论】：

1) 对于动画，您正在寻找补间和缓动。有几个 JS 库可以做到这一点，例如 tweenjs。 2) 与其改变几何形状，不如考虑使用网格scale 属性。如果您使初始球体的半径为1，则可以将原始比例设置为5, 5, 5，然后将比例设置为新的半径值（170, 170, 170）。
嗯，好的 - 听起来像是一个计划。我会检查一下。非常感谢。

标签： javascript jquery animation three.js

【解决方案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++;
  }
}

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

【讨论】：