ThreeJS动画

Question

I'm trying my hand at some ThreeJS, and I'm toying with the idea of having multiple objects on the scene and adding transition on these objects on a button click.

I've wrapped my head around having multiple objects and adding objects to the scene on a click. But I want to a smooth transition when I click a button. I've created this codepen to demonstrate

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

These are the initial values for the created spheres. And I want each one to transition on each button click to be.

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

What I want is to expand the geometry of the spheres as the user clicks to make it look like the Spheres originate from the original sphere in the middle.

Any help would be appreciated!

Answer 1

I use a library called gsap for the scale up animation, you may need to adjust the scale properties accordingly, may be use an object to store the sphere and the desired scale/size, anyway here is the code:

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

If you copy and paste that in your codepen it should work ,hope that helps.