GSAP+三个js

Question

我试图在旋转或增加图形尺寸时获得平滑效果。

  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;

但每次我得到：无效属性 css 设置为 {x: 0, y: 0, z: 0} 缺少插件？ gsap.registerPlugin()

Answer 1

为了缩放立方体，例如缩放到 (2, 2, 2)，您需要执行以下操作：

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

没有理由对立方体使用 css:{}，因为 THREE.js 中的 3D 对象不遵循 CSS 属性。

GSAP+三个js

GSAP + three js

transition

three.js

gsap