整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來
好雨知時節(jié)，當(dāng)春乃發(fā)生。 隨風(fēng)潛入夜，潤物細(xì)無聲。
春節(jié)已經(jīng)過去，新的一年剛剛開始，小伙伴們，今年你的目標(biāo)是什么？定個小目標(biāo)，掙它一個億？分享一下我的目標(biāo)，是讓大家的web前端能力，更上一層樓。
下面進(jìn)入主題，看下圖：
CSS3線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
這個動畫效果，如果讓你來做，你會選擇什么方式？相信很多小伙伴都會用gif圖片。其實用css實現(xiàn)也很簡單。
如果文章中有不懂的知識點，請點擊文章最下方，推薦文章哦
很明顯這個動畫效果，是上中下結(jié)構(gòu)，所以我們分3部分實現(xiàn)。
1、云：由多個圓拼接而成，并且有上下浮動的動畫效果
2、雨滴：多個，從上而下的動畫效果
3、陰影：橢圓，縮放動畫效果
下面我們按步驟實現(xiàn)
用box-shadow制作多個圓，完成拼接，行程完整的云朵。animation，添加動畫，上下浮動。
語法：box-shadow: h-shadow v-shadow blur spread color inset;
注：box-shadow，向框內(nèi)添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。
CSS3線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
相關(guān)推薦CSS3 box-shadow實現(xiàn)背景動畫
.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線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
雨滴和云一樣，都是用box-shadow來實現(xiàn)，但是雨滴的實現(xiàn)要復(fù)雜的多，雨滴數(shù)量多，每個雨滴位置的改變。
.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線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
陰影實現(xiàn)是最簡單的啦，加上縮放，透明度改變就可以了，當(dāng)然要和上面的云配合起來，云上，陰影變小，云下，陰影變大。
.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實現(xiàn)背景動畫
從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
CSS3最容易混淆屬性transition transform animation translate
喜歡小編的點擊關(guān)注，了解更多知識！
源碼地址和源文件下載請點擊下方“了解更多”
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來
好雨知時節(jié)，當(dāng)春乃發(fā)生。 隨風(fēng)潛入夜，潤物細(xì)無聲。
春節(jié)已經(jīng)過去，新的一年剛剛開始，小伙伴們，今年你的目標(biāo)是什么？定個小目標(biāo)，掙它一個億？分享一下我的目標(biāo)，是讓大家的web前端能力，更上一層樓。
下面進(jìn)入主題，看下圖：
CSS3線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
這個動畫效果，如果讓你來做，你會選擇什么方式？相信很多小伙伴都會用gif圖片。其實用css實現(xiàn)也很簡單。
如果文章中有不懂的知識點，請點擊文章最下方，推薦文章哦
很明顯這個動畫效果，是上中下結(jié)構(gòu)，所以我們分3部分實現(xiàn)。
1、云：由多個圓拼接而成，并且有上下浮動的動畫效果
2、雨滴：多個，從上而下的動畫效果
3、陰影：橢圓，縮放動畫效果
下面我們按步驟實現(xiàn)
用box-shadow制作多個圓，完成拼接，行程完整的云朵。animation，添加動畫，上下浮動。
語法：box-shadow: h-shadow v-shadow blur spread color inset;
注：box-shadow，向框內(nèi)添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。
CSS3線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
相關(guān)推薦CSS3 box-shadow實現(xiàn)背景動畫
.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線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
雨滴和云一樣，都是用box-shadow來實現(xiàn)，但是雨滴的實現(xiàn)要復(fù)雜的多，雨滴數(shù)量多，每個雨滴位置的改變。
.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線性漸變、陰影、縮放實現(xiàn)動畫下雨效果
陰影實現(xiàn)是最簡單的啦，加上縮放，透明度改變就可以了，當(dāng)然要和上面的云配合起來，云上，陰影變小，云下，陰影變大。
.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實現(xiàn)背景動畫
從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)
CSS3最容易混淆屬性transition transform animation translate
喜歡小編的點擊關(guān)注，了解更多知識！
源碼地址和源文件下載請點擊下方“了解更多”
上有很多文章來分別講解如何使用CSS3和Canvas2D實現(xiàn)過雨滴和下雨動畫：通過背景處理看起來也有視覺上的3D效果，但并非真正的3D場景，如果要加入用戶交互，進(jìn)行360°全景瀏覽就很難實現(xiàn)，并且粒子放大后會失真。
今天我們使用JavaScript和WebGL來實現(xiàn)一個真正3D建模的下雨動畫，所使用的技術(shù)可用于很多場景（demo效果可訪問：http://www.ikinsoft.com/3ddemo/rain.html）。
先看一下效果圖：
逼真的下雨動畫效果圖
要使用WebGL繪圖，總體上有4個步驟，初始化webgl繪圖環(huán)境、建立數(shù)據(jù)模型并綁定緩存、建立著色器程序、關(guān)聯(lián)著色器屬性和緩存完成繪制或動畫。
要實現(xiàn)一個下雨動畫，我們首先要實現(xiàn)一個3D雨滴的繪制。
3D雨滴具有如下特點：
1、雨滴是一個不規(guī)則橢球體，因為重力效應(yīng)，下面胖上面瘦，Z軸長度比X/Y軸要長
2、雨滴是一個球透鏡。球透鏡是凸透鏡的一種。凸透鏡的成像原理：當(dāng)物距（u）大于二倍焦距（f）時，所成像為倒立縮小的實像。
下圖右為平行但不經(jīng)過主光軸的光線入射球透鏡時的光路圖；球透鏡的焦距（f）即由球心（O）到焦點（F）的距離。
［左］凸透鏡的成像原理； ［右］球透鏡的光路圖，入射光線平行但不經(jīng)過主光軸。
經(jīng)計算可以得出，球透鏡的焦距為：
其中，N 為透鏡材料的折射率，我們知道水的折射率約為1.33（玻璃的折射率為1.5~1.9），不難算出雨滴的焦距（約為） f ≈ 2R。
在攝影/觀察雨景過程中，物距一般遠(yuǎn)大于2倍焦距的，故透過雨滴觀察到的，是遠(yuǎn)景的倒立縮小實像。
3、雨滴和水晶球一樣，會產(chǎn)生“桶形畸變”，如下圖
4、由于存在重力加速度，雨滴將呈現(xiàn)加速下落的運動
5、雨滴的大小是隨機(jī)的，而小雨滴容易受到風(fēng)阻影響，所以原則上大雨滴的下落速度要快，也就是雨滴的速度是各自不同的。
我們完成一個雨滴對象的繪制后，在尺寸、形狀和位置這個方面引入隨機(jī)量，從而生成大量雨滴。最后在Y方向上添加恒定加速度和隨機(jī)阻力，形成下落的動畫。
所謂創(chuàng)建一個球體，在WebGL中，我們是創(chuàng)建一個多面體，而多面體由一組頂點所定義。
我們模仿地球，使用經(jīng)緯線來生成橢球體的各個頂點（vertex），坐標(biāo)設(shè)定使用橢球體坐標(biāo)公式：
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坐標(biāo)軸的方向和上述立體幾何學(xué)中不完全相同）
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);
}
}
透鏡效果最主要的就是要實現(xiàn)一個倒影圖像，我們使用紋理貼圖(Texture)來實現(xiàn)。貼圖到球面的投影，參考地圖圓柱體投影方法（原理見下圖）來實現(xiàn)：
不同的是，只需要投影正面區(qū)域，因為我們一般只觀察正前方區(qū)域，我們可以制作一個半面的貼圖。我們可以直接把貼圖旋轉(zhuǎn)180°，或者通過投影時給y坐標(biāo)一個負(fù)數(shù)值來實現(xiàn)倒影效果。
//紋理圖片加載完成時執(zhí)行的回調(diào)函數(shù)
function handleLoadedTexture(texture) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);//把幾何坐標(biāo)轉(zhuǎn)換成屏幕坐標(biāo)，即Y軸翻轉(zhuǎn)
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);//使用TEXTURE0來綁定貼圖
//設(shè)置紋理縮放過濾器參數(shù)
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";
}
//按照外切圓柱投影法生成頂點紋理貼圖的坐標(biāo)
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);
}
}
我們通過上面的方法處理球面貼圖時，會同時生成相應(yīng)的桶形變形效果。
接下來我們給雨滴的形狀、大小、位置以及速度添加隨機(jī)分量，來模擬下雨的動畫。
function drawScene() {
//......
for (var i = 0; i < SPHERE_NUM; i++) {
g_mMatrix[i][13] -= 0.1 + i * Math.random() * 0.002;//隨機(jī)速度
if (g_mMatrix[i][13] < -6.5) {//隨機(jī)位置
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;
//創(chuàng)建隨機(jī)形狀和大小的橢球體，保持總體形狀為一個蒜頭形
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);
至此，整個下雨的逼真動畫已完成。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
