【问题标题】:Using CSS Mask Transition with A-Frame sky entity使用带有 A-Frame 天空实体的 CSS 蒙版过渡
【发布时间】:2017-01-15 13:42:24
【问题描述】:

我正在做一个学校项目,我们正在使用 A-Frame 框架开发一个互动故事。我们的想法是参观您的老房子并回忆过去的美好时光。所以我们在天空实体中使用 360° 图像,并在现在和过去之间切换这些图像。

我正在处理切换图像时的过渡,但我可以开发的唯一好的过渡是简单的淡入黑...我的想法是在这里获得类似于 CSS 蒙版过渡的东西:https://tympanus.net/Tutorials/CSSMaskTransition/

有没有可能得到类似的结果? 如果没有,您对我可以做的一个好的和简单的过渡有什么想法吗?

您知道,我不习惯 Web 开发,我们只有 3 天的时间来完成这次体验,而且我对 A-Frame 框架完全陌生(我已经研究了 3 天了)仅)。

非常感谢您抽出宝贵的时间,祝您有美好的一天!

奥古斯丁。

【问题讨论】:

  • 类似的过渡将非常复杂地实施,我认为在没有太多图形经验的情况下几天之内是不可能的。您很可能需要编写自己的着色器来更改每个像素的 alpha 值。或者您可以创建一个 Alpha 贴图 GIF 或视频,并使用它来控制纹理的 Alpha 值。
  • 这就是我悲伤的想法......我无法进行简单的淡入淡出到黑色的过渡,因为我使用了 5 个叠加的天空。我这样做是为了通过 CSS 更改某些天空的不透明度来获得一个简单的动画,而不是使用视频(太大)或 gif(质量太差)。你有天空动画的例子吗?

标签: animation aframe


【解决方案1】:

类似的过渡将非常复杂地实施,我认为在没有太多图形经验的情况下几天之内是不可能的。您很可能需要编写自己的着色器来更改每个像素的 alpha 值。或者您可以创建一个 Alpha 贴图 GIF 或视频,并使用它来控制纹理的 Alpha 值。

A-Frame 有一个在 360 度图像之间转换的示例。为了获得更好的性能,你有一个图像,淡入黑色,换出图像,然后淡出:https://github.com/aframevr/360-image-gallery-boilerplate

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-12
    • 1970-01-01
    • 2021-08-19
    • 1970-01-01
    相关资源
    最近更新 更多