我正在玩这个例子:https://threejs.org/examples/?q=glitch#webgl_postprocessing_glitch .
我有该示例的本地副本，并通过将 z-index 设置为 999 并将 {alpha: true} 传递给渲染器以使其透明，从而使 Three.js 渲染器成为叠加层。然后我在下面粘贴了一个普通的html网页，上面有一堆h1并将背景颜色设置为红色。所以网页位于 Canvas 的正下方。当我这样做时，问题是故障效果最终只是一堆水平白线。
webGL是否有可能扭曲其下的html View ？
最佳答案
简短的回答是否定的。WebGL 无法访问任何底层/覆盖帧缓冲区。您可以对 webGL 进行透明覆盖，但只能用覆盖的内容来掩盖其后面的内容。实际上并没有抓取和修改像素。
有一天，我们希望底层缓冲区能够以某种方式暴露给 webGL...如果是这样的话，我们可以在 3d 中制作真正的 HTML UI，并让它适用于 VR 等。
我实现的最接近的是在 webGL 场景中嵌入 css3d 对象，通过穿透 webgl 帧缓冲区的 alpha 来显示其后面的 HTML 元素，通过在 THREE.js 场景中使用透明对象来写入透明值来显示一直到后台。
如果您只是想在 html 顶部绘制一些部分透明的故障矩形，那也可以。
关于javascript - 如何让webGL扭曲它下面的HTML？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49438752/