Три. js и анимация масштаба gsap - PullRequest
0 голосов
/ 14 марта 2020

Итак, я пытаюсь сделать событие перемещения мышью в три раза. js, где пользователь будет наводить курсор на геометрию, а затем она будет масштабироваться. Так что для анимации я использую GSAP, так как анимация мне не подходит. Тем не менее, я продолжаю получать эту ошибку, когда хочу масштабировать свою геометрию: enter image description here

Я не знаю почему, потому что в официальной документации gsap они используют масштабирование, без плагина I верить. Вот пример с их сайта

gsap.to(".box", 1, {
    scale: 0.1, 
    y: 60,
    yoyo: true, 
    repeat: -1, 
    ease: "power1.inOut",
    delay:1,
    stagger: {
      amount: 1.5, 
      grid: "auto",
      from: "center"
    }
  });

Вот мой код:

function init () {

/*------Bunch of three.js code and initialsation*/
 window.addEventListener('mousemove',onMouseMove);

}

function onMouseMove(event) {

                event.preventDefault();
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
                raycaster.setFromCamera(mouse,camera);

                var intersects = raycaster.intersectObjects(scene.children, true);

                for(var i = 0; i < intersects.length; i++) {
                    gsap.to(intersects[i].object.scale, {duration: 1, scale: 0.8});
                }

            }

1 Ответ

2 голосов
/ 14 марта 2020

Итак, я понял ответ. Кажется, что в трех. js свойство масштаба gsap не работает, поэтому перед добавлением преобразований необходимо убедиться, что вы ссылаетесь на масштаб, а затем использовать x и y (или, возможно, z - я не пробовал ) увеличить или уменьшить размер. Это код, который работал для меня:

gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});

...