GSAP + three js

Question

I was trying to get smooth effect while rotating or increasing in size a figure.

  welcomeWrapper.addEventListener('mousedown', () => {
    cube.scale.set(1.5, 1.5, 1.5);
    TweenMax.to(cube.scale, 1, { ease: Power4.easeInOut });
  });

//or 

  welcomeWrapper.addEventListener('mousemove', e => {
    TweenLite.to(cube.scale, 1, {
      css: {
        x: e.movementX,
        y: e.movementY,
        z: e.movementX
      }
    });

    cube.rotation.x += e.movementX / 250;
    cube.rotation.y += e.movementY / 250;
    cube.rotation.z += e.movementX / 250;
  });
//tried this but it won't work
        controls.enableDamping = true;
        controls.minPolarAngle = 0.8;
        controls.maxPolarAngle = 2.4;
        controls.dampingFactor = 0.07;
        controls.rotateSpeed = 0.07;

But every time I get: Invalid property css set to {x: 0, y: 0, z: 0} Missing plugin? gsap.registerPlugin()

Answer 1

In order to scale the cube, for example to (2, 2, 2), you'll need to do something like this:

TweenMax.to(cube.scale, 1, { x: 2, y: 2, z: 2, ease: Power4.easeInOut });

There's no reason to use css:{} with a cube, since 3D objects in THREE.js don't follow CSS attributes.