一.gsap動畫庫
1.1 基本使用和原理
首先直接npm安裝然後匯入
比如讓一個物體，x軸時間為5s
旋轉同理
動畫的速度曲線，可以在官網的文件找到
1.2 控制動畫屬性與方法
當然這裡面也有一些方法，動畫完成，動畫開始等
一些屬性
也可實現停止動畫隨時，給到一個變數
雙擊暫停以及恢復
二.燈光與陰影詳解
新增環境光
這種光一般是用來增亮，他沒有陰影效果
平行光：類似於太陽
預設在這個位置朝著原點打光
也可以改變平行光的照射點
建立陰影四部曲
誰產生陰影
注意：物體可以投射陰影，也可以接受陰影，不只是要在平面上接受
2.1 直線光與陰影詳細設定
移動球體z軸前後，出了一定範圍會被剪下掉
平行光是有範圍的
列印這個燈光，可以看到其範圍
far是後面，near是前面
現在就比剛才更遠一點，到了10的邊緣才被擷取
此時這個陰影是有鋸齒感的
預設是512
2.2 聚光燈
target就是聚光燈打向什麼地方
設定好角度之後
如果想設定邊緣的光慢慢衰減
衰減的快慢設定
2.3點光源
聚光燈是往一個地方發散，點光源是四面八方
點光源也可以設定距離和衰減情況
三.透明度紋理和陰影
加入給一個物體貼上一個透明度紋理，黑色就是全透明，白色就是不透明
此時透明度有了，但是陰影還是正常的
加上alphatest即可，此時表示大於0.5就是透明，小於0.5就是不透明
此時新的問題貼上貼圖後會有條紋的現象
這是由於燈光和陰影形成的一個問題
解決方法
設定燈光陰影的bias
偏移量，讓陰影便宜一點點
四.大場景動態級聯陰影設定
新增一個相機輔助器把燈光加入進來
可以看到物體在相機範圍內有陰影超過就沒有陰影
那如果實在一個很大的場景，比如把相機的陰影場景改的很大
會發現陰影出現了鋸齒狀
那麼此時的解決思路就是，分模組分遠近來展示陰影
也就是級聯陰影
類似於這樣，近處的細節就比較細，遠處稍微模糊點，因為距離遠了也看不太清了
匯入
需要的引數，這些都是可以直接複製threejs上面這一個圖的官方例子
然後建立級聯陰影例項
maxfar表示陰影最大到多遠，cascades多少個等級，mode是模式，parent當前級聯陰影的父級，mapsize級聯陰影的大小，lightdirection燈光的位置
然後把所有需要設定陰影的材質都設定為級聯陰影
然後需要一直更新渲染
此時燈管也不再需要投射陰影了交給級聯來投射
如果想設定燈光方向
加上軟陰影實現一個更柔滑的效果
前面對於燈光陰影的設定也可以不要了
