使用画布显示动画图像

Question

我正在进入网络动画，WebGL，画布，ThreeJS，GSAP和所有这些有趣的工具。我正在调查不同的网站，以及它们是如何达到某些效果的。

我被这两个网站震撼了：https://14islands.com/ & https://www.hellomonday.com/。

他们的动画看起来很简单。液体对图像的影响。我知道，通过使用ThreeJS过滤器、WebGL或其他画布库，您可以实现这些效果。我不明白的是，这两个站点的后台都有一个全尺寸的<canvas>元素fixed。并通过<canvas>而不是纯HTML元素呈现站点上的几乎所有图像。

这允许有所有的图像有真正的毒品效果。但我不明白的是，它们如何能够如此完美地将图像的位置和大小与HTML DOM元素同步呢？

这似乎是一场恶梦。另外，当用户滚动或调整页面大小时，更新画布上的每个图像难道不是一个巨大的性能负担吗？

我想我错过了什么。也许有一个库能处理大部分这些问题？

如果有任何简单的例子，我很乐意看到它们。

谢谢你抽出时间:)

Answer 1

Welp发现，这可以很简单地用ThreeJS来完成。也许也有一些方法，但这对我来说似乎很简单。

TL;DR:您可以为一个div创建一个场景，您可以使用ThreeJS多次这样做，以便它在指定的div中呈现一个场景。

演示：https://threejs.org/examples/?q=multiple#webgl_multiple_elements

代码：https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html