如何在反应三纤维中对网格的可见性进行动画处理?

发布于 2025-01-20 08:25:39 字数 484 浏览 3 评论 0原文

我有一个 3D 模型。我可以访问网格。我想要的是为按钮单击时的可见性设置动画。当我按下按钮时,网格应该是不可见的,但不是立即可见。我想以动画的方式制作它。在某些步骤中它将是不可见的。就像需要 2 秒的时间才能通过过渡来隐形一样。我怎样才能用反应三纤维做到这一点?我是 React-三/纤维的新手。

我尝试过的代码:

 useEffect(() => {
    if (props.miscOpen === true) {
      Object.keys(materials).forEach(function (prop) {
        if (prop.includes("_350")) {
          gsap.to(materials[prop],{duration:5,opacity:0})
          
        }
      });
    } else {
      
    }
  }, [props.miscOpen]);

I have a 3D model. I have the access to the mesh. What I want is to animate the visibility on button click. When I press a button the mesh should be invisible but not instantly. I want to make it in an animated way. It will be invisible in some steps. Like taking 2 sec of time to be invisible with a transition. How can I do that with react three fiber? I'm new in React-three/fiber.

Code I tried:

 useEffect(() => {
    if (props.miscOpen === true) {
      Object.keys(materials).forEach(function (prop) {
        if (prop.includes("_350")) {
          gsap.to(materials[prop],{duration:5,opacity:0})
          
        }
      });
    } else {
      
    }
  }, [props.miscOpen]);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

忆梦 2025-01-27 08:25:39

您是否将材料的.transparent属性设置为true?
如果材料的透明属性未设置为真,则材料将保持完全不透明,并且该值(不透明度)只会影响其颜色。 请参阅此处

Are you setting the material's .transparent property to true?
If the material's transparent property is not set to true, the material will remain fully opaque and this value (opacity) will only affect its color. see here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文