我正在研究網路影片、WebGL、Canvas、ThreeJS、GSAP 和所有那些有趣的工具。我正在研究不同的網站以及它們如何能夠達到某些效果。
我對這兩個網站感到震驚：https://14islands.com/和https://www.hellomonday.com/。
他們的影片看起來很簡單（ish）。對影像的液體效果。我知道使用 ThreeJS 過濾器或 WebGL 或其他 Canvas 庫可以實作這些效果。我不明白的是，這兩個網站都有一個全尺寸的背景<canvas>元素fixed。<canvas>并且通過而不是純粹的HTML元素渲染網站上的幾乎所有影像。
這允許讓所有影像都具有真正的涂料效果。但我不明白的是，他們如何將影像的位置和大小與HTML DOM元素同步得如此完美？
這似乎是編碼的噩夢。當用戶滾動或調整頁面大小時，更新畫布上的每個影像也不會造成巨大的性能負擔嗎？
我相信我錯過了一些東西。也許有一個圖書館可以處理大部分這些？
如果有任何簡單的例子，我很樂意看到它們。
感謝您的時間 ：）
uj5u.com熱心網友回復：
Welp 證明這可以用 ThreeJS 很簡單地完成。也許也有方法，但這對我來說似乎最簡單。
TL;DR：您可以為 a 創建一個場景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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506588.html
標籤：javascript html css 动画 帆布