Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲视频中文字幕,亚洲精品色播一区二区,精品国产3p一区二区三区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
           CSS制作下雨動畫效果教程，你學會了嗎？
          
        
           
          
	
	
          
		
                        
          擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
          前言
          好雨知時節，當春乃發生。 隨風潛入夜，潤物細無聲。
          春節已經過去，新的一年剛剛開始，小伙伴們，今年你的目標是什么？定個小目標，掙它一個億？分享一下我的目標，是讓大家的web前端能力，更上一層樓。
          下面進入主題，看下圖：
          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          這個動畫效果，如果讓你來做，你會選擇什么方式？相信很多小伙伴都會用gif圖片。其實用css實現也很簡單。
          如果文章中有不懂的知識點，請點擊文章最下方，推薦文章哦
          動畫解析
          很明顯這個動畫效果，是上中下結構，所以我們分3部分實現。 
          1、云：由多個圓拼接而成，并且有上下浮動的動畫效果 
          2、雨滴：多個，從上而下的動畫效果 
          3、陰影：橢圓，縮放動畫效果
          下面我們按步驟實現
          云
          用box-shadow制作多個圓，完成拼接，行程完整的云朵。animation，添加動畫，上下浮動。
          語法：box-shadow: h-shadow v-shadow blur spread color inset; 
          注：box-shadow，向框內添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          相關推薦CSS3 box-shadow實現背景動畫
          .rainy {
 position: absolute;
 top: 30%;
 left: 50%;
}
.rainy:before {
 content: "";
 color: #333;
 position: absolute;
 height: 50px;
 width: 50px;
 top: 30px;
 left: -40px;
 background: #CCC;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 box-shadow: #CCC 65px -15px 0 -5px, 
 #CCC 25px -25px, 
 #CCC 30px 10px, 
 #CCC 60px 15px 0 -10px, 
 #CCC 85px 5px 0 -5px;
 animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy {
 50% {
 transform: translate(-50%, -70%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          雨滴
          雨滴和云一樣，都是用box-shadow來實現，但是雨滴的實現要復雜的多，雨滴數量多，每個雨滴位置的改變。
          .rainy {
 position: absolute;
 width: 3px;
 height: 6px;
 top: 30%;
 left: 50%;
 animation: rainy_rain .7s infinite linear;
}
.rainy:before {
 ...
}
@keyframes cloudy {
 ...
}
@keyframes rainy_rain {
 0% {
 box-shadow: 
 rgba(0, 0, 0, 0) -10px 30px, 
 rgba(0, 0, 0, 0) 40px 40px, 
 rgba(0, 0, 0, .3) -50px 75px, 
 rgba(0, 0, 0, .3) 55px 50px, 
 rgba(0, 0, 0, .3) -18px 100px, 
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
 25% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 120px,
 rgba(0, 0, 0, 0) 12px 120px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 26% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 40px,
 rgba(0, 0, 0, 0) 12px 20px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 50% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 100px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 51% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 45px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 75% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 95px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 120px,
 rgba(0, 0, 0, 0) 30px 110px;
 }
 76% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 35px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 25px,
 rgba(0, 0, 0, 0) 30px 15px;
 }
 100% {
 box-shadow:
 rgba(0, 0, 0, 0) -10px 120px,
 rgba(0, 0, 0, 0) 40px 120px,
 rgba(0, 0, 0, .3) -50px 75px,
 rgba(0, 0, 0, .3) 55px 50px,
 rgba(0, 0, 0, .3) -18px 100px,
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
}

          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          陰影
          陰影實現是最簡單的啦，加上縮放，透明度改變就可以了，當然要和上面的云配合起來，云上，陰影變小，云下，陰影變大。
          .rainy:after {
 content: "";
 position: absolute;
 top: 120px;
 left: 50%;
 height: 15px;
 width: 120px;
 background: rgba(0, 0, 0, .5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy_shadow {
 50% {
 transform: translate(-50%, -50%) scale(0.8);
 background: rgba(0, 0, 0, .2);
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 background: rgba(0, 0, 0, .5);
 }
}

          演示地址：http://demo.javanx.cn/raindrop/index2.html
          推薦文章
          CSS3 box-shadow實現背景動畫
          從淺到深的學習 CSS3陰影(box-shadow)
          CSS3最容易混淆屬性transition transform animation translate
          公告
          喜歡小編的點擊關注，了解更多知識！
          源碼地址和源文件下載請點擊下方“了解更多”
          擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
          前言
          好雨知時節，當春乃發生。 隨風潛入夜，潤物細無聲。
          春節已經過去，新的一年剛剛開始，小伙伴們，今年你的目標是什么？定個小目標，掙它一個億？分享一下我的目標，是讓大家的web前端能力，更上一層樓。
          下面進入主題，看下圖：
          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          這個動畫效果，如果讓你來做，你會選擇什么方式？相信很多小伙伴都會用gif圖片。其實用css實現也很簡單。
          如果文章中有不懂的知識點，請點擊文章最下方，推薦文章哦
          動畫解析
          很明顯這個動畫效果，是上中下結構，所以我們分3部分實現。 
          1、云：由多個圓拼接而成，并且有上下浮動的動畫效果 
          2、雨滴：多個，從上而下的動畫效果 
          3、陰影：橢圓，縮放動畫效果
          下面我們按步驟實現
          云
          用box-shadow制作多個圓，完成拼接，行程完整的云朵。animation，添加動畫，上下浮動。
          語法：box-shadow: h-shadow v-shadow blur spread color inset; 
          注：box-shadow，向框內添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          相關推薦CSS3 box-shadow實現背景動畫
          .rainy {
 position: absolute;
 top: 30%;
 left: 50%;
}
.rainy:before {
 content: "";
 color: #333;
 position: absolute;
 height: 50px;
 width: 50px;
 top: 30px;
 left: -40px;
 background: #CCC;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 box-shadow: #CCC 65px -15px 0 -5px, 
 #CCC 25px -25px, 
 #CCC 30px 10px, 
 #CCC 60px 15px 0 -10px, 
 #CCC 85px 5px 0 -5px;
 animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy {
 50% {
 transform: translate(-50%, -70%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          雨滴
          雨滴和云一樣，都是用box-shadow來實現，但是雨滴的實現要復雜的多，雨滴數量多，每個雨滴位置的改變。
          .rainy {
 position: absolute;
 width: 3px;
 height: 6px;
 top: 30%;
 left: 50%;
 animation: rainy_rain .7s infinite linear;
}
.rainy:before {
 ...
}
@keyframes cloudy {
 ...
}
@keyframes rainy_rain {
 0% {
 box-shadow: 
 rgba(0, 0, 0, 0) -10px 30px, 
 rgba(0, 0, 0, 0) 40px 40px, 
 rgba(0, 0, 0, .3) -50px 75px, 
 rgba(0, 0, 0, .3) 55px 50px, 
 rgba(0, 0, 0, .3) -18px 100px, 
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
 25% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 120px,
 rgba(0, 0, 0, 0) 12px 120px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 26% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 40px,
 rgba(0, 0, 0, 0) 12px 20px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 50% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 100px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 51% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 45px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 75% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 95px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 120px,
 rgba(0, 0, 0, 0) 30px 110px;
 }
 76% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 35px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 25px,
 rgba(0, 0, 0, 0) 30px 15px;
 }
 100% {
 box-shadow:
 rgba(0, 0, 0, 0) -10px 120px,
 rgba(0, 0, 0, 0) 40px 120px,
 rgba(0, 0, 0, .3) -50px 75px,
 rgba(0, 0, 0, .3) 55px 50px,
 rgba(0, 0, 0, .3) -18px 100px,
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
}

          CSS3線性漸變、陰影、縮放實現動畫下雨效果
          陰影
          陰影實現是最簡單的啦，加上縮放，透明度改變就可以了，當然要和上面的云配合起來，云上，陰影變小，云下，陰影變大。
          .rainy:after {
 content: "";
 position: absolute;
 top: 120px;
 left: 50%;
 height: 15px;
 width: 120px;
 background: rgba(0, 0, 0, .5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy_shadow {
 50% {
 transform: translate(-50%, -50%) scale(0.8);
 background: rgba(0, 0, 0, .2);
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 background: rgba(0, 0, 0, .5);
 }
}

          演示地址：http://demo.javanx.cn/raindrop/index2.html
          推薦文章
          CSS3 box-shadow實現背景動畫
          從淺到深的學習 CSS3陰影(box-shadow)
          CSS3最容易混淆屬性transition transform animation translate
          公告
          喜歡小編的點擊關注，了解更多知識！
          源碼地址和源文件下載請點擊下方“了解更多”
          上有很多文章來分別講解如何使用CSS3和Canvas2D實現過雨滴和下雨動畫：通過背景處理看起來也有視覺上的3D效果，但并非真正的3D場景，如果要加入用戶交互，進行360°全景瀏覽就很難實現，并且粒子放大后會失真。
          今天我們使用JavaScript和WebGL來實現一個真正3D建模的下雨動畫，所使用的技術可用于很多場景（demo效果可訪問：http://www.ikinsoft.com/3ddemo/rain.html）。
          先看一下效果圖：
          逼真的下雨動畫效果圖
          要使用WebGL繪圖，總體上有4個步驟，初始化webgl繪圖環境、建立數據模型并綁定緩存、建立著色器程序、關聯著色器屬性和緩存完成繪制或動畫。
          3D雨滴的繪制原理
          要實現一個下雨動畫，我們首先要實現一個3D雨滴的繪制。
          3D雨滴具有如下特點：
          • 1、雨滴是一個不規則橢球體，因為重力效應，下面胖上面瘦，Z軸長度比X/Y軸要長
          • 2、雨滴是一個球透鏡。球透鏡是凸透鏡的一種。凸透鏡的成像原理：當物距（u）大于二倍焦距（f）時，所成像為倒立縮小的實像。
          下圖右為平行但不經過主光軸的光線入射球透鏡時的光路圖；球透鏡的焦距（f）即由球心（O）到焦點（F）的距離。
          ［左］凸透鏡的成像原理； ［右］球透鏡的光路圖，入射光線平行但不經過主光軸。
          經計算可以得出，球透鏡的焦距為：
          其中，N 為透鏡材料的折射率，我們知道水的折射率約為1.33（玻璃的折射率為1.5~1.9），不難算出雨滴的焦距（約為） f ≈ 2R。
          在攝影/觀察雨景過程中，物距一般遠大于2倍焦距的，故透過雨滴觀察到的，是遠景的倒立縮小實像。
          • 3、雨滴和水晶球一樣，會產生“桶形畸變”，如下圖
          • 4、由于存在重力加速度，雨滴將呈現加速下落的運動
          • 5、雨滴的大小是隨機的，而小雨滴容易受到風阻影響，所以原則上大雨滴的下落速度要快，也就是雨滴的速度是各自不同的。
          我們完成一個雨滴對象的繪制后，在尺寸、形狀和位置這個方面引入隨機量，從而生成大量雨滴。最后在Y方向上添加恒定加速度和隨機阻力，形成下落的動畫。
          生成不規則橢球體
          所謂創建一個球體，在WebGL中，我們是創建一個多面體，而多面體由一組頂點所定義。
          我們模仿地球，使用經緯線來生成橢球體的各個頂點（vertex），坐標設定使用橢球體坐標公式：
          x=asinθcosφ
          y=bsinθsinφ
          z=ccosθ (0≤θ≤π, 0≤φ<2π)
          其中a,b,c是橢球體的3個半徑，θ（theta）是z軸夾角，φ(phi)是投影到x/y平面上從x開始的夾角。
          代碼類似如下：(注意WebGL中的x/y/z坐標軸的方向和上述立體幾何學中不完全相同）
          var latitudeBands = 60;
          var longitudeBands = 60;
          var radius = 0.4;
          var aRadius = radius * 1.2;
          var bRadius = radius * 1.3;
          var cRadius = radius * 1.0;
          var vertexPositionData = [];
          var normalData = [];
          var textureCoordData = [];
          for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
          var theta = latNumber * Math.PI / latitudeBands;
          var sinTheta = Math.sin(theta);
          var cosTheta = Math.cos(theta);
          for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
          var phi = longNumber * 2 * Math.PI / longitudeBands;
          var sinPhi = Math.sin(phi);
          var cosPhi = Math.cos(phi);
          var x = aRadius * cosPhi * sinTheta;
          var y = bRadius * cosTheta;
          var z = cRadius * sinPhi * sinTheta;
          vertexPositionData.push(radius * x);
          vertexPositionData.push(radius * y);
          vertexPositionData.push(radius * z);
          }
          }
          創建透鏡效果
          透鏡效果最主要的就是要實現一個倒影圖像，我們使用紋理貼圖(Texture)來實現。貼圖到球面的投影，參考地圖圓柱體投影方法（原理見下圖）來實現：
          不同的是，只需要投影正面區域，因為我們一般只觀察正前方區域，我們可以制作一個半面的貼圖。我們可以直接把貼圖旋轉180°，或者通過投影時給y坐標一個負數值來實現倒影效果。
          //紋理圖片加載完成時執行的回調函數
          function handleLoadedTexture(texture) {
          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);//把幾何坐標轉換成屏幕坐標，即Y軸翻轉
          gl.bindTexture(gl.TEXTURE_2D, texture);
          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);//使用TEXTURE0來綁定貼圖
          //設置紋理縮放過濾器參數
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
          gl.generateMipmap(gl.TEXTURE_2D);
          gl.bindTexture(gl.TEXTURE_2D, null);
          }
          var dropTexture;
          function initTexture() {
          dropTexture = gl.createTexture();
          dropTexture.image = new Image();
          dropTexture.image.onload = function() {
          handleLoadedTexture(dropTexture)
          }
          dropTexture.image.src = "http://wow.techbrood.com/assets/love_half_r.png";
          }
          //按照外切圓柱投影法生成頂點紋理貼圖的坐標
          for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
          aRadius -= latNumber * radius / 1000;
          var theta = latNumber * Math.PI / latitudeBands;
          var sinTheta = Math.sin(theta);
          var cosTheta = Math.cos(theta);
          for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
          var u = 1 - (longNumber / longitudeBands);
          var v = 1 - (latNumber / latitudeBands);
          textureCoordData.push(u);
          textureCoordData.push(v);
          }
          }
          我們通過上面的方法處理球面貼圖時，會同時生成相應的桶形變形效果。
          隨機雨滴的生成和動畫
          接下來我們給雨滴的形狀、大小、位置以及速度添加隨機分量，來模擬下雨的動畫。
          function drawScene() {
          //......
          for (var i = 0; i < SPHERE_NUM; i++) {
          g_mMatrix[i][13] -= 0.1 + i * Math.random() * 0.002;//隨機速度
          if (g_mMatrix[i][13] < -6.5) {//隨機位置
          g_mMatrix[i][12] = Math.random() * 30.0 - 15.0;
          g_mMatrix[i][13] = 6.5;
          g_mMatrix[i][14] = Math.random() * 4.0 - 20.0;
          };
          //使用紋理TEXTURE0
          gl.activeTexture(gl.TEXTURE0);
          gl.bindTexture(gl.TEXTURE_2D, dropTexture);
          gl.uniform1i(shaderProgram.samplerUniform, 0);
          var blending = true;
          if (blending) {//使用混合模式
          gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
          gl.enable(gl.BLEND);
          gl.disable(gl.DEPTH_TEST);
          gl.uniform1f(shaderProgram.alphaUniform, 1.0);
          } else {
          gl.disable(gl.BLEND);
          gl.enable(gl.DEPTH_TEST);
          }
          }
          //......
          }
          function initBuffer() {
          //......
          var latitudeBands = 60;
          var longitudeBands = 60;
          var radius = 0.5;
          //創建隨機形狀和大小的橢球體，保持總體形狀為一個蒜頭形
          var aRadius = radius * (1.2 + Math.random());
          var bRadius = radius * (1.3 + Math.random());
          var cRadius = radius * 1.0;
          var vertexPositionData = [];
          var normalData = [];
          var textureCoordData = [];
          for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
          aRadius -= latNumber * radius / 1000;
          var theta = latNumber * Math.PI / latitudeBands;
          var sinTheta = Math.sin(theta);
          var cosTheta = Math.cos(theta);
          for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
          var phi = longNumber * 2 * Math.PI / longitudeBands;
          var sinPhi = Math.sin(phi);
          var cosPhi = Math.cos(phi);
          var x = aRadius * cosPhi * sinTheta;
          var y = -(bRadius * cosTheta);
          var z = cRadius * sinPhi * sinTheta;
          normalData.push(x);
          normalData.push(y);
          normalData.push(z);
          vertexPositionData.push(radius * x);
          vertexPositionData.push(radius * y);
          vertexPositionData.push(radius * z);
          }
          }
          //......
          }
          最后我們編寫動畫程序的主流程，動畫我們使用requestAnimationFrame接口：
          function main() {
          window.scrollTo(0, 0);
          var canvas = document.getElementById("container");
          initGL(canvas);
          initShaders();
          initBuffers();
          initTexture();
          //gl.clearColor(0.0, 0.0, 0.0, 1.0); //clear background
          gl.enable(gl.DEPTH_TEST);
          requestAnimationFrame(drawScene());
          }
          window.addEventListener('load', main);
          至此，整個下雨的逼真動畫已完成。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国精品无码一区二区三区左线|
婷婷国产成人精品一区二|
91精品国产一区二区三区左线|
亚洲国产AV一区二区三区四区|
国产一区二区三区不卡观|
久久无码一区二区三区少妇|
四虎一区二区成人免费影院网址|
人妻无码第一区二区三区|
国产高清在线精品一区二区|
国产乱码精品一区二区三区香蕉|
久久综合精品不卡一区二区
|
中文字幕精品无码一区二区三区|
免费看AV毛片一区二区三区|
99精品国产高清一区二区麻豆|
国产在线一区二区三区|
不卡一区二区在线|
精品人妻一区二区三区毛片|
日本在线视频一区|
精品人体无码一区二区三区|
精品理论片一区二区三区|
国产乱码精品一区二区三区|
99热门精品一区二区三区无码|
亚洲一区二区三区四区在线观看|
一区二区三区无码视频免费福利|
成人区精品一区二区不卡|
无码精品久久一区二区三区
|
中文字幕aⅴ人妻一区二区|
国产精品无码一区二区在线观一|
日韩精品电影一区亚洲|
一区二区中文字幕在线观看|
一区二区三区在线免费|
国产激情一区二区三区成人91
|
亚洲午夜在线一区|
亚洲一区二区三区亚瑟|
国产精品一区视频|
国产精品免费视频一区|
一区二区网站在线观看|
日韩一区二区久久久久久|
亚洲美女一区二区三区|
黑巨人与欧美精品一区|
国产在线步兵一区二区三区
|