javascript - Three.js 和 gsap 缩放动画
问题描述
所以我试图在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 - 我没有尝试过)增大或减小尺寸。这是对我有用的代码:
gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});
推荐阅读
- python - Dask 使用正确的元数据应用抛出错误
- c++ - Visual Studio 2015 命令提示符和 midl 无法识别问题
- python - 使用 python 中 tkinter 下拉菜单中的数据更新 sqlite3 表
- sql-server - 在 Powershell 中使用 ExecuteNonQuery() 将 SQL 打印消息获取到变量中
- javascript - 如何从 React 组件函数 prop 中获取返回值?
- grpc - 将类传递给 gRPC (proto3) 中的 RPC
- cors - Laravel 7 Passport:被 CORS 策略阻止
- r - R 等效于 Scikit-Learn make_regression() 函数
- c++ - 为什么简单的迭代器不可读?
- javascript - 当使用 Context API 仅调用其中一个对象时,设置状态会更新这两个对象。反应