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

案例地址?webgl_animation_cloth--草坪上隨風漂浮的白布

github源代碼:

效果圖:

案件描述介紹:

右上角顯示幀數,左上角是一個控制盤,控制一些參數

居中是一片草坪,遠處的草坪皆有霧化的效果,逐漸模糊不清,草坪中央有一個單杠,掛著一塊白布,隨風飄搖.

為什么選中這個案例:

首先這個案例是運用了霧化,動畫,材質,而且效果看著也很自然,不管是遠處的草坪,還是近處隨風飄搖的衣服,都很讓人感覺很舒服.

再看代碼,在html中只有300行不到. 下面先貼出帶有我注釋的代碼,在來給大家講一講其中的精華和重點.