Three.js案例分析系列1--webgl_animation_cloth 草坪上漂浮的白布

案例地址 webgl_animation_cloth--草坪上随风漂浮的白布

github源代码:

效果图:

案件描述介绍:

右上角显示帧数,左上角是一个控制盘,控制一些参数

居中是一片草坪,远处的草坪皆有雾化的效果,逐渐模糊不清,草坪中央有一个单杠,挂着一块白布,随风飘摇.

为什么选中这个案例:

首先这个案例是运用了雾化,动画,材质,而且效果看着也很自然,不管是远处的草坪,还是近处随风飘摇的衣服,都很让人感觉很舒服.

再看代码,在html中只有300行不到. 下面先贴出带有我注释的代码,在来给大家讲一讲其中的精华和重点.