three.js创建光线_使用Three.js在图像上创建波动效果

three.js创建光线

View demo 查看演示 Download Source 下载源

Waves! Because who does not enjoy the visual comfort an oscillating motion has on the human eye? Well, I do and for this tutorial, I would like to explain how to make waves on a 3D plane with Three.js using simplex noise.

波浪！ 因为谁不喜欢视觉上的舒适感，人眼却会产生摆动？ 好吧，我确实如此，对于本教程，我想解释一下如何使用Simplex噪声在Three.js的3D平面上产生波。

To keep things short, we’ll just focus on the plane effect and not on the smooth scrolling or setup required to synchronize the DOM with WebGL. For these, check out Jesper Landberg’s codepen on smooth scrolling, and Luigi De Rosa’s article on how EPIC mixed WebGL and the DOM for WeCargo.

为了简短起见，我们仅关注平面效果，而不关注将DOM与WebGL同步所需的平滑滚动或设置。 对于这些，请查看Jesper Landberg的有关平滑滚动的codepen ，以及Luigi De Rosa的有关EPIC如何将WebGL和DOM用于WeCargo混合的文章。

We’ll asume you have some basic understanding of Three.js, vertex and fragment shaders, so we?l