Three.js 和 gsap 比例动画
Three.js and gsap scale animation
所以我尝试在 three.js 中执行 mousemove 事件,用户将鼠标悬停在几何图形上,然后它会缩放。
所以对于我正在使用 GSAP 的动画,因为补间似乎不适合我。但是,当我想缩放几何体时,我不断收到此错误:
我不知道为什么,因为在 gsap 官方文档中他们使用了 scale,我相信没有插件。这是他们网站上的一个例子
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});
}
}
所以我想出了答案。似乎在 three.js 中,gsap scale 属性 不起作用,因此您需要确保在添加转换之前指的是 scale,然后使用 x 和 y(或者可能是 z - I没试过)来增加或减小尺寸。
这是对我有用的代码:
gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
所以我尝试在 three.js 中执行 mousemove 事件,用户将鼠标悬停在几何图形上,然后它会缩放。
所以对于我正在使用 GSAP 的动画,因为补间似乎不适合我。但是,当我想缩放几何体时,我不断收到此错误:
我不知道为什么,因为在 gsap 官方文档中他们使用了 scale,我相信没有插件。这是他们网站上的一个例子
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});
}
}
所以我想出了答案。似乎在 three.js 中,gsap scale 属性 不起作用,因此您需要确保在添加转换之前指的是 scale,然后使用 x 和 y(或者可能是 z - I没试过)来增加或减小尺寸。 这是对我有用的代码:
gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});