目錄
ThreeJS學習7_裁剪平面(clipping)
1. 裁剪平面簡介
2. 全局裁剪和局部裁剪
3. 被多個裁剪平面裁剪後
4. 被多個裁剪平面截斷後代碼
裁剪平面指的是存在一個平面, 能夠對場景中的物質進行截斷, 這個平面就是裁剪平面, 裁剪平面分為全局的裁剪和局部裁剪
全局裁剪指的有一個平面裁剪了整個場景的物體, 這需要在renderer中設定
局部裁剪指的有一個平面裁剪裁剪指定物體, 這需要在指定物體的material中設定
裡面涉及到被裁剪的物體的是否需要渲染陰影
裡面還涉及到被多個平面裁剪時, 保留并集還是交集, 下面一一講解
全局裁剪隻需要設定一樣
renderer.clippingPlanes = planes
renderer 是 WebGLRenderer執行個體,
clippingPlanes 是使用者自定義的剪裁平面，在世界空間中被指定為THREE.Plane對象。 這些平面全局使用。空間中與該平面點積為負的點将被切掉。 預設值是[]
planes類型為[], 元素是任意的平面, 啥子叫做點積為負, 也就是點到平面的向量和平面法向量夾角大于90度, 簡單來說, 平面法向量的反方向都被截斷, , 該平面的法向量為(-1, 0, 0), 法向量的方向為x軸的負方向, 距離原點的距離為0.2, 是以, 在x>0.2的區域全部被截斷不顯示
結合案例來看,
局部裁剪, 除了設定 renderer , 還要設定指定物質的material, 當平面裁剪時, 就隻有物質被裁剪, 看案例
此時的設定是
截斷陰影展示
通過比對可以看出設定截斷陰影( clipShadows )為true時, 就像截斷後的物質不存在, 已經沒有陰影了, 設定為clipShadows為false時, 截斷後的物質仍然能産生陰影
設定material中的clipIntersection = true, 會隻裁剪更改剪裁平面的行為，以便僅剪切其交叉點，而不是它們的并集。
clipIntersection預設為false, 裁剪平面的并集
簡單來說, 有多個裁剪平面, 每個裁剪平面裁剪的區域分布為c1, c2, ... ,cn, 預設設定, 裁剪 c1區域+c2區域+...+cn區域, 當clipIntersection=true時, 裁剪的隻有這些區域共同的部分, c1 ∩ c2 ∩ ... cn
三個截斷平面法向量分布為(1, 0, 0), (0, -1, 0), (0, 0, -1), c1 為x負半軸區域, c2為 y正半軸, c3為z正半軸, 可以看到, 當clipIntersection為false時, c1, c2, c3區域都被截斷了, 當為true時, 截斷了他們共同的部分
效果如下
clipIntersection = true;
clipIntersection = false;
希望讀者在看完後能提出意見, 點個贊, 鼓勵一下, 我們一起進步. 加油 !!